Client-Teapay/src/pages/product/productToDay.vue

<template>
    <view class="container">
        <!-- 商品列表 -->
        <view class="goods_con flex_r flex_ac flex_wrap">
            <view class="goods" v-for="(item,index) in goods" :key="index" @tap="NavToGoodsDetail(item.id)">
                <image class="goods_img" :src="item.original_img" mode=""></image>
                <view class="goods_info">
                    <view class="info_title">{{item.goods_name}}</view>
                    <!-- <view class="info_msg ellipsis">{{item.goodsMsg}}</view> -->
                    <view class="info_option flex_r flex_ac flex_jb">
                        <view class="info_price"><text>￥</text>{{item.price}}</view>
                        <!-- <image class="info_cart" src="/static/cart.png" mode="" @tap.stop="OpenShopping(index)"></image> -->
                    </view>
                    <view class="info_hint">赠送{{item.give_integral ? item.give_integral + '批发积分' : item.give_cha_bao + '茶宝'}}</view>
                </view>
            </view>
        </view>
        <!-- 商品列表-end -->
        <!-- 购买或加入购物车弹窗 -->
        <uni-popup ref="shopping" type="bottom">
            <view class="shopping">
                <view class="close_con flex_r flex_je">
                    <image class="close_img" src="/static/close.png" @tap="closeBtn" mode=""></image>
                </view>
                <view class="goods_infos flex_r">
                    <image class="goods_imgs" :src="goodsIndex.goodsThumbnailUrl" mode=""></image>
                    <view class="goods_cons flex_c flex_jb">
                        <view class="shop_names">{{goodsIndex.goodsName}}</view>
                        <view class="goods_msg">{{'￥' + goodsIndex.price}}</view>
                        <view class="num_con flex_r flex_je">
                            <uni-number-box :min="1" @change="bindChange" :value="buyNum"></uni-number-box>
                        </view>
                    </view>
                </view>
                <checkbox-group class="flex_r flex_ac flex_jc" @change="checkboxChange">
                    <label class="option_box">
                        <checkbox value="1" :checked="checked" color="#2DB389" style="transform:scale(0.7)" /> 我已阅读同意<text @tap.stop="getProPage">《购买协议》</text>
                    </label>
                </checkbox-group>
                <view class="confim flex_r flex_ac flex_jc" @tap="ToPayPage">确定</view>
            </view>
        </uni-popup>
        <!-- 购买或加入购物车弹窗-end -->
    </view>
</template>
<script>
let page = 1;
let app = getApp();
var appEv = app.$vm.$options;
// let reqApi = new ReqApi();
// import { ReqApi } from "@/utils/reqTools.js";
import { get, post, u_post } from "@/request/api.js";
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
    components: { uniPopup },
    data() {
        return {
            goods: [], // 商品列表
            goodsIndex: '', // 选中猜你喜欢的下标
            buyNum: 1, // 购买数量
            checked: false, // 是否同意协议
            type: '',
        };
    },
    onLoad(e) {
        this.type = e.type
    },
    onShow() {
        page = 1;
        this.goods = [];
        this.loadData()
    },
    methods: {
        loadData() {
            let that = this;
            let data = {
                page: page,
                type: this.type
            }
            post("goods/goodsList", data).then(res => {
                if (res.code === 0) {
                    let obj = res.data.data
                    if(page == 1) that.goods = []
                    if (obj.length > 0) {
                        obj.forEach(e => {
                            that.goods.push(e)
                        });
                    } else {
                        page = -1;
                        appEv.errTips('暂无更多')
                    }
                } else {
                    page = -1;
                    appEv.errTips('暂无更多')
                }

            })
        },
        // 跳转到商品详情页
        NavToGoodsDetail(id, type) {
            uni.navigateTo({
                url: '/pages/product/p_details?id=' + id + '&type=' + this.type
            })
        },
        // 打开加入购物车窗口
        OpenShopping(index) {
            this.checked = false
            this.goodsIndex = this.goods[index]
            this.$refs.shopping.open()
        },
        // 购买数量更改
        bindChange: function(e) {
            this.buyNum = e;
        },
        // 点击关闭弹窗
        closeBtn: function() {
            this.$refs.shopping.close()
        },
        // 点击同意协议
        checkboxChange: function(e) {
            let index = e.detail.value.indexOf('1');
            if (index != -1) {
                this.checked = true
            } else {
                this.checked = false
            }
        },
        // 点击添加购物车
        ToPayPage: function() {
            if (!this.checked) {
                appEv.errTips('请勾选同意购买协议')
                return false
            }
            let that = this;
            let data = {
                goodsId: this.goodsIndex.goodsId,
                buyCount: this.buyNum,
                specialArea: 1
            }
            const info = reqApi.conShoppingCart(data)
            if (info) {
                info.then(res => {
                    if (res.data.status == 200) {
                        appEv.errTips('添加成功')
                        that.checked = false
                        that.buyNum = 1
                        that.$refs.shopping.close()
                    } else {
                        appEv.errTips(res.data.msg)
                    }
                })
            }
        },
        getProPage: function() {
            uni.navigateTo({
                url: '/pages/protocol/index?type=' + 1
            })
        }
    },
    onShareAppMessage: function() {
        let userinfo = uni.getStorageSync('userinfo');
        var path = '/pages/product/productRetail?agentId=1';
        if (userinfo.user_id) {
            path = '/pages/product/productRetail?agentId=' + userinfo.user_id;
        }
        var title = `让数字经济赋能美好生活！`;
        return {
            title: title,
            path: path
        }
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {
        if (page != -1) {
            var that = this;
            setTimeout(function() {
                ++page;
                that.loadData();
            }, 800);
        }
    }
}
</script>
<style lang="scss">
// 页面配置
page {
    background: #F4F4F4;
}

.container {
    padding: 22rpx 30rpx;
    box-sizing: border-box;
}

// 页面配置-end

// 商品列表
.goods:nth-child(2n) {
    margin-right: 0;
}

.info_cart {
    width: 46rpx;
    height: 45rpx;
}

.goods_con {
    width: 100%;
    overflow: hidden;
}

.info_hint {
    font-size: 22rpx;
    color: #787878;
}

.info_option {
    width: 100%;
    overflow: hidden;
}

.goods_img {
    width: 100%;
    height: 232rpx;
    display: block;
}

.info_msg {
    font-size: 24rpx;
    color: #787878;
    margin-top: 8rpx;
}

.goods_info {
    padding: 20rpx 16rpx;
    width: 100%;
    box-sizing: border-box;
}

.info_price {
    font-size: 32rpx;
    color: #18BB87;
    font-family: "SourceHanSansCN-Bold";
}

.info_title {
    font-size: 28rpx;
    color: #1B1A1A;
    font-family: "SourceHanSansCN-Bold";
    font-weight: bold;
}

.info_price text {
    font-size: 22rpx;
    color: #18BB87;
    font-family: "SourceHanSansCN-Bold";
    font-weight: bold;
}

.goods {
    width: calc((100% - 22rpx) / 2);
    overflow: hidden;
    margin-right: 22rpx;
    margin-bottom: 22rpx;
    background: #fff;
    border-radius: 12rpx;
}

// 商品列表-end

// 购买或加入购物车弹窗
.option_box text {
    color: #2DB389;
}

.goods_raido {
    margin-right: 180rpx;
}

.close_img {
    width: 36rpx;
    height: 36rpx;
}

.option_box {
    font-size: 26rpx;
    margin-top: 80rpx;
}

.goods_raido:nth-last-child(1) {
    margin-right: 0;
}

.num_con {
    width: 100%;
    overflow: hidden;
    padding-bottom: 3rpx;
}

.goods_option {
    width: 100%;
    overflow: hidden;
    padding-top: 50rpx;
}

.close_con {
    width: 100%;
    overflow: hidden;
    margin-bottom: 35rpx;
}

.raido_text {
    font-size: 26rpx;
    color: #545454;
    margin-left: 30rpx;
}

.goods_cons {
    width: calc(100% - 202rpx - 30rpx);
    overflow: hidden;
}

.goods_imgs {
    width: 202rpx;
    height: 183rpx;
    margin-right: 30rpx;
    border-radius: 12rpx;
}

.confim {
    width: 100%;
    height: 60rpx;
    border-radius: 30rpx;
    background: #2DB389;
    color: #fff;
    font-size: 26rpx;
    margin-top: 44rpx;
}

.shopping {
    width: 100%;
    overflow: hidden;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 30rpx 30rpx 0 0;
    background: #fff;
}

.goods_infos {
    width: 100%;
    overflow: hidden;
    align-items: inherit;
    padding-bottom: 48rpx;
    border-bottom: 3rpx solid rgba(0, 0, 0, .12);
}

.shop_names {
    width: 100%;
    overflow: hidden;
    font-family: "SourceHanSansCN-Bold";
    font-weight: bold;
    color: #1B1B1B;
    font-size: 32rpx;
}

.goods_msg {
    width: 100%;
    overflow: hidden;
    font-size: 28rpx;
    color: #18BB88;
    font-family: "SourceHanSansCN-Medium";
    font-weight: 500;
}

.raido_img {
    width: 39rpx;
    height: 35rpx;
    background: url(~@/static/img/weixuanzhong.png);
    background-repeat: no-repeat;
    background-size: 35rpx 35rpx;
    background-position: center center;
}

.raido_box {
    background: url(~@/static/img/consent.png);
    background-repeat: no-repeat;
    background-size: 39rpx 35rpx;
    background-position: center center;
}

// 购买或加入购物车弹窗-end
</style>