|
|
@@ -0,0 +1,394 @@
|
|
|
+<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>
|
hejie