|
|
@@ -0,0 +1,313 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <view class="product-list">
|
|
|
+ <view
|
|
|
+ class="product"
|
|
|
+ v-for="(i, s) in goods"
|
|
|
+ :key="s"
|
|
|
+ @click="NavToGoodsDetail(i.id)"
|
|
|
+ >
|
|
|
+ <view class="image-view">
|
|
|
+ <image class="product-image" :src="i.goods.original_img"></image>
|
|
|
+ </view>
|
|
|
+ <view class="content-view">
|
|
|
+ <view :class="['product-title', 'ellipsis2']">{{
|
|
|
+ i.goods_name
|
|
|
+ }}</view>
|
|
|
+ <view class="product-price">
|
|
|
+ <text class="product-price-original">{{ i.cost_price }}</text>
|
|
|
+ <text class="product-text" v-if="['3', '4'].includes(type)"
|
|
|
+ >赠<text class="corFE2C15">{{ i.give_cha_bao }}</text
|
|
|
+ >茶宝</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="product-txt" v-if="type == 4">
|
|
|
+ <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="type == 1">赠送{{ i.give_integral + "批发券" }}</view> -->
|
|
|
+ <view class="product-txt" v-if="type == 6"
|
|
|
+ >每<text class="green">{{ i.interval_time }}</text> 分钟降价
|
|
|
+ <text class="green">{{ i.drop_range * 100 }}%</text>
|
|
|
+ </view>
|
|
|
+ <view class="product-txt" v-if="['3', '4'].includes(type)"
|
|
|
+ >限时赠送<text class="corFE2C15">{{ i.teac }}</text
|
|
|
+ >TeaC</view
|
|
|
+ >
|
|
|
+ <view class="product-txt fenxiang" v-if="['3', '4'].includes(type)">
|
|
|
+ <text class="iconfont red"></text>
|
|
|
+ <text class="red"
|
|
|
+ >分享约获得{{ i.first_teac
|
|
|
+ }}{{ type == 3 ? "TeaC" : "现金" }}</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <not-goods v-if="haveGoods" textStr="暂无商品信息"></not-goods> -->
|
|
|
+ <view class="con_nothing" v-if="haveGoods">
|
|
|
+ <image
|
|
|
+ mode="widthFix"
|
|
|
+ class="image"
|
|
|
+ src="/static/img/con_nothing.png"
|
|
|
+ ></image>
|
|
|
+ <text>{{ "暂无商品信息" }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+let page = 1;
|
|
|
+import { post } from "@/request/api.js";
|
|
|
+import notGoods from "@/components/not-goods/index.vue";
|
|
|
+export default {
|
|
|
+ components: { notGoods },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: "",
|
|
|
+ type: "",
|
|
|
+ goods: [], // 商品列表
|
|
|
+ haveGoods: false, // 是否有商品
|
|
|
+ is_vip: undefined, //是否筛选“链接大使礼包”专区
|
|
|
+ categoryId: "",
|
|
|
+ titleName: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(e) {
|
|
|
+ console.log(e);
|
|
|
+ this.type = e.type;
|
|
|
+ this.categoryId = e.id;
|
|
|
+ this.titleName = e.name;
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: e.name,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ page = 1;
|
|
|
+ this.goods = [];
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ loadData() {
|
|
|
+ let that = this;
|
|
|
+ uni.showLoading({ mask: true });
|
|
|
+ let data = {
|
|
|
+ page: page,
|
|
|
+ type: this.type,
|
|
|
+ category_id: this.categoryId,
|
|
|
+ };
|
|
|
+ post("v1/goods/categoryInfo", data).then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code === 0) {
|
|
|
+ let obj = res.data.data.data;
|
|
|
+ if (page == 1) that.goods = [];
|
|
|
+ if (page == 1 && obj.length <= 0) {
|
|
|
+ that.haveGoods = true;
|
|
|
+ } else {
|
|
|
+ that.haveGoods = false;
|
|
|
+ }
|
|
|
+ if (obj.length > 0) {
|
|
|
+ obj.forEach((e) => {
|
|
|
+ that.goods.push(e);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // console.log("这里");
|
|
|
+ page = -1;
|
|
|
+ this.$toast("暂无更多");
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ page = -1;
|
|
|
+ this.haveGoods = true;
|
|
|
+ this.$toast("暂无更多");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 跳转到商品详情页
|
|
|
+ NavToGoodsDetail(id, type) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/product/p_details?id=" + id + "&type=" + this.type,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 点击关闭弹窗
|
|
|
+ closeBtn: function () {
|
|
|
+ this.$refs.shopping.close();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onShareAppMessage() {
|
|
|
+ let userinfo = uni.getStorageSync("userinfo");
|
|
|
+ var path =
|
|
|
+ "/pagesC/consumerGold/specialCategory?name=" +
|
|
|
+ this.titleName +
|
|
|
+ "&id=" +
|
|
|
+ this.categoryId +
|
|
|
+ "&type=4";
|
|
|
+ if (userinfo.invite)
|
|
|
+ path =
|
|
|
+ "/pagesC/consumerGold/specialCategory?invite=" +
|
|
|
+ userinfo.invite +
|
|
|
+ "&name=" +
|
|
|
+ this.titleName +
|
|
|
+ "&id=" +
|
|
|
+ this.categoryId +
|
|
|
+ "&type=4";
|
|
|
+ var title = `让数字经济赋能美好生活!`;
|
|
|
+ return {
|
|
|
+ title: title,
|
|
|
+ path: path,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //页面上拉触底事件的处理函数
|
|
|
+ onReachBottom: function () {
|
|
|
+ if (page != -1) {
|
|
|
+ var that = this;
|
|
|
+ setTimeout(function () {
|
|
|
+ page = page + 1;
|
|
|
+ that.loadData();
|
|
|
+ }, 800);
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+// 页面配置
|
|
|
+page {
|
|
|
+ background: #f4f4f4;
|
|
|
+}
|
|
|
+
|
|
|
+.container {
|
|
|
+ padding: 30rpx 0;
|
|
|
+}
|
|
|
+
|
|
|
+// 页面配置-end
|
|
|
+
|
|
|
+// 商品列表
|
|
|
+.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: #888;
|
|
|
+ text-decoration: line-through;
|
|
|
+ font-size: 22rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ content: "¥";
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-tip {
|
|
|
+ position: absolute;
|
|
|
+ right: 20rpx;
|
|
|
+ background-color: #ff3333;
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-unit {
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .green {
|
|
|
+ color: #18bb88;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-txt,
|
|
|
+ .product-text {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #787878;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ margin-right: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.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>
|