绿满眶商城微信小程序-uniapp
peng
2025-08-01 1b70393b2d1756c183aab58f0aa7ffb0d4292ac0
添加优惠卷跳转指定页面
4个文件已修改
1个文件已添加
473 ■■■■■ 已修改文件
config/api.js 16 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
pages.json 14 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
pages/cart/coupon/myCoupon.vue 6 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
pages/commodity-square/coups-goods-list.vue 435 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
pages/product/goods.vue 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
config/api.js
@@ -4,10 +4,10 @@
 */
// 开发环境
const dev = {
  // im: "http://192.168.0.15:8885",
  // common: "http://192.168.0.15:8890",
  // buyer: "http://192.168.0.15:8888",
  // store: "http://192.168.0.15:8889",
  im: "http://192.168.0.15:8885",
  common: "http://192.168.0.15:8890",
  buyer: "http://192.168.0.15:8888",
  store: "http://192.168.0.15:8889",
  // im: "http://127.0.0.1:8885",
  // common: "http://127.0.0.1:8890",
@@ -17,10 +17,10 @@
  // common: "http://192.168.0.113:8890",
  // buyer: "http://192.168.0.113:8888",
  // im: "http://192.168.0.113:8885",
  im: "https://myk.9village.cn",
  common: "https://myk.9village.cn",
  buyer: "https://myk.9village.cn",
  store: "https://myk.9village.cn",
  // im: "https://myk.9village.cn",
  // common: "https://myk.9village.cn",
  // buyer: "https://myk.9village.cn",
  // store: "https://myk.9village.cn",
  // im: "https://www.meiyikuang.com/mykapi",
  // common: "https://www.meiyikuang.com/mykapi",
  // buyer: "https://www.meiyikuang.com/mykapi",
pages.json
@@ -2017,6 +2017,20 @@
              "u-icon": "view"
            }
          }
        },
        {
            "path" : "coups-goods-list",
            "style" :
            {
                "navigationStyle": "custom",
                "navigationBarTitleText" : "优惠卷商品页面",
                "componentPlaceholder": {
                  "u-navbar": "view",
                  "u-search": "view",
                  "u-image": "view",
                  "u-icon": "view"
                }
            }
        }
      ]
    },
pages/cart/coupon/myCoupon.vue
@@ -252,8 +252,12 @@
      // uni.navigateTo({
      //   url: `/pages/navigation/search/searchPage?promotionsId=${item.couponId}&promotionType=COUPON`,
      // });
      if(item.scopeType ==='PORTION_GOODS'){
          //获取优惠卷对应的商品
          //指定跳转到商品详情页面进行购买
      }
      uni.navigateTo({
          url: '/pages/commodity-square/commoditySquare'
          url: `/pages/commodity-square/coups-goods-list?promotionsId=${item.couponId}&promotionType=COUPON`
      });
    },
pages/commodity-square/coups-goods-list.vue
New file
@@ -0,0 +1,435 @@
<template>
    <view class="container">
        <u-navbar :is-back="false" title="优惠卷商品">
            <u-icon name="arrow-left" size="34" @click="pageBack()" style="padding: 0 20rpx;"></u-icon>
        </u-navbar>
        <input type="text" value="flushDom" v-if="false" />
        <view class="search">
            <u-search class="nav-search" @change='searchGoods' v-model="searchInfo" placeholder="搜索商品"
                :show-action="false"></u-search>
        </view>
        <view style="display: flex;padding: 32rpx;box-sizing: border-box;height: 100%;">
            <view class="navigatorMenue">
                <scroll-view class="typeNavigation" :scroll-y="true" :show-scrollbar="false">
                    <view class="typeNavigationItem" :class="{typeNavigationItemCheck:currentCategort ==item.id}"
                        @click="chooseCategory(item.id)" v-for="item in categoryList" :key="item.id">
                        {{item.name}}
                    </view>
                </scroll-view>
            </view>
            <view class="goodsInfos" style="position: relative;">
                <scroll-view :scroll-y="true" :show-scrollbar="false" style="height: 100%;"
                    @scrolltolower="loadMoreData()">
                    <view class="goodsItem" v-for="item in goodsList" :key="item.id"
                        @click.prevent="goToGoodsInfo(item.id)" style="display: flex;align-items: flex-start;justify-content: flex-start;margin: 10rpx 0;
                        box-sizing: border-box; ">
                        <view class="pic" style="position: relative;">
                            <image :src="item.thumbnail" mode="aspectFill"
                                style="height: 150rpx;width: 150rpx;border-radius: 24rpx;">
                            </image>
                            <text style="background-color: #f92e20;color: #fff;
                                font-weight: bold;border-radius: 12rpx;padding: 5rpx;
                                margin-right: 15rpx;position: absolute;top: 0;left: 0;" v-if="item.salesModel==='PRESALE'">预售</text>
                        </view>
                        <view class="goodsContent" style="display: flex;align-items: flex-start;justify-content: space-between;
                            margin-left: 10rpx;flex-direction: column;width: 100%;">
                            <view class="goodsName">
                                <text>{{item.goodsName}}</text>
                            </view>
                            <view
                                style="display: flex; justify-content: space-between;align-items:center; 100%;margin-top: 32rpx;width: 100%;">
                                <view class="goodsPrice">¥{{item.price}}</view>
                                <view class="addCard" style="display: flex; align-items: center;">
                                    <view style="padding: 20rpx 0 20rpx 20rpx;" v-show="item.cardNum && item.cardNum>0"
                                        @click.stop="miousCardNum($event,item.id)">
                                        <uni-icons type="minus" size="30" color="#96a6bc"></uni-icons>
                                    </view>
                                    <input v-show="item.cardNum&&item.cardNum>0" @click.stop="" :maxlength="2"
                                        type="number" confirm-type="numeric" style="width: 50rpx;text-align: center;"
                                        v-model="item.cardNum" :disabled="true" />
                                    <view style="padding: 20rpx 20rpx 20rpx 0;"
                                        @click.stop="addCardNum($event,item.id)">
                                        <uni-icons type="plus" size="30" color="#e06c75"></uni-icons>
                                        <!-- <text class="iconfont" style="size: 1.5em;">&#xe7b1;</text> -->
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
            <view @click="gotoCardList()" style="position: absolute;bottom: 120rpx; right: 32rpx;">
                <div class="settlement">去购物车结算</div>
            </view>
        </view>
    </view>
    </view>
</template>
<script>
    import TopBar from "@/components/TopBar.vue";
    import {
        getCategoryList,
        getGoodsList
    } from "@/api/goods.js";
    import {
        addCard,
        getCarts,
        deleteSkuItem
    } from '@/api/trade.js'
    import {
        getSTSToken
    } from '@/api/common.js'
    import {
        data
    } from "../../components/uview-components/uview-ui/libs/mixin/mixin";
    export default {
        components: {
            TopBar
        },
        data() {
            return {
                canGoToCarList: false,
                nums: 10,
                searchInfo: '',
                //商品列表
                goodsList: [],
                buttonHeight: 0,
                //记录两列高度
                //商品导航分类
                categoryList: [],
                //当前选中的分类
                currentCategort: '',
                //显示没有数据
                canLoadMore: false,
                //最大页数
                maxPages: 0,
                //刷新dom使用
                flushDom: '',
                //查询商品需要的参数
                getGoodsParam: {
                    keyword: '',
                    pageSize: 12,
                    pageNumber: 1,
                    categoryId: null,
                    canFilter: true,
                    needFilterPre: true
                },
            }
        },
        methods: {
            pageBack() {
                if (getCurrentPages().length == 1) {
                    uni.navigateTo({
                        url: '/pages/commodity-square/commoditySquare'
                    })
                } else {
                    uni.navigateBack();
                }
            },
            gotoCardList() {
                uni.navigateTo({
                    url: '/pages/cusbar/cart/cartList'
                })
            },
            addCardNum(e, id) {
                this.goodsList.forEach(item => {
                    if (item.id === id) {
                        if (item.cardNum) {
                            item.cardNum++;
                        } else {
                            item.cardNum = 1;
                        }
                        this.flushDom = new Date().getMilliseconds();
                        console.log("选中的商品为------------------->", JSON.stringify(item))
                        const data = {
                            skuId: item.id,
                            num: item.cardNum
                        }
                        addCard(data)
                        return;
                    }
                })
            },
            miousCardNum(e, id) {
                for (let i = 0; i < this.goodsList.length; i++) {
                    const item = this.goodsList[i];
                    if (item.id === id) {
                        if (item.cardNum && item.cardNum > 1) {
                            item.cardNum--;
                        } else {
                            deleteSkuItem([id]);
                            item.cardNum = 0;
                            this.flushDom = new Date().getMilliseconds();
                            break; // 退出整个循环
                        }
                        this.flushDom = new Date().getMilliseconds();
                        const data = {
                            skuId: item.id,
                            num: item.cardNum
                        };
                        addCard(data);
                        break; // 退出整个循环
                    }
                }
                // this.goodsList.forEach(item => {
                //     console.log('测试为什么不进入循环1',id,JSON.stringify(item.cardNum))
                //     if (item.id === id) {
                //         console.log('测试为什么不进入循环2',id,JSON.stringify(item.cardNum))
                //         if (item.cardNum && item.cardNum > 1) {
                //             console.log('测试为什么不进入循环3',id,JSON.stringify(item.cardNum))
                //             item.cardNum--;
                //         } else {
                //             console.log('测试为什么不进入循环4',id,JSON.stringify(item.cardNum))
                //             deleteSkuItem([id])
                //             item.cardNum = 0;
                //             this.flushDom = new Date().getMilliseconds();
                //             return;
                //         }
                //         this.flushDom = new Date().getMilliseconds();
                //         console.log("选中的商品为------------------->", JSON.stringify(item))
                //         console.log(item.cardNum, item.id)
                //         const data = {
                //             skuId: item.id,
                //             num: item.cardNum
                //         }
                //         addCard(data)
                //         return;
                //     }
                // })
            },
            topBarChange(titleObj) {
                if (titleObj.index === 'home') {
                    uni.switchTab({
                        url: titleObj.pagePath
                    });
                } else {
                    uni.redirectTo({
                        url: titleObj.pagePath
                    });
                }
            },
            async searchGoods(keyWard) {
                this.getGoodsParam.keyword = keyWard
                this.getGoodsParam.pageNumber = 1
                this.getGoodsParam.categoryId = ''
                this.goodsList = [];
                await this.getgoodsData();
            },
            confirm() {},
            // 打开窗口
            showDrawer(e) {
                this.$refs[e].open()
            },
            // 关闭窗口
            closeDrawer(e) {
                this.$refs[e].close()
            },
            // 抽屉状态发生变化触发
            change(e, type) {
                this[type] = e
            },
            getvideoInfo(e, arrName, index) {
                const wight = e.detail.width;
                const height = e.detail.height;
                this[arrName][index].width = 310 + 'rpx';
                //计算宽高比
                const videoHeight = Math.floor(310 / (wight / height))
                this[arrName][index].height = videoHeight + 'rpx';
                this[arrName][index].show = true;
                //计算集合高度
                if (arrName === 'goodsList2') {
                    if (videoHeight > 300) {
                        this.listHeight2 += videoHeight;
                    } else if (videoHeight < 300) {
                        this.listHeight2 -= videoHeight;
                    }
                }
                if (arrName === 'goodsList1') {
                    if (videoHeight > 300) {
                        this.listHeight1 += videoHeight;
                    } else if (videoHeight < 300) {
                        this.listHeight1 -= videoHeight;
                    }
                }
                console.log(this[arrName][index].width, this[arrName][index].height)
                this.flushDom = new Date();
            },
            goToGoodsInfo(id) {
                const item = this.goodsList.find(item => id === item.id);
                console.log(item)
                uni.navigateTo({
                    url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`
                });
            },
            //触底获取数据
            async loadMoreData() {
                console.log("触底加载------------》", this.maxPages)
                if (this.getGoodsParam.pageNumber < this.maxPages) {
                    this.getGoodsParam.pageNumber++;
                    await this.getgoodsData()
                } else {
                    this.canLoadMore = true;
                }
            },
            //获取分类导航栏
            async loadCategoryList() {
                let list = await getCategoryList(0);
                list.data.result.unshift({
                    id: 'ALL',
                    name: '全部'
                })
                this.categoryList = list.data.result
            },
            async getgoodsData() {
                const cardInfos = await getCarts();
                // 处理购物车信息
                let cardMap = new Map();
                this.canGoToCarList = cardInfos.data.result.cartList.length > 0
                cardInfos.data.result.cartList.forEach(item => {
                    item.skuList.forEach(sku => {
                        cardMap.set(sku.goodsSku.id, {
                            skuId: sku.goodsSku.id,
                            num: sku.num
                        })
                    })
                })
                //回显购物车数据
                const goodsList = await getGoodsList(this.getGoodsParam);
                goodsList.data.result.records.forEach(item => {
                    const cardItem = cardMap.get(item.id);
                    if (cardItem) {
                        item.cardNum = cardItem.num;
                    }
                })
                this.goodsList = [...this.goodsList, ...goodsList.data.result.records];
                this.maxPages = goodsList.data.result.pages
                console.log('this.goodsList----------------------->', JSON.stringify(goodsList.data.result))
            },
            async chooseCategory(id) {
                this.searchInfo = '';
                this.canLoadMore = false;
                this.currentCategort = id
                this.getGoodsParam.categoryId = id
                this.getGoodsParam.keyword = ''
                this.getGoodsParam.pageNumber = 1
                this.goodsList = []
                if (id === 'ALL') {
                    this.getGoodsParam.categoryId = '';
                } else {
                    this.getGoodsParam.categoryId = id
                }
                await this.getgoodsData();
                console.log(this.maxPages)
            }
        },
        async onLoad(option) {
            console.log('---------------------->获取优惠卷信息', option)
            this.getGoodsParam.promotionType = option.promotionType
            this.getGoodsParam.promotionsId = option.promotionsId
            // 获取状态栏高度
            const systemInfo = uni.getSystemInfoSync();
            this.buttonHeight = systemInfo.statusBarHeight;
            console.log('-------------------------------->', JSON.stringify(systemInfo))
            await this.loadCategoryList();
            this.getGoodsParam.pageNumber = 1
            this.getGoodsParam.categoryId = ""
            this.getGoodsParam.keyword = ""
            await this.getgoodsData()
        }
    }
</script>
<style lang="scss" scoped>
    .container {
        width: 750rpx;
        padding-bottom: 64rpx;
        height: 100vh;
        overflow: hidden;
    }
    .settlement {
        width: 180rpx;
        height: 70rpx;
        line-height: 70rpx;
        background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
        border-radius: 900rpx;
        text-align: center;
        color: #fff;
        margin-right: 10rpx;
    }
    .navigatorMenue {
        margin-left: -32rpx;
        background-color: #f4f4f4;
        height: 100%;
        width: 200rpx;
        border-radius: 0 24rpx 24rpx 0;
    }
    .goodsInfos {
        width: 500rpx;
        margin-left: 10rpx;
    }
    .topBar {
        position: fixed;
        top: 20rpx;
        left: 20rpx;
        z-index: 1000;
        background-color: #ffffff;
    }
    .typeNavigation {
        box-sizing: border-box;
        padding: 10rpx;
        height: 100%;
    }
    .typeNavigationItem {
        padding: 24rpx;
        font-size: 28rpx;
        color: black;
        margin-top: 10rpx;
    }
    .typeNavigationItemCheck {
        color: #ef321e;
        font-size: 32rpx;
        font-weight: bold;
        border: 0;
    }
    .goodsName {
        padding: 10rpx;
        box-sizing: border-box;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        height: 52rpx;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: start;
        vertical-align: middle;
    }
    .goodsPrice {
        color: red;
        font-weight: bold;
    }
</style>
pages/product/goods.vue
@@ -648,7 +648,7 @@
      this.goodsSpec = response.data.result.specs;
      this.PromotionList = response.data.result.promotionMap;
      this.goodsParams = response.data.result.goodsParamsDTOList || [];
    console.log('优惠卷活动--------------------》',response.data.result.promotionMap)
      // 判断是否拼团活动或者积分商品 如果有则显示拼团活动信息
      this.PromotionList &&
        Object.keys(this.PromotionList).forEach((item) => {