Merge branch 'main' of https://gitlab.com/tea28/client

src/components/goodsList.vue

@@ -1,119 +1,113 @@
 <template>
-  <view class="product-list">
-    <view class="product" v-for="(product, index) in productList" :key="index">
-      <view class="image-view">
-        <image class="product-image" :src="product.goodsThumbnailUrl"></image>
-      </view>
-      <view :class="['product-title','ellipsis' + long]">{{ product.goodsName }}</view>
-      <view class="product-price">
-        <text class="product-price-original"
-          ><text class="product-unit">￥</text>{{ product.price }}</text
-        >
-        <!-- <text class="product-price-favour">￥{{product.originalPrice}}</text> -->
-        <!-- <text class="product-tip">{{product.tip}}</text> -->
-      </view>
-      <view class="product-txt">{{ product.fanIntegral }}</view>
+    <view class="product-list">
+        <view class="product" v-for="(product, index) in productList" :key="index">
+            <view class="image-view">
+                <image class="product-image" :src="product.goodsThumbnailUrl"></image>
+            </view>
+            <view :class="['product-title', 'ellipsis' + long]">{{ product.goodsName }}</view>
+            <view class="product-price">
+                <text class="product-price-original"><text class="product-unit">￥</text>{{ product.price }}</text>
+                <!-- <text class="product-price-favour">￥{{product.originalPrice}}</text> -->
+                <!-- <text class="product-tip">{{product.tip}}</text> -->
+            </view>
+            <view class="product-txt">{{ product.fanIntegral }}</view>
+        </view>
     </view>
-  </view>
 </template>
-
 <script>
-import { get, post } from "@/request/api.js";
+import { get, post, u_post } from "@/request/api.js";
 export default {
-  name: "goodslist",
-  props: {
-    long: {
-      type: Number,
-      default: 2
+    name: "goodslist",
+    components: {},
+    props: {
+        long: {
+            type: Number,
+            default: 2,
+        },
+        url: {
+            type: String,
+            default: "",
+        },
+    },
+    data() {
+        return {
+            productList: [], //商品数据
+        };
     },
-    url:{
-      type: String,
-      default:""
-    }
-  },
-  data() {
-    return {
-      productList: [],
-    };
-  },
-  created() {
-    this.loadData();
-  },
-  methods: {
-    loadData(action = "add") {
-      post(this.url).then((res) => {
-        if (res.status == 200) {
-          this.productList = res.goods;
-        }
-      });
-      if (action === "refresh") {
-        this.productList = [];
-      }
+    created() {
+        this.loadData();
+    },
+    methods: {
+        loadData() {
+            post(this.url).then((res) => {
+                if (res.status == 200) {
+                    this.productList = res.goods;
+                }
+            });
+        },
     },
-  },
 };
 </script>
-
 <style lang="scss" scoped>
 .product-list {
-  padding: 0 20rpx;
-  display: flex;
-  width: 100%;
-  flex-wrap: wrap;
-  flex-direction: row;
+    padding: 0 20rpx;
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    flex-direction: row;
 }
 
 .product {
-  width: 50%;
-  padding: 20rpx 10rpx;
-  display: flex;
-  flex-direction: column;
+    width: 50%;
+    padding: 20rpx 10rpx;
+    display: flex;
+    flex-direction: column;
 }
 
 .product-image {
-  border-radius: 10rpx 10rpx 0 0;
-  width: 100%;
-  height: 260rpx;
-  object-fit: cover;
+    border-radius: 10rpx 10rpx 0 0;
+    width: 100%;
+    height: 260rpx;
+    object-fit: cover;
 }
 
 .product-title {
-  width: 100%;
-  overflow: hidden;
-  line-height: 1.5;
+    width: 100%;
+    overflow: hidden;
+    line-height: 1.5;
 }
 
 .product-price {
-  color: #121212;
-  font-size: 28rpx;
-  position: relative;
+    color: #121212;
+    font-size: 28rpx;
+    position: relative;
 }
 
 .product-price-original {
-  color: #18bb88;
+    color: #18bb88;
 }
 
 .product-price-favour {
-  color: #888888;
-  text-decoration: line-through;
-  margin-left: 10upx;
+    color: #888888;
+    text-decoration: line-through;
+    margin-left: 10upx;
 }
 
 .product-tip {
-  position: absolute;
-  right: 10upx;
-  background-color: #ff3333;
-  color: #ffffff;
-  padding: 0 10upx;
-  border-radius: 5upx;
+    position: absolute;
+    right: 10upx;
+    background-color: #ff3333;
+    color: #ffffff;
+    padding: 0 10upx;
+    border-radius: 5upx;
 }
 
 .product-unit {
-  font-size: 24rpx;
+    font-size: 24rpx;
 }
 
 .product-txt {
-  font-size: 22rpx;
-  color: #787878;
+    font-size: 22rpx;
+    color: #787878;
 }
-</style>
+</style>

src/components/scroll-list/scroll-list.vue

@@ -0,0 +1,667 @@
+<template>
+    <view class="scroll-list-wrap" :style="[scrollListWrapStyle]">
+        <scroll-view
+            class="scroll-view"
+            :class="[elClass]"
+            :style="[listWrapStyle]"
+            scroll-y
+            scroll-anchoring
+            enable-back-to-top
+            :scroll-top="scrollTop"
+            :lower-threshold="defaultOption.lowerThreshold"
+            @scroll="handleScroll"
+            @touchend="handleTouchEnd"
+            @touchmove.prevent.stop="handleTouchMove"
+            @touchstart="handleTouchStart"
+            @scrolltolower="handleScrolltolower"
+        >
+            <view class="scroll-content" :style="[scrollContentStyle]">
+                <view class="pull-down-wrap">
+                    <slot name="pulldown" v-if="$slots.pulldown"></slot>
+                    <view class="refresh-view" :style="[refreshViewStyle]" v-else>
+                        <view class="pull-down-animation" :class="{ refreshing: refreshing }" :style="[pullDownAnimationStyle]"></view>
+                        <text class="pull-down-text" :style="[pullDownTextStyle]">{{ refreshStateText }}</text>
+                    </view>
+                </view>
+                <view class="empty-wrap" v-if="showEmpty">
+                    <slot name="empty" v-if="$slots.empty"></slot>
+                    <view class="empty-view" v-else>
+                        <image class="empty-image" :src="defaultOption.emptyImage || images.empty" mode="aspectFit"></image>
+                        <text class="empty-text" :style="[emptyTextStyle]">{{ emptyText }}</text>
+                    </view>
+                </view>
+                <view class="list-content"><slot></slot></view>
+                <view class="pull-up-wrap" v-if="showPullUp">
+                    <slot name="pullup" v-if="$slots.pullup"></slot>
+                    <view class="load-view" v-else>
+                        <view class="pull-up-animation" v-if="loading" :style="[pullUpAnimationStyle]"></view>
+                        <text class="pull-up-text" :style="[pullUpTextStyle]">{{ loadStateText }}</text>
+                    </view>
+                </view>
+            </view>
+        </scroll-view>
+    </view>
+</template>
+
+<script>
+import images from './images.js';
+export default {
+    name: 'scroll-list',
+    props: {
+        // 配置信息
+        option: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    data() {
+        return {
+            defaultOption: {
+                page: 1, // 分页
+                size: 15, // 分页大小
+                auto: true, // 自动加载
+                height: null, // 组件高度
+                disabled: false, // 禁用
+                background: '', // 背景颜色属性
+                emptyImage: '', // 空数据提示图片
+                offsetBottom: 0, // 底部高度补偿
+                pullDownSpeed: 0.5, // 下拉速率
+                lowerThreshold: 40, // 距离底部上拉加载距离
+                refresherThreshold: 80, // 距离顶部下拉刷新距离
+                refreshDelayed: 800, // 刷新延迟
+                refreshFinishDelayed: 800, // 刷新完成后的延迟
+                safeArea: false, // 是否开启安全区域适配
+                emptyTextColor: '#82848a', // 空提示文字颜色
+                loadTextColor: '#82848a', // 上拉加载文字颜色
+                loadIconColor: '#82848a', // 上拉加载图标颜色
+                refresherTextColor: '#82848a', // 下拉刷新文字颜色
+                refresherIconColor: '#82848a', // 下拉刷新图标颜色
+                emptyText: '暂无列表~', // 空数据提示文字
+                loadingText: '正在加载中~', // 加载中文字
+                loadFailText: '加载失败啦~', // 加载失败文字
+                noMoreText: '没有更多啦~', // 没有更多文字
+                refreshingText: '正在刷新~', // 正在刷新文字
+                refreshFailText: '刷新失败~', // 刷新失败文字
+                refreshSuccessText: '刷新成功~', // 刷新成功文字
+                pulldownText: '下拉刷新~', // 下拉中的文字
+                pulldownFinishText: '松开刷新~' // 下拉完成的文字
+            },
+            images, // 内置图片
+            elClass: '', // 组件动态class
+            windowInfo: {}, // 窗口信息
+            scrollTop: 0, // 距离顶部滚动高度
+            scrollViewTop: -1, // 滚动视图顶部位置
+            scrollViewHeight: 0, // 滚动视图高度
+            currentPage: 1, // 当前分页页码
+            currentSize: 15, // 当前分页大小
+            currentScrollTop: 0, // 当前滚动高度
+            emptyText: '暂无列表~',
+            loadStateText: '正在加载中~', // 加载状态文字
+            refreshStateText: '下拉刷新~', // 刷新状态文字
+            loadDisabled: false, // 是否禁用上拉加载
+            loading: false, // 是否加载中
+            refreshing: false, // 是否刷新中
+            refreshFinish: false, // 是否刷新完成
+            pulldowning: false, // 是否正在下拉
+            pullDownHeight: 0, // 下拉高度
+            showEmpty: false, // 是否显示空数据提示
+            showPullUp: false, // 是否显示上拉加载
+            showPullDown: false // 是否显示下拉刷新
+        };
+    },
+    methods: {
+        // 组件初始化
+        handleInit() {
+            // 合并配置
+            this.defaultOption = Object.assign(this.defaultOption, this.option);
+            this.showEmpty = !this.defaultOption.auto;
+            this.currentPage = this.defaultOption.page;
+            this.currentSize = this.defaultOption.size;
+            this.emptyText = this.defaultOption.emptyText;
+            this.loadStateText = this.defaultOption.loadingText;
+            this.refreshStateText = this.defaultOption.pulldownText;
+            // 计算高度
+            this.queryRect('.' + this.elClass).then(rect => {
+                // 设置组件顶部位置
+                this.scrollViewTop = rect.top;
+                // 判断是否自动加载
+                if (this.defaultOption.auto) this.load();
+            });
+        },
+        // 加载数据
+        load() {
+            if (this.defaultOption.disabled || this.loading || this.loadDisabled) return;
+            // 开启正在加载
+            this.loading = true;
+            // 设置正在加载状态文字
+            this.loadStateText = this.defaultOption.loadingText;
+            // 显示上拉加载
+            this.showPullUp = true;
+            // 分页参数
+            let paging = { page: this.currentPage, size: this.currentSize };
+            // 触发load事件
+            this.$emit('load', paging);
+        },
+        // 加载成功
+        loadSuccess(data = {}) {
+            // 解构数据
+            const { list, total } = data;
+            // 判断列表是否是数组
+            if (Array.isArray(list)) {
+                // 判断列表长度
+                if (list.length) {
+                    // 判断列表长度和列表总数是否相同
+                    if (list.length >= total) {
+                        // 设置禁用上拉加载
+                        this.loadDisabled = true;
+                        // 加载状态文字
+                        this.loadStateText = this.defaultOption.noMoreText;
+                    } else {
+                        // 关闭禁用上拉加载
+                        this.loadDisabled = false;
+                        // 设置分页参数
+                        this.currentPage++;
+                        // 加载状态为加载中
+                        this.loadStateText = this.defaultOption.loadingText;
+                        // 加载计算
+                        this.loadCompute();
+                    }
+                    // 显示上拉加载
+                    this.showPullUp = true;
+                    // 隐藏空数据提示
+                    this.showEmpty = false;
+                } else {
+                    // 设置禁用上拉加载
+                    this.loadDisabled = true;
+                    // 隐藏上拉加载
+                    this.showPullUp = false;
+                    // 隐藏上拉加载
+                    this.showPullUp = false;
+                    // 显示空数据提示
+                    this.showEmpty = true;
+                }
+                // 关闭正在加载
+                this.loading = false;
+                // 触发加载成功事件
+                this.$emit('loadSuccess', list);
+            } else {
+                // 不是数组类型当作加载失败处理
+                this.loadFail();
+                console.error('the list must be a array');
+            }
+        },
+        // 加载失败
+        loadFail() {
+            // 关闭正在加载
+            this.loading = false;
+            // 关闭空数据提示
+            this.showEmpty = false;
+            // 显示上拉加载
+            this.showPullUp = true;
+            // 加载状态为加载失败
+            this.loadStateText = this.defaultOption.loadFailText;
+            // 触发加载失败事件
+            this.$emit('loadFail');
+        },
+        // 刷新数据
+        refresh() {
+            // 如果是下拉刷新
+            if (this.pullDownHeight == this.defaultOption.refresherThreshold) {
+                // 关闭正在加载
+                this.loading = false;
+                // 隐藏上拉加载
+                this.showPullUp = false;
+            } else {
+                // 开启正在加载
+                this.loading = true;
+                // 隐藏空数据提示
+                this.showEmpty = false;
+                // 显示上拉加载
+                this.showPullUp = true;
+                // 设置正在刷新状态文字
+                this.loadStateText = this.defaultOption.refreshingText;
+            }
+            // 设置刷新未完成
+            this.refreshFinish = false;
+            // 开启正在刷新
+            this.refreshing = true;
+            // 设置正在刷新状态文字
+            this.refreshStateText = this.defaultOption.refreshingText;
+            // 设置分页参数
+            this.currentPage = 1;
+            this.currentSize = this.defaultOption.size;
+            let paging = { page: this.currentPage, size: this.currentSize };
+            // 触发refresh事件
+            setTimeout(() => {
+                this.$emit('refresh', paging);
+            }, this.defaultOption.refreshDelayed);
+        },
+        // 刷新成功
+        refreshSuccess(data) {
+            // 解构数据
+            const { list, total } = data;
+            // 判断列表是否是数组
+            if (Array.isArray(list)) {
+                // 判断列表长度
+                if (list.length) {
+                    // 判断列表长度和列表总数是否相同
+                    if (list.length >= total) {
+                        // 设置禁用上拉加载
+                        this.loadDisabled = true;
+                        // 设置没有更多状态文字
+                        this.loadStateText = this.defaultOption.noMoreText;
+                    } else {
+                        // 设置分页参数
+                        this.currentPage++;
+                        // 关闭禁用上拉加载
+                        this.loadDisabled = false;
+                        // 设置加载中状态文字
+                        this.loadStateText = this.defaultOption.loadingText;
+                        // 开启自动加载
+                        this.defaultOption.auto = true;
+                        // 加载计算
+                        this.loadCompute();
+                    }
+                    // 关闭空数据提示
+                    this.showEmpty = false;
+                    // 显示上拉加载
+                    this.showPullUp = true;
+                } else {
+                    // 设置禁用上拉加载
+                    this.loadDisabled = true;
+                    // 隐藏上拉加载
+                    this.showPullUp = false;
+                    // 显示空数据提示
+                    this.showEmpty = true;
+                    // 设置没有更多状态文字
+                    this.loadStateText = this.defaultOption.noMoreText;
+                }
+                // 关闭正在加载
+                this.loading = false;
+                // 设置刷新成功状态文字
+                this.refreshStateText = this.defaultOption.refreshSuccessText;
+                // 关闭正在刷新
+                this.refreshing = false;
+                // 关闭正在下拉
+                this.pulldowning = false;
+                // 触发刷新成功事件
+                this.$emit('refreshSuccess', list);
+                setTimeout(() => {
+                    // 设置刷新完成
+                    this.refreshFinish = true;
+                    // 重置下拉高度
+                    this.pullDownHeight = 0;
+                    // 隐藏下拉刷新
+                    this.showPullDown = false;
+                    this.$emit('refreshSuccess');
+                }, this.defaultOption.refreshFinishDelayed);
+            } else {
+                // 不是数组类型当作刷新失败处理
+                this.refreshFail();
+                console.error('the list must be a array');
+            }
+        },
+        // 刷新失败
+        refreshFail() {
+            // 设置加载失败状态文字
+            this.loadStateText = this.defaultOption.refreshFailText;
+            // 设置刷新失败状态文字
+            this.refreshStateText = this.defaultOption.refreshFailText;
+            // 关闭正在加载
+            this.loading = false;
+            // 显示下拉加载
+            this.showPullUp = true;
+            // 关闭正在刷新
+            this.refreshing = false;
+            // 关闭正在下拉
+            this.pulldowning = false;
+            // 延迟执行刷新完成后状态
+            setTimeout(() => {
+                // 设置刷新完成
+                this.refreshFinish = true;
+                // 重置下拉高度
+                this.pullDownHeight = 0;
+                // 隐藏下拉刷新
+                this.showPullDown = false;
+                // 触发刷新失败事件
+                this.$emit('refreshError');
+            }, this.defaultOption.refreshFinishDelayed);
+        },
+        // 加载计算
+        loadCompute() {
+            // 判断是否自动加载
+            if (this.defaultOption.auto) {
+                // 延迟执行下否者可能会高度计算错误
+                setTimeout(() => {
+                    this.$nextTick(() => {
+                        this.queryRect('.list-content').then(rect => {
+                            if (rect.height <= this.scrollViewHeight) {
+                                this.load();
+                            }
+                        });
+                    });
+                }, 100);
+            }
+        },
+        // 上拉触底事件
+        handleScrolltolower(e) {
+            if (this.loadDisabled) return;
+            this.$emit('scrolltolower', e);
+            this.load();
+        },
+        // 滚动事件
+        handleScroll(event) {
+            this.currentScrollTop = event.detail.scrollTop;
+            this.$emit('scroll', event.detail);
+        },
+        // 触摸按下处理
+        handleTouchStart(event) {
+            if (this.defaultOption.disabled) return;
+            this.currentTouchStartY = event.touches[0].clientY;
+            this.$emit('touchStart', event);
+        },
+        // 触摸按下滑动处理
+        handleTouchMove(event) {
+            if (this.defaultOption.disabled || this.currentScrollTop) return;
+            if (event.touches[0].clientY >= this.currentTouchStartY) {
+                this.pulldowning = true;
+                this.showPullDown = true;
+                let pullDownDistance = (event.touches[0].clientY - this.currentTouchStartY) * this.defaultOption.pullDownSpeed;
+                this.pullDownHeight = pullDownDistance > this.defaultOption.refresherThreshold ? this.defaultOption.refresherThreshold : pullDownDistance;
+                this.refreshStateText =
+                    this.pullDownHeight >= this.defaultOption.refresherThreshold ? this.defaultOption.pulldownFinishText : this.defaultOption.pulldownText;
+                this.$emit('touchMove', event);
+            }
+        },
+        // 触摸松开处理
+        handleTouchEnd(event) {
+            if (this.defaultOption.disabled) return;
+            // 当下拉高度小于下拉阈值
+            if (this.pullDownHeight < this.defaultOption.refresherThreshold) {
+                // 关闭正在下拉
+                this.pulldowning = false;
+                // 重置下拉高度
+                this.pullDownHeight = 0;
+                // 隐藏下拉刷新
+                this.showPullDown = false;
+                // 触发下拉中断事件
+                this.$emit('refreshStop');
+            } else {
+                this.refresh();
+            }
+            // 触发下拉触摸松开事件
+            this.$emit('touchEnd', event);
+        },
+        // 更新组件
+        updateScrollView() {
+            if (this.defaultOption.height) {
+                this.scrollViewHeight = uni.upx2px(this.defaultOption.height);
+            } else {
+                this.scrollViewHeight = this.windowInfo.windowHeight - this.scrollViewTop;
+            }
+            this.scrollViewObserve();
+        },
+        // 监听列表高度变化
+        listContentObserve() {
+            this.disconnectObserve('_listContentObserve');
+            const listContentObserve = this.createIntersectionObserver({
+                thresholds: [0, 0.5, 1]
+            });
+            listContentObserve.relativeToViewport({
+                // #ifdef H5
+                top: -(this.windowInfo.windowTop + rect.top),
+                // #endif
+                // #ifndef H5
+                top: -rect.top
+                // #endif
+            });
+        },
+        // 监听组件位置变化
+        scrollViewObserve() {
+            this.disconnectObserve('_scrollViewObserve');
+            this.$nextTick(() => {
+                this.queryRect('.' + this.elClass).then(rect => {
+                    const scrollViewObserve = this.createIntersectionObserver({
+                        thresholds: [0, 0.5, 1]
+                    });
+                    scrollViewObserve.relativeToViewport({
+                        // #ifdef H5
+                        top: -(this.windowInfo.windowTop + rect.top),
+                        // #endif
+                        // #ifndef H5
+                        top: -rect.top
+                        // #endif
+                    });
+                    scrollViewObserve.observe('.' + this.elClass, position => {
+                        // #ifdef H5
+                        this.scrollViewTop = position.boundingClientRect.top - this.windowInfo.windowTop;
+                        // #endif
+                        // #ifndef H5
+                        this.scrollViewTop = position.boundingClientRect.top;
+                        // #endif
+                    });
+                    this._scrollViewObserve = scrollViewObserve;
+                });
+            });
+        },
+        // 断开监听组件
+        disconnectObserve(observerName) {
+            const observer = this[observerName];
+            observer && observer.disconnect();
+        },
+        // 查询dom节点信息
+        queryRect(selector, all) {
+            return new Promise(resolve => {
+                uni.createSelectorQuery()
+                    .in(this)
+                    [all ? 'selectAll' : 'select'](selector)
+                    .boundingClientRect(rect => {
+                        if (all && Array.isArray(rect) && rect.length) {
+                            resolve(rect);
+                        }
+                        if (!all && rect) {
+                            resolve(rect);
+                        }
+                    })
+                    .exec();
+            });
+        },
+        // 16进制转RGB
+        hexToRgb(hex) {
+            const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+            hex = hex.replace(shorthandRegex, (m, r, g, b) => {
+                return r + r + g + g + b + b;
+            });
+            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+            return result
+                ? {
+                      r: parseInt(result[1], 16),
+                      g: parseInt(result[2], 16),
+                      b: parseInt(result[3], 16)
+                  }
+                : null;
+        }
+    },
+    computed: {
+        scrollListWrapStyle(){
+            let style = {};
+            style.background = this.defaultOption.background;
+            return style;
+        },
+        // 组件容器样式
+        listWrapStyle() {
+            let style = {};
+            const { offsetBottom } = this.defaultOption;
+            style.height = this.scrollViewHeight - uni.upx2px(offsetBottom) + 'px';
+            if (this.defaultOption.safeArea) style.paddingBottom = 'env(safe-area-inset-bottom) !important';
+            return style;
+        },
+        // 滚动内容样式
+        scrollContentStyle() {
+            const style = {};
+            const { pullDownHeight, pulldowning, showPullDown } = this;
+            style.transform = showPullDown ? `translateY(${pullDownHeight}px)` : `translateY(0px)`;
+            style.transition = pulldowning ? `transform 100ms ease-out` : `transform 200ms cubic-bezier(0.19,1.64,0.42,0.72)`;
+            return style;
+        },
+        // 下拉刷新样式
+        refreshViewStyle() {
+            const style = {};
+            const { showPullDown } = this;
+            style.opacity = showPullDown ? 1 : 0;
+            return style;
+        },
+        // 下拉中动画样式
+        pullDownAnimationStyle() {
+            const style = {};
+            const { refresherIconColor, refresherThreshold } = this.defaultOption;
+            const { refreshing, pullDownHeight } = this;
+            const { r, g, b } = this.hexToRgb(refresherIconColor);
+            const rate = pullDownHeight / refresherThreshold;
+            style.borderColor = `rgba(${r},${g},${b},0.2)`;
+            style.borderTopColor = refresherIconColor;
+            if (!refreshing) {
+                style.transform = `rotate(${360 * rate}deg)`;
+                style.transition = 'transform 100ms linear';
+            }
+            return style;
+        },
+        pullDownTextStyle() {
+            const style = {};
+            const { refresherTextColor } = this.defaultOption;
+            style.color = refresherTextColor;
+            return style;
+        },
+        // 上拉中动画样式
+        pullUpAnimationStyle() {
+            const style = {};
+            const { loadIconColor } = this.defaultOption;
+            const { r, g, b } = this.hexToRgb(loadIconColor);
+            style.borderColor = `rgba(${r},${g},${b},0.2)`;
+            style.borderTopColor = loadIconColor;
+            return style;
+        },
+        // 上拉中文字样式
+        pullUpTextStyle() {
+            const style = {};
+            const { loadTextColor } = this.defaultOption;
+            style.color = loadTextColor;
+            return style;
+        },
+        // 空数据提示文字样式
+        emptyTextStyle() {
+            const style = {};
+            const { emptyTextColor } = this.defaultOption;
+            style.color = emptyTextColor;
+            return style;
+        }
+    },
+    watch: {
+        scrollViewTop(val) {
+            this.updateScrollView();
+        }
+    },
+    created() {
+        this.elClass = 'scroll-view-' + this._uid;
+        this.windowInfo = uni.getSystemInfoSync();
+    },
+    mounted() {
+        this.handleInit();
+    }
+};
+</script>
+
+<style scoped lang="scss">
+.scroll-list-wrap {
+    box-sizing: border-box;
+    .scroll-view {
+        position: relative;
+        .scroll-content {
+            height: 100%;
+            display: flex;
+            will-change: transform;
+            flex-direction: column;
+            .pull-down-wrap {
+                left: 0;
+                width: 100%;
+                display: flex;
+                padding: 30rpx 0;
+                position: absolute;
+                align-items: flex-end;
+                justify-content: center;
+                transform: translateY(-100%);
+                .refresh-view {
+                    display: flex;
+                    justify-content: center;
+                    .pull-down-animation {
+                        width: 32rpx;
+                        height: 32rpx;
+                        border-width: 4rpx;
+                        border-style: solid;
+                        border-radius: 50%;
+                        &.refreshing {
+                            animation: spin 0.5s linear infinite;
+                        }
+                        @keyframes spin {
+                            to {
+                                transform: rotate(360deg);
+                            }
+                        }
+                    }
+                    .pull-down-text {
+                        margin-left: 10rpx;
+                    }
+                }
+            }
+            .empty-wrap {
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                display: flex;
+                position: absolute;
+                align-items: center;
+                flex-direction: column;
+                .empty-view {
+                    margin: auto;
+                    display: flex;
+                    align-items: center;
+                    flex-direction: column;
+                    .empty-image {
+                        width: 200rpx;
+                        height: 200rpx;
+                    }
+                    .empty-text {
+                        color: #606266;
+                        margin-top: 20rpx;
+                    }
+                }
+            }
+            .list-content {
+            }
+            .pull-up-wrap {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                .load-view {
+                    padding: 20rpx 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    .pull-up-animation {
+                        width: 32rpx;
+                        height: 32rpx;
+                        border-width: 4rpx;
+                        border-style: solid;
+                        border-radius: 50%;
+                        animation: spin 0.5s linear infinite;
+                    }
+                    .pull-up-text {
+                        margin-left: 10rpx;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/components/uni-goods-nav/uni-goods-nav.vue

@@ -0,0 +1,225 @@
+<template>
+	<view class="uni-goods-nav">
+		<!-- 底部占位 -->
+		<view class="uni-tab__seat" />
+		<view class="uni-tab__cart-box flex">
+			<view class="flex uni-tab__cart-sub-left">
+				<view v-for="(item,index) in options" :key="index" class="flex uni-tab__cart-button-left uni-tab__shop-cart" @click="onClick(index,item)">
+					<view class="uni-tab__icon">
+						<uni-icons :type="item.icon" size="20" color="#646566"></uni-icons>
+						<!-- <image class="image" :src="item.icon" mode="widthFix" /> -->
+					</view>
+					<text class="uni-tab__text">{{ item.text }}</text>
+					<view class="flex uni-tab__dot-box">
+						<text v-if="item.info" :class="{ 'uni-tab__dots': item.info > 9 }" class="uni-tab__dot " :style="{'backgroundColor':item.infoBackgroundColor?item.infoBackgroundColor:'#ff0000',
+						color:item.infoColor?item.infoColor:'#fff'
+						}">{{ item.info }}</text>
+					</view>
+				</view>
+			</view>
+			<view :class="{'uni-tab__right':fill}" class="flex uni-tab__cart-sub-right ">
+				<view v-for="(item,index) in buttonGroup" :key="index" :style="{backgroundColor:item.backgroundColor,color:item.color}"
+				 class="flex uni-tab__cart-button-right" @click="buttonClick(index,item)"><text :style="{color:item.color}" class="uni-tab__cart-button-right-text">{{ item.text }}</text></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import uniIcons from '../uni-icons/uni-icons.vue'
+	/**
+	 * GoodsNav 商品导航
+	 * @description 商品加入购物车、立即购买等
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=865
+	 * @property {Array} options 组件参数
+	 * @property {Array} buttonGroup 组件按钮组参数
+	 * @property {Boolean} fill = [true | false] 组件按钮组参数
+	 * @event {Function} click 左侧点击事件
+	 * @event {Function} buttonClick 右侧按钮组点击事件
+	 * @example <uni-goods-nav :fill="true"  options="" buttonGroup="buttonGroup"  @click="" @buttonClick="" />
+	 */
+	export default {
+		name: 'UniGoodsNav',
+		components: {
+			uniIcons
+		},
+		props: {
+			options: {
+				type: Array,
+				default () {
+					return [{
+						icon: 'shop',
+						text: '店铺',
+					}, {
+						icon: 'cart',
+						text: '购物车'
+					}]
+				}
+			},
+			buttonGroup: {
+				type: Array,
+				default () {
+					return [{
+							text: '加入购物车',
+							backgroundColor: '#ffa200',
+							color: '#fff'
+						},
+						{
+							text: '立即购买',
+							backgroundColor: '#ff0000',
+							color: '#fff'
+						}
+					]
+				}
+			},
+			fill: {
+				type: Boolean,
+				default: false
+			}
+		},
+		methods: {
+			onClick(index, item) {
+				this.$emit('click', {
+					index,
+					content: item,
+
+				})
+			},
+			buttonClick(index, item) {
+				if (uni.report) {
+					uni.report(item.text, item.text)
+				}
+				this.$emit('buttonClick', {
+					index,
+					content: item
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.flex {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-goods-nav {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+	}
+
+	.uni-tab__cart-box {
+		flex: 1;
+		height: 50px;
+		background-color: #fff;
+		z-index: 900;
+	}
+
+	.uni-tab__cart-sub-left {
+		padding: 0 5px;
+	}
+
+	.uni-tab__cart-sub-right {
+		flex: 1;
+	}
+
+	.uni-tab__right {
+		margin: 5px 0;
+		margin-right: 10px;
+		border-radius: 100px;
+		overflow: hidden;
+	}
+
+	.uni-tab__cart-button-left {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		// flex: 1;
+		position: relative;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		margin: 0 10px;
+	}
+
+	.uni-tab__icon {
+		width: 18px;
+		height: 18px;
+	}
+
+	.image {
+		width: 18px;
+		height: 18px;
+	}
+
+	.uni-tab__text {
+		margin-top: 3px;
+		font-size: $uni-font-size-sm;
+		color: #646566;
+	}
+
+	.uni-tab__cart-button-right {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex-direction: column;
+		/* #endif */
+		flex: 1;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-tab__cart-button-right-text {
+		font-size: $uni-font-size-base;
+		color: #fff;
+	}
+
+	.uni-tab__cart-button-right:active {
+		opacity: 0.7;
+	}
+
+	.uni-tab__dot-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex-direction: column;
+		/* #endif */
+		position: absolute;
+		right: -2px;
+		top: 2px;
+		justify-content: center;
+		align-items: center;
+		// width: 0;
+		// height: 0;
+	}
+
+	.uni-tab__dot {
+		// width: 30rpx;
+		// height: 30rpx;
+		padding: 0 4px;
+		line-height: 15px;
+		color: #ffffff;
+		text-align: center;
+		font-size: 12px;
+		background-color: #ff0000;
+		border-radius: 15px;
+	}
+
+	.uni-tab__dots {
+		padding: 0 4px;
+		// width: auto;
+		border-radius: 15px;
+	}
+
+	.uni-tab__color-y {
+		background-color: #ffa200;
+	}
+
+	.uni-tab__color-r {
+		background-color: #ff0000;
+	}
+</style>

src/components/uni-icons/icons.js

@@ -0,0 +1,132 @@
+export default {
+	"pulldown": "\ue588",
+	"refreshempty": "\ue461",
+	"back": "\ue471",
+	"forward": "\ue470",
+	"more": "\ue507",
+	"more-filled": "\ue537",
+	"scan": "\ue612",
+	"qq": "\ue264",
+	"weibo": "\ue260",
+	"weixin": "\ue261",
+	"pengyouquan": "\ue262",
+	"loop": "\ue565",
+	"refresh": "\ue407",
+	"refresh-filled": "\ue437",
+	"arrowthindown": "\ue585",
+	"arrowthinleft": "\ue586",
+	"arrowthinright": "\ue587",
+	"arrowthinup": "\ue584",
+	"undo-filled": "\ue7d6",
+	"undo": "\ue406",
+	"redo": "\ue405",
+	"redo-filled": "\ue7d9",
+	"bars": "\ue563",
+	"chatboxes": "\ue203",
+	"camera": "\ue301",
+	"chatboxes-filled": "\ue233",
+	"camera-filled": "\ue7ef",
+	"cart-filled": "\ue7f4",
+	"cart": "\ue7f5",
+	"checkbox-filled": "\ue442",
+	"checkbox": "\ue7fa",
+	"arrowleft": "\ue582",
+	"arrowdown": "\ue581",
+	"arrowright": "\ue583",
+	"smallcircle-filled": "\ue801",
+	"arrowup": "\ue580",
+	"circle": "\ue411",
+	"eye-filled": "\ue568",
+	"eye-slash-filled": "\ue822",
+	"eye-slash": "\ue823",
+	"eye": "\ue824",
+	"flag-filled": "\ue825",
+	"flag": "\ue508",
+	"gear-filled": "\ue532",
+	"reload": "\ue462",
+	"gear": "\ue502",
+	"hand-thumbsdown-filled": "\ue83b",
+	"hand-thumbsdown": "\ue83c",
+	"hand-thumbsup-filled": "\ue83d",
+	"heart-filled": "\ue83e",
+	"hand-thumbsup": "\ue83f",
+	"heart": "\ue840",
+	"home": "\ue500",
+	"info": "\ue504",
+	"home-filled": "\ue530",
+	"info-filled": "\ue534",
+	"circle-filled": "\ue441",
+	"chat-filled": "\ue847",
+	"chat": "\ue263",
+	"mail-open-filled": "\ue84d",
+	"email-filled": "\ue231",
+	"mail-open": "\ue84e",
+	"email": "\ue201",
+	"checkmarkempty": "\ue472",
+	"list": "\ue562",
+	"locked-filled": "\ue856",
+	"locked": "\ue506",
+	"map-filled": "\ue85c",
+	"map-pin": "\ue85e",
+	"map-pin-ellipse": "\ue864",
+	"map": "\ue364",
+	"minus-filled": "\ue440",
+	"mic-filled": "\ue332",
+	"minus": "\ue410",
+	"micoff": "\ue360",
+	"mic": "\ue302",
+	"clear": "\ue434",
+	"smallcircle": "\ue868",
+	"close": "\ue404",
+	"closeempty": "\ue460",
+	"paperclip": "\ue567",
+	"paperplane": "\ue503",
+	"paperplane-filled": "\ue86e",
+	"person-filled": "\ue131",
+	"contact-filled": "\ue130",
+	"person": "\ue101",
+	"contact": "\ue100",
+	"images-filled": "\ue87a",
+	"phone": "\ue200",
+	"images": "\ue87b",
+	"image": "\ue363",
+	"image-filled": "\ue877",
+	"location-filled": "\ue333",
+	"location": "\ue303",
+	"plus-filled": "\ue439",
+	"plus": "\ue409",
+	"plusempty": "\ue468",
+	"help-filled": "\ue535",
+	"help": "\ue505",
+	"navigate-filled": "\ue884",
+	"navigate": "\ue501",
+	"mic-slash-filled": "\ue892",
+	"search": "\ue466",
+	"settings": "\ue560",
+	"sound": "\ue590",
+	"sound-filled": "\ue8a1",
+	"spinner-cycle": "\ue465",
+	"download-filled": "\ue8a4",
+	"personadd-filled": "\ue132",
+	"videocam-filled": "\ue8af",
+	"personadd": "\ue102",
+	"upload": "\ue402",
+	"upload-filled": "\ue8b1",
+	"starhalf": "\ue463",
+	"star-filled": "\ue438",
+	"star": "\ue408",
+	"trash": "\ue401",
+	"phone-filled": "\ue230",
+	"compose": "\ue400",
+	"videocam": "\ue300",
+	"trash-filled": "\ue8dc",
+	"download": "\ue403",
+	"chatbubble-filled": "\ue232",
+	"chatbubble": "\ue202",
+	"cloud-download": "\ue8e4",
+	"cloud-upload-filled": "\ue8e5",
+	"cloud-upload": "\ue8e6",
+	"cloud-download-filled": "\ue8e9",
+	"headphones":"\ue8bf",
+	"shop":"\ue609"
+}

src/components/uni-number-box/uni-number-box.vue

@@ -0,0 +1,184 @@
+<template>
+	<view class="uni-numbox">
+		<view @click.stop="_calcValue('minus')" class="uni-numbox__minus">
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }">-</text>
+		</view>
+		<input :disabled="disabled" @blur="_onBlur" class="uni-numbox__value" type="number" v-model="inputValue" />
+		<view @click.stop="_calcValue('plus')" class="uni-numbox__plus">
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">+</text>
+		</view>
+	</view>
+</template>
+<script>
+	export default {
+		name: "UniNumberBox",
+		props: {
+			value: {
+				type: [Number, String],
+				default: 1
+			},
+			min: {
+				type: Number,
+				default: 0
+			},
+			max: {
+				type: Number,
+				default: 100
+			},
+			step: {
+				type: Number,
+				default: 1
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				inputValue: 0
+			};
+		},
+		watch: {
+			value(val) {
+				this.inputValue = +val;
+			},
+			inputValue(newVal, oldVal) {
+				if (+newVal !== +oldVal) {
+					this.$emit("change", newVal);
+				}
+			}
+		},
+		created() {
+			this.inputValue = +this.value;
+		},
+		methods: {
+			_calcValue(type) {
+				if (this.disabled) {
+					return;
+				}
+				const scale = this._getDecimalScale();
+				let value = this.inputValue * scale;
+				let step = this.step * scale;
+				if (type === "minus") {
+					value -= step;
+					if (value < this.min) {
+						return;
+					}
+					if(value > this.max){
+						value = this.max
+					}
+				} else if (type === "plus") {
+					value += step;
+					if (value > this.max) {
+						return;
+					}
+					if(value < this.min){
+						value = this.min
+					}
+				}
+
+				this.inputValue = String(value / scale);
+			},
+			_getDecimalScale() {
+				let scale = 1;
+				// 浮点型
+				if (~~this.step !== this.step) {
+					scale = Math.pow(10, (this.step + "").split(".")[1].length);
+				}
+				return scale;
+			},
+			_onBlur(event) {
+				let value = event.detail.value;
+				if (!value) {
+					// this.inputValue = 0;
+					return;
+				}
+				value = +value;
+				if (value > this.max) {
+					value = this.max;
+				} else if (value < this.min) {
+					value = this.min;
+				}
+				this.inputValue = value;
+			}
+		}
+	};
+</script>
+<style lang="scss" scoped>
+	$box-height: 35px;
+	/* #ifdef APP-NVUE */
+	$box-line-height: 35px;
+	/* #endif */
+	$box-line-height: 26px;
+	$box-width: 35px;
+
+	.uni-numbox {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		height: $box-height;
+		line-height: $box-height;
+		width: 180rpx;
+		padding-bottom:3rpx;
+	}
+
+	.uni-numbox__value {
+		background-color: $uni-bg-color;
+		width: 40px;
+		height: $box-height;
+		text-align: center;
+		font-size: $uni-font-size-lg;
+		border-width: 0;
+		border-left-width: 0;
+		border-right-width: 0;
+	}
+
+	.uni-numbox__minus {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		width: $box-width;
+		height: $box-height;
+		// line-height: $box-line-height;
+		// text-align: center;
+		font-size: 20px;
+		color: $uni-text-color;
+		background-color: $uni-bg-color-grey;
+		border-width: 0;
+		border-top-left-radius: $uni-border-radius-base;
+		border-bottom-left-radius: $uni-border-radius-base;
+		border-right-width: 0;
+	}
+
+	.uni-numbox__plus {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		width: $box-width;
+		height: $box-height;
+		border-width: 0;
+		border-style: solid;
+		border-color: $uni-border-color;
+		border-top-right-radius: $uni-border-radius-base;
+		border-bottom-right-radius: $uni-border-radius-base;
+		background-color: $uni-bg-color-grey;
+		border-left-width: 0;
+	}
+
+	.uni-numbox--text {
+		font-size: 40rpx;
+		color: $uni-text-color;
+	}
+
+	.uni-numbox--disabled {
+		color: $uni-text-color-disable;
+	}
+</style>

src/pages.json

@@ -6,6 +6,12 @@
 				"navigationBarTitleText": "一茶酒社"
 			}
 		},
+		{
+			"path": "pages/my/login",
+			"style":{
+				"navigationBarTitleText": "登录"
+			}
+		},
 		{
 			"path": "pages/sign/index",
 			"style":{
@@ -24,12 +30,6 @@
 				"navigationBarTitleText": "我的"
 			}
 		},
-		{
-			"path": "pages/my/login",
-			"style":{
-				"navigationBarTitleText": "登录"
-			}
-		},
 		{
 			"path": "pages/product/productRetail",
 			"style":{
@@ -42,6 +42,18 @@
 				"navigationBarTitleText": "批发专区"
 			}
 		},
+		{
+			"path": "pages/product/p_details",
+			"style":{
+				"navigationBarTitleText": "商品详情"
+			}
+		},
+		{
+			"path" : "pages/to-pay-list/index",
+			"style" : {
+				"navigationBarTitleText": "订单购买"
+			}
+		},
 		{
 			"path": "pages/protocol/index",
 			"style":{

src/pages/index/index.vue

@@ -8,9 +8,11 @@
                 <text class="search_text">请输入搜索关键字</text>
             </view>
             <!-- 搜索框-end -->
+
             <!-- 轮播图 -->
             <swiper-banner :radius="1" imgScale="5:2" :imgArr="BannerImg" :duration="1000" :interval="5000" :circular="true" :autoplay="true" @goList="goList" :indicator-dots="true" indicator-active-color="#12B280" indicator-color="rgba(255, 255, 255, .82)"></swiper-banner>
             <!-- 轮播图-end -->
+
             <!-- 公告 -->
             <view class="head_notice clearfix">
                 <view class="notice_title">
@@ -24,14 +26,16 @@
                 </swiper>
             </view>
             <!-- 公告-end -->
+
             <!-- 金刚区 -->
             <view class="head_area">
-                <view class="area_list" v-for="(item, index) in area_list" :key="index">
+                <view class="area_list" v-for="(item, index) in area_list" :key="index" @click="setPageUrl(item)">
                     <image class="area_img" :src="item.url"></image>
                     <view class="area_name">{{ item.name }}</view>
                 </view>
             </view>
             <!-- 金刚区-end -->
+
             <!-- 活动 -->
             <view class="activity" v-if="spc_list.length > 0">
                 <image class="act_one_img" :src="spc_list[0].url" mode=""></image>
@@ -122,11 +126,22 @@ export default {
             });
         },
         // 轮播图跳转
-        goList: function(e) {
+        goList(e) {
             let id = e.id;
-            uni.navigateTo({
-                url: "/pages/prefecture-list/index?id=" + id + "&type=1",
-            });
+            // uni.navigateTo({
+            //     url: "/pages/prefecture-list/index?id=" + id + "&type=1",
+            // });
+        },
+        // 金刚区跳转
+        setPageUrl(item){
+            if(item.showType == 1){
+                this.goto('/pages/product/productRetail')
+            }else if(item.showType == 2){
+                this.goto('/pages/product/productWholesale')
+            }else{
+                appEv.errTips('此功能暂未开放！')
+                return false
+            }
         },
     },
     computed: {},

src/pages/my/index.vue

@@ -384,8 +384,8 @@
 <script>
 let page = 1;
 let app = getApp();
-// let reqApi = new ReqApi();
 var appEv = app.$vm.$options;
+// let reqApi = new ReqApi();
 // import { ReqApi } from "@/utils/reqTools.js";
 import authorizeModule from "@/components/authorize-module/index";
 import uniCopy from "../../utils/copy";

src/pages/my/login.vue

@@ -10,6 +10,9 @@
                 <input v-model="formD2.captcha" placeholder="请输入验证码" confirm-type="go" type="number" maxlength="5" class="w70" />
                 <view @click="getVerifyCode" :class="{w30:true,corb:msgNum!=='获取验证码'}">{{msgNum}}</view>
             </view>
+            <view v-if="signIn" class="clearfix">
+                <input placeholder="请输入邀请码" v-model="formD2.invite" />
+            </view>
         </view>
         <view class="numberL" v-else>
             <view class="clearfix">
@@ -24,12 +27,15 @@
             </view>
         </view>
         <view @click="login" :class="{bagBtn:true,corg:ISFill}">登录</view>
+        <view class="btnTxt" @click="signIn = !signIn">立即注册</view>
         <!-- <view class="btnTxt" @click="LoginType = LoginType == 1 ? 0 : 1">
       {{ LoginType == 1 ? "密码登录" : "验证码登录" }}
     </view> -->
     </view>
 </template>
 <script>
+let app = getApp();
+var appEv = app.$vm.$options;
 import { get, post } from "@/request/api.js";
 export default {
     name: "login",
@@ -43,8 +49,9 @@ export default {
                 verifyCode: "",
             },
             formD2: {
-                mobile: '',
+                mobile: '18971725048',
                 captcha: "",
+                invite: ""
             },
             verifyimage: "",
 
@@ -54,6 +61,7 @@ export default {
             messageId: "",
 
             ISFill: false,
+            signIn: false, //是否为注册
         };
     },
     onLoad(option) {
@@ -74,9 +82,10 @@ export default {
                 return
             }
             post("login",this.formD2).then((res) => {
-                // if (res.resultCode == 1) {
-                //     this.getuserInfo();
-                // }
+                if (res.code === 0) {
+                    uni.setStorageSync('token', res.data.token);
+                    this.getuserInfo();
+                }
             });
         },
         getuserInfo() {
@@ -100,8 +109,13 @@ export default {
                 }
             })
         },
+
         getVerifyCode() {
-            if (!this.isPhone(this.formD2.mobile)) return
+            console.log(appEv);
+            if (!this.isPhone(this.formD2.mobile)) {
+                appEv.errTips("手机号填写有误！");
+                return
+            }
             post("getSms", {
                 mobile: this.formD2.mobile
             }).then((res) => {

src/pages/product/p_details.vue

@@ -0,0 +1,443 @@
+<template>
+	<view class="container">
+		<!-- 轮播图 -->
+		<swiper-banner
+			imgScale="25:17"
+			:imgArr='detail.goodsPlayImage'
+			:duration="1000"
+			:interval="5000" 
+			:circular="true" 
+			:autoplay="true"
+			:indicator-dots="true"
+			indicator-active-color="#12B280"
+			indicator-color="rgba(255, 255, 255, .82)" 
+		></swiper-banner>
+		<!-- 轮播图-end -->
+		
+		<!-- 价格信息栏 -->
+		<view class="price_info flex_r flex_ac flex_jb">
+			<view class="price" :class="type == 2 ? 'samll' : ''"><text v-if="type != 2">￥</text>{{type != 2 ? detail.price : detail.pfCombination}}</view>
+			<view class="price_span flex_r flex_ac flex_je">
+				<view class="triangle"></view>
+				<view class="span_conten flex_r flex_ac flex_jc">{{type == 1 ? '零售专区' : type == 2 ? '批发专区' : type == 3 ? '合伙人套餐' : type == 4 ? 'CHA专区' : '今日值得买'}}</view>
+			</view>
+		</view>
+		<!-- 价格信息栏-end -->
+		
+		<!-- 标题信息栏 -->
+		<view class="title_info">
+			<view class="goods_name">{{ type != 3 ? detail.goodsName : detail.title}}</view>
+			<view class="goods_subName">{{detail.goodsMsg}}</view>
+		</view>
+		<!-- 标题信息栏-end -->
+		
+		<!-- 产品简介 -->
+		<view class="brief mar_t20">
+			<view class="brief_title flex_r flex_ac">产品简介</view>
+			<view class="brief_con">
+				<jyfParser :html="detail.goodsDesc" ref="jyf"></jyfParser>
+				<image :lazy-load="true" style="width: 100%;display: block;" v-for="(item,index) in detail.goodsDetailesImage" :key="index" :src="item" mode="widthFix"></image>
+			</view>
+		</view>
+		<!-- 产品简介-end -->
+		
+		<!-- 底部导航组件 -->
+		<view class="option">
+			<uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
+		</view>
+		<!-- 底部导航组件-end -->
+		<!-- 授权 -->
+		<authorize-module v-if="showAuth" :shopInfo="shopInfo" @authSuccess="onAuthSuccess" @onGotUserInfo="onGotUserInfo" ></authorize-module>
+		<!-- 授权-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_info flex_r">
+					<image class="goods_img" :src="detail.goodsPlayImage[0]" mode=""></image>
+					<view class="goods_con flex_c flex_jb">
+						<view class="shop_names">{{ type != 3 ? detail.goodsName : detail.title}}</view>
+						<view class="goods_msg">{{type == 2 ? detail.pfCombination : '￥' + detail.price}}</view>
+						<view class="num_con flex_r flex_je" v-if="type != 3">
+							<uni-number-box :min="1" @change="bindChange" :value="buyNum"></uni-number-box>
+						</view>
+					</view>
+				</view>
+				<view class="goods_option flex_r flex_ac flex_jc" v-if="type == 2">
+					<view class="goods_raido flex_r flex_ac" @tap="setWay(2)">
+						<view class="raido_img" :class="pfway == 2 ? 'raido_box' : ''"></view>
+						<view class="raido_text">申请寄售</view>
+					</view>
+					<view class="goods_raido flex_r flex_ac" @tap="setWay(1)">
+						<view class="raido_img" :class="pfway == 1 ? 'raido_box' : ''"></view>
+						<view class="raido_text">发货邮寄</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();
+// let reqApi = new ReqApi();
+var appEv = app.$vm.$options;
+import { get, post, u_post } from "@/request/api.js";
+// import { ReqApi } from "@/utils/reqTools.js";
+import uniPopup from '@/components/uni-popup/uni-popup.vue'
+import jyfParser from '@/components/jyf-parser/jyf-parser.vue'
+import swiperBanner from '@/components/swiperBanner'
+import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
+import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
+import authorizeModule from '@/components/authorize-module/index'
+	export default {
+		components:{
+			uniPopup,
+			jyfParser,
+			uniGoodsNav,
+			swiperBanner,
+			uniNumberBox,
+			authorizeModule
+		},
+		data() {
+			return {
+				imgArr:['/static/goods5.jpg'],
+				content:'',
+				options: [ // 底部导航跳转
+					{
+						icon: 'home',
+						text: '主页'
+					},
+					{
+						icon: 'cart',
+						text: '购物车',
+						info: 0
+					}
+				],
+				buttonGroup: [ // 底部操作按钮
+					{
+						text: '加入购物车',
+						backgroundColor: '#ff0000',
+						color: '#fff'
+					},
+					{
+						text: '立即购买',
+						backgroundColor: '#ffa200',
+						color: '#fff'
+					}
+				],
+				btnIndex : 0 ,// 用户点击按钮事件判断 0：加入购物车；1：立即购买
+				type: null ,// 商品类型，1：零售，2：批发；3：套餐;
+				goodsId:'' ,// 商品ID
+				id:'' ,//合伙人套餐ID
+				detail:'' ,// 商品详情
+				checked:false, //是否选中协议
+				buyNum: 1 ,//购买数量
+				pfway:2 ,// 批发
+				showAuth:false
+			};
+		},
+		onLoad:function(e){
+			this.type=e.type
+			if(e.type == 3){
+				this.id = e.id
+			}else{
+				this.goodsId = e.id
+			}
+			if(e.type == 3 || e.type == 2 || e.type == 4 || e.type == 7){
+				this.buttonGroup.shift()
+			}
+			//推荐人ID
+			if (e.agentId) {
+			    app.globalData.agentId = e.agentId;
+			}
+			if (e && e.scene){
+			    var scene = decodeURIComponent(e.scene).split("&");
+			    if (scene.length > 0) {
+			        var agentId = scene[0].split(":");
+			        app.globalData.agentId = agentId[1] && agentId[1] != '' ? agentId[1] : app.globalData.agentId;
+			        var goodsId = scene[1].split(":");
+			        this.goodsId = goodsId[1] && goodsId[1] != '' ? goodsId[1] : ''
+			    }
+			}
+			this.loadData()
+		},
+		onShow:function(){
+			let that = this;
+			let userId = app.globalData.systemUserInfo && app.globalData.systemUserInfo.userId ? app.globalData.systemUserInfo.userId : '';
+			if (!userId || userId == '' || userId==undefined) {
+				that.showAuth=true
+				appEv.authorizeUserInfo(res=>{
+					if(res){
+						that.shopInfo=app.globalData.shopInfo
+						that.showAuth=false
+					}
+				})
+			}
+		},
+		methods:{
+			// 商品详情信息
+			loadData:function(){
+				let that = this;
+				let type = this.type;
+				let data = {
+					specialArea:type
+				}
+				if(type == 3){
+					data.id = this.id
+				}else{
+					data.goodsId = this.goodsId
+				}
+				u_post("ShuZiTeaYW/shop/detailes",data).then(res => {
+                    if(res.status == 200){
+                        that.detail = res.goods
+                    }else{
+                        uni.showModal({
+                            title: '提示',
+                            content: res.msg,
+                            showCancel:false,
+                            success: function (res) {
+                                if (res) {
+                                    uni.navigateBack({
+                                        delta:1
+                                    })
+                                }
+                            }
+                        });
+                    }
+                })
+			},
+			//授权并登录
+			onAuthSuccess:function() {
+			    var that = this;
+			    uni.showLoading({ mask: true })
+			    appEv.setData((res) => {
+					uni.hideLoading()
+					that.showAuth = false
+			    });
+			},
+			// 去购买
+			ToPayPage:function(){
+				if(!this.checked){
+					appEv.errTips('请阅读并同意购买协议')
+					return
+				}
+				if(this.btnIndex == 0){
+					if(this.type != 1){
+						this.toPayOrder()
+					}else{
+						this.SetCartGoodsList()
+					}
+				}else{
+					this.toPayOrder()
+				}
+				
+			},
+			// 创建购买订单
+			toPayOrder:function(){
+				let that = this;
+				let url
+				if(this.type == 1){
+					url = '/pages/to-pay-list/index?count=' + this.buyNum + '&goodsId=' + this.goodsId + '&goodsType=1&ojsType=1'
+				}else if(this.type == 2){
+					url = '/pages/to-pay-list/index?count=' + this.buyNum + '&goodsType=2&goodsId=' + this.goodsId + '&ojsType=' + this.pfway + '&payType=2';
+				}else if(this.type == 3){
+					url = '/pages/to-pay-list/index?count=1&goodsType=4&ojsType=1&goodsPId=' + this.id
+				}else if(this.type == 4){
+					url = '/pages/to-pay-list/index?count=' + this.buyNum + '&goodsType=3&ojsType=1&goodsId=' + this.detail.goodsId
+				}else if(this.type == 7){
+					url = '/pages/to-pay-list/index?count=' + this.buyNum + '&goodsType=7&ojsType=1&goodsId=' + this.detail.goodsId
+				}
+				uni.navigateTo({
+					url:url
+				})
+			},
+			// 添加到购物车
+			SetCartGoodsList:function(){
+				let that = this;
+				let data = {
+					goodsId:this.goodsId,
+					buyCount:this.buyNum,
+					specialArea:this.type
+				}
+                u_post("ShuZiTeaYW/shop/conShoppingCart",data).then(res => {
+                    if(res.status == 200){
+                        appEv.errTips('添加成功')
+                        that.checked = false
+                        that.buyNum = 1
+                        that.$refs.shopping.close()
+                    }else{
+                        appEv.errTips(res.msg)
+                    }
+                })
+			},
+			// 购买数量更改
+			bindChange:function(e){
+				this.buyNum = e;
+			},
+			// 更改批发方式
+			setWay:function(e){
+				this.pfway = e;
+			},
+			// 点击同意协议
+			checkboxChange:function(e){
+				let index = e.detail.value.indexOf('1');
+				if(index != -1){
+					this.checked = true
+				}else{
+					this.checked = false
+				}
+			},
+			// 点击底部主页购物车等按钮
+			onClick:function(e){
+				if(e.index == 0){
+					uni.switchTab({
+						url:'/pages/szw-goods-list/index'
+					})
+				}else if(e.index == 1){
+					uni.switchTab({
+						url:'/pages/szw-cart-list/index'
+					})
+				}
+			},
+			// 点击立即购买或加入购物车
+			buttonClick:function(e){
+				let that = this;
+                u_post("ShuZiTeaYW/userInfo/realName").then(res => {
+                    if(res.status == 200){
+                        that.btnIndex = e.index
+                        that.$refs.shopping.open()
+                    }else{
+                        appEv.errTips('您还未实名')
+                        const infor = reqApi.identifyUserPayment()
+                        if(infor){
+                            infor.then(rea => {
+                                if(rea.status == 200){
+                                    uni.navigateTo({
+                                        url:'/pages/autonym-submit/index'
+                                    })
+                                }else if(rea.status == 999){
+                                    uni.navigateTo({
+                                        url:'/pages/autonym-pay/index'
+                                    })
+                                }else{
+                                    appEv.errTip(rea.msg)
+                                }
+                            })
+                        }
+                    }
+                })
+			},
+			// 点击关闭弹窗
+			closeBtn:function(){
+				this.$refs.shopping.close()
+			},
+			getProPage:function(){
+				if(this.type == 1 || this.type == 2){
+					uni.navigateTo({
+						url:'/pages/protocol/index?type=' + this.type
+					})
+				}else if(this.type == 4){
+					uni.navigateTo({
+						url:'/pages/protocol/index?type=' + 3
+					})
+				}else if(this.type == 3){
+					uni.navigateTo({
+						url:'/pages/protocol/index?type=' + 5
+					})
+				}
+			}
+		},
+		onShareAppMessage: function () {
+			let url
+			let data
+			if(this.type == 3){
+				url = '?type=3&id=' + this.id;
+				data = this.detail.title;
+			}else{
+				url = '?type=' + this.type + '&id=' + this.goodsId;
+				data = this.detail.goodsName;
+			}
+		    var path = '/pages/szw-goods-details/index' + url;
+			
+			
+			if (app.globalData.systemUserInfo && app.globalData.systemUserInfo.userId) {
+			    path = path + '&agentId=' + app.globalData.systemUserInfo.userId;
+			}else{
+				path = path + '&agentId=1';
+			}
+			
+		    var title = `${data}`;
+		    return {
+		        title: title,
+		        path: path
+		    }
+		},
+	}
+</script>
+
+<style lang="scss">
+// 页面配置
+page{background: #F5F5F5;}
+.container{padding-bottom:90rpx;}
+// 页面配置-end
+
+// 价格信息栏
+.price_span{width: 283rpx;height: 100%;position: relative;}
+.price text{font-size: 24rpx;color:#fff;font-family: "SourceHanSansCN-Medium";}
+.price_info{background: #FF6D44;height: 92rpx;width: 100%;box-sizing: border-box;}
+.price{font-size: 48rpx;color:#fff;font-family: "SourceHanSansCN-Medium";margin-left: 20rpx;}
+.span_conten{width: calc(283rpx - 46rpx);height: 100%;background: #FFCABB;position: relative;font-size: 34rpx;font-family: "SourceHanSansCN-Medium";color:#682918;}
+.triangle{width:0px;height:0px;border-top:92rpx solid rgba(0,0,0,0);border-right:92rpx solid  rgba(0,0,0,0);border-bottom:92rpx solid #FFCABB;border-left:92rpx solid  rgba(0,0,0,0);transform: translate(-46rpx,-92rpx);position: absolute;top: 0;left: 0;}
+.samll{font-size: 28rpx;max-width: calc(100% - 360rpx);line-height: 1.3;text-align: justify;}
+// 价格信息栏-end
+
+// 标题信息栏
+.goods_subName{width: 100%;overflow: hidden;font-size: 22rpx;color:#787878;}
+.title_info{width: 100%;overflow: hidden;background: #ffffff;padding:20rpx;box-sizing: border-box;}
+.goods_name{width:100%;overflow: hidden;font-size: 32rpx;color:#1B1B1B;font-family: "SourceHanSansCN-Bold";font-weight: bold;margin-bottom: 20rpx;}
+// 标题信息栏-end
+
+// 产品简介
+.brief{width: 100%;overflow: hidden;background-color: #fff;}
+.brief_con{width: 100%;overflow: hidden;padding:20rpx;box-sizing: border-box;}
+.brief_title{width: 100%;overflow: hidden;font-size: 26rpx;color:#1B1B1B;padding:0 20rpx;box-sizing: border-box;border-bottom: 3rpx solid rgba(0,0,0,.12);height: 74rpx;}
+// 产品简介-end
+
+// 底部导航组件
+.option{position: fixed;width: 100%;overflow: hidden;left: 0;bottom: 0;}
+// 底部导航组件-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_con{width: calc(100% - 202rpx - 30rpx);overflow: hidden;}
+.goods_img{width: 202rpx;height: 140rpx;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_info{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>

src/pages/product/productRetail.vue

@@ -1,23 +1,404 @@
 <template>
-  <div class='partner'>
-    <span>测试</span>
-  </div>
+    <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.goodsId,1)">
+                <image class="goods_img" :src="item.goodsThumbnailUrl" mode=""></image>
+                <view class="goods_info">
+                    <view class="info_title">{{item.goodsName}}</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.fanIntegral}}</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>
-import { get, post } from '@/request/api.js';
+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 {
-  name: 'partner',
-  data () {
-    return {}
-  },
-  onLoad (option) {},
-  onLaunch () {},
-  onShow () {},
-  onHide () {},
-  methods: {},
-  computed: {},
-  watch: {}
+    components: { uniPopup },
+    data() {
+        return {
+            goods: [], // 商品列表
+            goodsIndex: '', // 选中猜你喜欢的下标
+            buyNum: 1, // 购买数量
+            checked: false, // 是否同意协议 
+        };
+    },
+    onLoad: function(e) {
+        // 推荐人ID
+        if (e.agentId) {
+            app.globalData.agentId = e.agentId;
+        }
+        if (e && e.scene) {
+            var scene = decodeURIComponent(e.scene).split("&");
+            if (scene.length > 0) {
+                var agentId = scene[0].split(":");
+                app.globalData.agentId = agentId[1] && agentId[1] != '' ? agentId[1] : app.globalData.agentId;
+                var goodsId = scene[1].split(":");
+                this.goods_id = goodsId[1] && goodsId[1] != '' ? goodsId[1] : ''
+            }
+        }
+    },
+    onShow: function() {
+        page = 1;
+        this.goods = [];
+        this.loadData()
+    },
+    methods: {
+        loadData: function() {
+            let that = this;
+            let data = {
+                page: page
+            }
+            u_post("ShuZiTeaYW/shop/selecthRetail", data).then(res => {
+                if (res.status == 200) {
+                    let obj = res.goods
+                    if (obj.length > 0) {
+                    	that.goods = [ ...that.goods, ...obj ]
+                        // for (var i in obj) {
+                        //     that.goods.push(obj[i])
+                        // }
+                    } else {
+                        page = -1;
+                        appEv.errTips('暂无更多')
+                    }
+                } else {
+                    page = -1;
+                    appEv.errTips('暂无更多')
+                }
+
+            })
+        },
+        // 跳转到商品详情页
+        NavToGoodsDetail: function(id, type) {
+            uni.navigateTo({
+                url: '/pages/product/p_details?id=' + id + '&type=' + type
+            })
+        },
+        // 打开加入购物车窗口
+        OpenShopping: function(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() {
+        var path = '/pages/retail-list/index?agentId=1';
+        if (app.globalData.systemUserInfo && app.globalData.systemUserInfo.userId) {
+            path = '/pages/retail-list/index?agentId=' + app.globalData.systemUserInfo.userId;
+        }
+
+        var title = `茶，让生活更美好！`;
+        return {
+            title: title,
+            path: path
+        }
+    },
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function() {
+        if (page != -1) {
+            var that = this;
+            setTimeout(function() {
+                ++page;
+                that.loadData();
+            }, 800);
+        }
+    }
 }
 </script>
-<style scoped lang='scss'>
+<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>

src/pages/product/productWholesale.vue

@@ -1,23 +1,180 @@
 <template>
-  <div class='partner'>
-    <span>测试</span>
-  </div>
+    <view class="container">
+        <!-- 批发专区 -->
+        <view class="who_list flex_r" v-for="(item,index) in who_list" :key="index" @tap="NavToGoodsDetail(item.goodsId,2)">
+            <image class="list_img" :src="item.goodsThumbnailUrl"></image>
+            <view class="list_info flex_c flex_jb">
+                <view class="info_name">{{item.goodsName}}</view>
+                <view class="info_msg">{{item.purchasePrice}}</view>
+                <view class="info_btn_con flex_r flex_je">
+                    <view class="info_btn flex_r flex_ac flex_jc">购买</view>
+                </view>
+            </view>
+        </view>
+        <!-- 批发专区-end -->
+    </view>
 </template>
 <script>
-import { get, post } from '@/request/api.js';
+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";
 export default {
-  name: 'partner',
-  data () {
-    return {}
-  },
-  onLoad (option) {},
-  onLaunch () {},
-  onShow () {},
-  onHide () {},
-  methods: {},
-  computed: {},
-  watch: {}
+    data() {
+        return {
+            who_list: [] // 批发商品列表
+        };
+    },
+    onLoad: function(options) {
+        // 推荐人ID
+        if (options.agentId) {
+            app.globalData.agentId = options.agentId;
+        }
+        if (options && options.scene) {
+            var scene = decodeURIComponent(options.scene).split("&");
+            if (scene.length > 0) {
+                var agentId = scene[0].split(":");
+                app.globalData.agentId = agentId[1] && agentId[1] != '' ? agentId[1] : app.globalData.agentId;
+                var goodsId = scene[1].split(":");
+                this.goods_id = goodsId[1] && goodsId[1] != '' ? goodsId[1] : ''
+            }
+        }
+    },
+    onShow: function() {
+        page = 1;
+        this.who_list = []
+        this.loadData()
+    },
+    methods: {
+        loadData: function() {
+            let that = this;
+            uni.showLoading({ mask: true })
+            let data = {
+                page: page
+            }
+            u_post("ShuZiTeaYW/shop/selectWholesale", data).then(res => {
+                uni.hideLoading()
+                if (res.status == 200) {
+                    let obj = res.goods
+                    if (obj.length > 0) {
+                    	that.who_list = [ ...that.who_list, ...obj ]
+                        // for (var i in obj) {
+                        //     that.who_list.push(obj[i])
+                        // }
+                    } else {
+                        page = -1;
+                        appEv.errTips('暂无更多')
+                    }
+                } else {
+                    page = -1;
+                    appEv.errTips('暂无更多')
+                }
+            })
+        },
+        // 跳转到商品详情页
+        NavToGoodsDetail: function(id, type) {
+            uni.navigateTo({
+                url: '/pages/product/p_details?id=' + id + '&type=' + type
+            })
+        }
+    },
+    onShareAppMessage: function() {
+        var path = '/pages/wholesale-list/index?agentId=1';
+
+        if (app.globalData.systemUserInfo && app.globalData.systemUserInfo.userId) {
+            path = '/pages/wholesale-list/index?agentId=' + app.globalData.systemUserInfo.userId;
+        }
+
+        var title = `茶，让生活更美好！`;
+        return {
+            title: title,
+            path: path
+        }
+    },
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function() {
+        if (page != -1) {
+            var that = this;
+            setTimeout(function() {
+                ++page;
+                that.loadData();
+            }, 800);
+        }
+    }
 }
 </script>
-<style scoped lang='scss'>
+<style lang="scss">
+// 页面配置
+page {
+    background: #F5F5F5;
+}
+
+.container {
+    padding: 18rpx 30rpx 0;
+    box-sizing: border-box;
+}
+
+// 页面配置-end
+
+// 批发商品列表
+.info_btn_con {
+    width: 100%;
+    overflow: hidden;
+}
+
+.list_info {
+    width: calc(100% - 326rpx - 36rpx);
+    overflow: hidden;
+}
+
+.list_img {
+    width: 300rpx;
+    height: 200rpx;
+    margin-right: 35rpx;
+    border-radius: 12rpx;
+}
+
+.info_btn {
+    width: 134rpx;
+    height: 50rpx;
+    background: #2DB48A;
+    font-size: 30rpx;
+    color: #fff;
+    border-radius: 12rpx;
+}
+
+.info_msg {
+    width: 100%;
+    overflow: hidden;
+    font-size: 28rpx;
+    color: #18BB88;
+    font-family: "SourceHanSansCN-Medium";
+    font-weight: 500;
+}
+
+.info_name {
+    width: 100%;
+    overflow: hidden;
+    font-size: 34rpx;
+    color: #1B1B1B;
+    font-family: "SourceHanSansCN-Bold";
+    font-weight: bold;
+}
+
+.who_list {
+    width: 100%;
+    overflow: hidden;
+    background: #fff;
+    padding: 20rpx 16rpx;
+    box-sizing: border-box;
+    border-radius: 12rpx;
+    margin-bottom: 18rpx;
+    align-items: initial;
+}
+
+// 批发商品列表-end
 </style>

src/pages/to-pay-list/index.vue

@@ -0,0 +1,299 @@
+<template>
+	<view class="container">
+		
+		<!-- 收货地址 -->
+		<view class="address" v-if="!Data.ojsType || Data.ojsType ==1">
+			<block v-if="DefaultAddress != '' && DefaultAddress.name !='' && DefaultAddress.name != undefined">
+				<view class="add_head flex_r flex_ac flex_jb">
+					<view class="user_info flex_r flex_ac">
+						<view class="user_name">{{DefaultAddress.name}}</view>
+						<view class="user_phone">{{DefaultAddress.mobile}}</view>
+					</view>
+					<view class="set_address flex_r flex_ac" @tap="chooseWXaddress">
+						<image class="set_img" src="/static/img/setAddress.png" mode=""></image>
+						<view class="set_text">修改</view>
+					</view>
+				</view>
+				<view class="add_name mar_t20">{{DefaultAddress.province}}{{DefaultAddress.city}}{{DefaultAddress.county}}{{DefaultAddress.address}}</view>
+			</block>
+			<block v-else>
+				<view class="add_address flex_c flex_ac flex_jc" @tap="chooseWXaddress">
+					<image class="add_icon" src="/static/img/add.png" mode=""></image>
+					<view class="add_text">添加收货地址</view>
+				</view>
+			</block>
+		</view>
+		<!-- 收货地址-end -->
+		
+		<!-- 商品信息 -->
+		<view class="goods_info mar_t20">
+			<view class="info_type">{{modularName}}</view>
+			<view class="goods flex_r" v-for="(item,index) in goodsInfo" :key="index">
+				<image class="goods_img" :src="item.goodsImgUrl" mode=""></image>
+				<view class="goods_con flex_c flex_jc flex_jb">
+					<view class="goods_name">{{item.goodsName}}</view>
+					<view class="flex_r flex_ac flex_jb">
+						<view class="goods_msg">{{Data.goodsType == 5 ? item.goodsIntegral + '消费积分' : '￥' + item.goodsPrice}}</view>
+						<view class="goods_num">x {{item.buyCount ? item.buyCount : 1}}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 商品信息-end -->
+		
+		<!-- 订单信息 -->
+		<view class="order mar_t20">
+			<view class="order_list flex_r flex_ac flex_jb">
+				<view class="list_name flex_r flex_jb"><text>数</text><text>量</text></view>
+				<view class="list_con">{{basicsInfo.buyCount}}</view>
+			</view>
+			<view class="order_list flex_r flex_ac flex_jb" v-if="Data.goodsType != 2 && Data.goodsType != 5 && Data.goodsType != 4 && Data.goodsType != 3 && Data.goodsType != 7">
+				<view class="flex_r flex_ac">
+					<view class="list_name flex_r flex_jb"><text>运</text><text>费</text></view>
+					<view class="list_con p_color">({{basicsInfo.goodsFreightMsg}})</view>
+				</view>
+				<view class="list_con">￥{{basicsInfo.goodsFreight}}</view>
+			</view>
+			<view class="order_list flex_r flex_ac flex_jb" v-if="Data.goodsType == 2">
+				<view class="flex_r flex_ac">
+					<view class="list_name flex_r flex_jb"><text>茶</text><text>宝</text></view>
+					<view class="list_con p_color">(可用{{basicsInfo.Integral}})</view>
+				</view>
+				<view class="list_con">{{basicsInfo.goodsTeaInt}}茶宝</view>
+			</view>
+			<view class="order_list flex_r flex_ac flex_jb" v-if="Data.goodsType == 2">
+				<view class="flex_r flex_ac">
+					<view class="list_name flex_r flex_jb"><text>批</text><text>发</text><text>积</text><text>分</text></view>
+					<view class="list_con p_color">(可用{{basicsInfo.PfIntegral}})</view>
+				</view>
+				<view class="list_con">{{basicsInfo.goodsPfInt}}批发积分</view>
+			</view>
+			<view class="order_list flex_r flex_ac flex_jb" v-if="Data.goodsType != 5">
+				<view class="list_name flex_r flex_jb"><text>商</text><text>品</text><text>金</text><text>额</text></view>
+				<view class="list_con">￥{{basicsInfo.goodsTotalPrice}}</view>
+			</view>
+			<view class="order_list flex_r flex_ac flex_jb" v-if="Data.goodsType == 5">
+				<view class="list_name flex_r flex_jb"><text>消</text><text>费</text><text>积</text><text>分</text></view>
+				<view class="list_con">{{basicsInfo.stayPay}}消费积分</view>
+			</view>
+			<view class="order_list flex_r flex_ac flex_jb" v-if="Data.goodsType == 5">
+				<view class="list_name flex_r flex_jb"><text>可</text><text>用</text><text>积</text><text>分</text></view>
+				<view class="list_con">{{basicsInfo.userXfInt}}消费积分</view>
+			</view>
+			<view class="order_list flex_r flex_ac flex_jb" v-if="(!Data.payType || Data.payType == 2 || Data.payType == 6) && Data.goodsType != 7">
+				<view class="list_name flex_r flex_jb"><text>可</text><text>用</text><text>余</text><text>额</text></view>
+				<view class="list_con p_color">￥{{basicsInfo.userAccount}}</view>
+			</view>
+		</view>
+		<!-- 订单信息-end -->
+		
+		<!-- 底部操作栏 -->
+		<view class="bar flex_r flex_ac flex_jb">
+			<view class="bar_info flex_r flex_ac">待支付<text>￥{{basicsInfo.zonPirce}}</text></view>
+			<view class="pay_btn flex_r flex_ac flex_jc" @tap="payment">立即支付</view>
+		</view>
+		<!-- 底部操作栏-end -->
+	</view>
+</template>
+
+<script>
+let page = 1;
+let app=getApp();
+var appEv = app.$vm.$options;
+import { get, post, u_post } from "@/request/api.js";
+// let reqApi = new ReqApi();
+// var toPayOpre = new ToPayOpre();
+// import { ReqApi, ToPayOpre } from "../../utils/reqTools.js";
+	export default {
+		data() {
+			return {
+				Data:{},
+				goodsInfo:'', // 商品信息
+				modularName:'' ,// 商品类型
+				DefaultAddress: '' ,// 用户默认地址
+				basicsInfo:'' // 订单信息
+			};
+		},
+		onLoad:function(e){
+			this.Data = e
+			this.loadData()
+			this.loadAddress()
+		},
+		methods:{
+			loadData:function(){
+				let that = this;
+                u_post("ShuZiTeaYW/shop/confirmOrder",this.Data).then(res => {
+                    if(res.status == 200){
+                        that.goodsInfo = res.goodsInfo
+                        that.basicsInfo = res.basicsInfo
+                        that.modularName = res.modularName
+                    }
+                })
+			},
+			// 获取用户地址
+			loadAddress:function(){
+				let that = this;
+                u_post("ShuZiTeaYW/shop/userDefaultAddress").then(res => {
+                    if(res.status == 200){
+							that.DefaultAddress = res.date
+                    }
+                })
+			},
+			chooseWXaddress:function() {
+				var that = this;
+				uni.chooseAddress({
+					success: function (res) {
+						let default_address = {
+							city: res.cityName,
+							county: res.countyName,
+							address: res.detailInfo,
+							zipCode: res.postalCode,
+							province: res.provinceName,
+							mobile: res.telNumber,
+							name: res.userName
+						};
+						that.DefaultAddress = default_address;
+					},
+					fail: function (res) {
+						console.log(res);
+						if (res.errMsg == "chooseAddress:fail auth deny" || res.errMsg == "chooseAddress:fail:auth denied") {
+							that.flag = false;
+						}
+					}
+				})
+			},
+			// 支付
+			payment:function(){
+				let that = this;
+				if(this.DefaultAddress == '' && this.Data.ojsType!=2){
+					appEv.errTips('请选择地址')
+					return false
+				}
+				let data = {
+					goodsType:this.Data.goodsType,
+					buyCount:this.Data.count,
+					payType:this.Data.payType ? this.Data.payType : 1,
+					ojsType:this.Data.ojsType ? this.Data.ojsType : ''
+				}
+				if(this.Data.goodsType == 6){
+					data.shoppingCartId=this.Data.goodsId
+				}else if(this.Data.goodsType == 4){
+					data.shoppingCartId=this.Data.goodsPId
+				}else{
+					data.goodsId=this.Data.goodsId
+				}
+				if(this.Data.ojsType!=2){
+					if(this.DefaultAddress.id && this.DefaultAddress.id != ''){
+						data.addressId=this.DefaultAddress.id
+					}else{
+						data = {
+							...data,
+							province : this.DefaultAddress.province,
+							city : this.DefaultAddress.city,
+							county : this.DefaultAddress.county,
+							address : this.DefaultAddress.address,
+							name : this.DefaultAddress.name,
+							mobile : this.DefaultAddress.mobile
+						}
+					}
+				}
+				uni.showModal({
+				    title: '提示',
+				    content: '是否确认支付',
+				    success: function (res) {
+				        if (res.confirm) {
+							let info = null
+							if(that.Data.goodsType == 6 || that.Data.goodsType == 4){
+								info = reqApi.ShoppingCartBuy(data)
+							}else{
+								info = reqApi.placeOrders(data)
+							}
+				            if(info){
+				            	info.then(res => {
+				            		if(res.data.status == 200){
+				            			if(res.data.payParam){
+				            				toPayOpre.toPay(res.data.payParam, (res) => {
+				            					if (!res) {
+				            						// 支付成功
+				            						uni.redirectTo({
+				            							url: '/pages/szw-order-list/index'
+				            						})
+				            					} else {
+				            						// 支付失败
+				            						uni.redirectTo({
+				            							url: '/pages/szw-order-list/index'
+				            						})
+				            					}
+				            				});
+				            			}else{
+				            				appEv.errTips('支付成功')
+											// 支付成功
+											uni.redirectTo({
+												url: '/pages/szw-order-list/index'
+											})
+				            			}
+				            		}else{
+				            			appEv.errTips(res.data.msg)
+				            		}
+				            	})
+				            }
+				        } else if (res.cancel) {
+				            console.log('用户点击取消');
+				        }
+				    }
+				});
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+// 页面配置
+page{background: #f5f5f5;}
+.container{padding:20rpx;box-sizing: border-box;}
+// 页面配置-end
+
+// 收货地址
+.user_phone{font-size: 26rpx;color:#222;}
+.set_text{font-size: 24rpx;color:#868686;}
+.set_img{width: 24rpx;height: 24rpx;margin-right: 9rpx;}
+.add_address{width: 100%;overflow: hidden;height: 109rpx;}
+.add_icon{width: 60rpx;height: 60rpx;margin-bottom: 12rpx;}
+.user_name{font-size:32rpx;color:#000;margin-right: 46rpx;}
+.add_name{width: 448rpx;overflow: hidden;font-size: 24rpx;color:#868686;}
+.add_text{font-size: 24rpx;color:#868686;font-family: "SourceHanSansCN-Normal";}
+.address{width: 100%;overflow: hidden;padding:28rpx;box-sizing: border-box;background: #fff;border-radius: 12rpx;}
+// 收货地址-end
+
+// 商品信息
+.goods:nth-last-child(1){margin-bottom: 0;}
+.goods_num{font-size: 26rpx;color:#989898;}
+.goods_con{width: calc(100% - 202rpx - 36rpx);overflow: hidden;}
+.goods{width: 100%;overflow: hidden;margin-bottom: 20rpx;align-items: initial;}
+.goods_img{width: 202rpx;height: 140rpx;margin-right: 36rpx;border-radius: 12rpx;}
+.goods_name{font-size: 34rpx;color:#1B1B1B;font-family: "SourceHanSansCN-Bold";font-weight: bold;}
+.goods_msg{overflow: hidden;font-size: 26rpx;color:#18BB88;font-family: 'SourceHanSansCN-Medium';font-weight: 500;}
+.info_type{font-size: 30rpx;color:#353535;font-family: "SourceHanSansCN-Bold";font-weight: bold;margin-bottom: 43rpx;}
+.goods_info{width: 100%;overflow: hidden;padding: 28rpx;background: #fff;border-radius: 12rpx;box-sizing: border-box;}
+// 商品信息-end
+
+// 订单信息
+.list_name{width: 102rpx;}
+.order_list:nth-last-child(1){margin-bottom: 0;}
+.order_list{width: 100%;overflow: hidden;margin-bottom: 30rpx;}
+.list_con{font-size: 24rpx;color:#000;font-family: "SourceHanSansCN-Medium";font-weight: bold;line-height: 1;}
+.order{width: 100%;overflow: hidden;padding:28rpx;box-sizing: border-box;background: #fff;border-radius: 12rpx;}
+.list_name text{font-size: 26rpx;color:rgba(0,0,0,.8);font-family: "SourceHanSansCN-Medium";font-weight: bold;line-height: 1;}
+
+.p_color{color:#FF6D44;}
+// 订单信息-end
+
+// 底部操作栏
+.bar_info{font-size: 24rpx;color:#000;font-family: "SourceHanSansCN-Medium";font-weight: bold;}
+.bar_info text{font-size: 30rpx;color:#FF6D44;font-family: "SourceHanSansCN-Medium";font-weight: bold;}
+.pay_btn{width: 187rpx;height: 72rpx;font-size: 30rpx;font-family: "SourceHanSansCN-Medium";font-weight: bold;background: #2DB48A;border-radius: 36rpx;color:#fff;}
+.bar{width: 100%;overflow: hidden;position: fixed;bottom:0;left: 0;background: #fff;box-shadow: 0 0 10rpx rgba(0,0,0,.15);padding:14rpx 30rpx;box-sizing: border-box;}
+// 底部操作栏-end
+
+</style>

src/request/api.js

@@ -1,12 +1,13 @@
 import host from "./config.js"
 import api from "./request.js"
 var app = getApp();
+const user = uni.getStorageSync('systemUserInfo');
 
-function getUserId() {
-	var userId;
-	userId = app.globalData.systemUserInfo && app.globalData.systemUserInfo.userId ? app.globalData.systemUserInfo.userId : '';
-	return userId
-};
+// function getUserId() {
+	// var userId;
+	// userId = app.globalData.systemUserInfo && app.globalData.systemUserInfo.userId ? app.globalData.systemUserInfo.userId : '';
+	// return userId
+// };
 
 export function get(url, params, baseURL) {
 	return api({
@@ -26,7 +27,11 @@ export function post(url, params, baseURL) {
 }
 
 export function u_post(url, params, baseURL) {
-	params['userId'] = getUserId()
+	params = {
+		...params,
+		userId: user.userId
+	}
+	// params['userId'] = user.userId;
 	return api({
 		url,
 		params,