修改问题

src/pages/product/productTeaBaby.vue

@@ -1,23 +1,27 @@
 <template>
-    <view class="container">
-        <!-- 商品列表 -->
-        <view class="goods_con flex_r flex_ac flex_wrap">
-            <view class="goods" v-for="(item,index) in goods" :key="index" @tap="NavToGoodsDetail(item.id)">
-                <image class="goods_img" :src="item.original_img" mode=""></image>
-                <view class="goods_info">
-                    <view class="info_title">{{item.goods_name}}</view>
-                    <!-- <view class="info_msg ellipsis">{{item.goodsMsg}}</view> -->
-                    <view class="info_option flex_r flex_ac flex_jb">
-                        <view class="info_price">{{item.price}} <text>茶宝</text></view>
-                        <!-- <image class="info_cart" src="/static/cart.png" mode="" @tap.stop="OpenShopping(index)"></image> -->
-                    </view>
-                    <!-- <view class="info_hint">赠送{{item.give_integral ? item.give_integral + '批发积分' : item.give_cha_bao + '茶宝'}}</view> -->
-                </view>
-            </view>
+  <view class="container">
+    <!-- 批发专区 -->
+    <view
+      class="who_list flex_r"
+      v-for="(item, index) in who_list"
+      :key="index"
+      @tap="NavToGoodsDetail(item.id)"
+    >
+      <image class="list_img" :src="item.original_img"></image>
+      <view class="list_info flex_c flex_jb">
+        <view class="info_name">{{ item.goods_name }}</view>
+        <view class="info_msg">
+          <view></view>
+          <span v-if="Number(item.price) != 0">{{ item.price }}元</span>
+          <span v-if="Number(item.cha_bao_price) != 0 && Number(item.price) != 0">+</span>
+          <span v-if="Number(item.cha_bao_price) != 0">{{ item.cha_bao_price }}茶宝</span>
         </view>
-        <!-- 商品列表-end -->
-
+        <view class="info_btn_con flex_r flex_je">
+          <view class="info_btn flex_r flex_ac flex_jc">购买</view>
+        </view>
+      </view>
     </view>
+  </view>
 </template>
 <script>
 let page = 1;
@@ -26,345 +30,150 @@ var appEv = app.$vm.$options;
 // let reqApi = new ReqApi();
 // import { ReqApi } from "@/utils/reqTools.js";
 import { get, post, u_post } from "@/request/api.js";
-import uniPopup from '@/components/uni-popup/uni-popup.vue'
 export default {
-    components: { uniPopup },
-    data() {
-        return {
-            goods: [], // 商品列表
-            goodsIndex: '', // 选中猜你喜欢的下标
-            buyNum: 1, // 购买数量
-            checked: false, // 是否同意协议
-            type: '',
-        };
-    },
-    onLoad(e) {
-        this.type = e.type
-    },
-    onShow() {
-        page = 1;
-        this.goods = [];
-        this.loadData()
-    },
-    methods: {
-        loadData() {
-            let that = this;
-            let data = {
-                page: page,
-                type: this.type
-            }
-            post("goods/goodsList", data).then(res => {
-                if (res.code === 0) {
-                    let obj = res.data.data
-                    if(page == 1) that.goods = []
-                    if (obj.length > 0) {
-                        obj.forEach(e => {
-                            that.goods.push(e)
-                        });
-                    } else {
-                        page = -1;
-                        appEv.errTips('暂无更多')
-                    }
-                } else {
-                    page = -1;
-                    appEv.errTips('暂无更多')
-                }
-
-            })
-        },
-        // 跳转到商品详情页
-        NavToGoodsDetail(id, type) {
-            uni.navigateTo({
-                url: '/pages/product/p_details?id=' + id + '&type=' + this.type
-            })
-        },
-        // 打开加入购物车窗口
-        OpenShopping(index) {
-            this.checked = false
-            this.goodsIndex = this.goods[index]
-            this.$refs.shopping.open()
-        },
-        // 购买数量更改
-        bindChange: function(e) {
-            this.buyNum = e;
-        },
-        // 点击关闭弹窗
-        closeBtn: function() {
-            this.$refs.shopping.close()
-        },
-        // 点击同意协议
-        checkboxChange: function(e) {
-            let index = e.detail.value.indexOf('1');
-            if (index != -1) {
-                this.checked = true
-            } else {
-                this.checked = false
-            }
-        },
-        // 点击添加购物车
-        ToPayPage: function() {
-            if (!this.checked) {
-                appEv.errTips('请勾选同意购买协议')
-                return false
-            }
-            let that = this;
-            let data = {
-                goodsId: this.goodsIndex.goodsId,
-                buyCount: this.buyNum,
-                specialArea: 1
-            }
-            const info = reqApi.conShoppingCart(data)
-            if (info) {
-                info.then(res => {
-                    if (res.data.status == 200) {
-                        appEv.errTips('添加成功')
-                        that.checked = false
-                        that.buyNum = 1
-                        that.$refs.shopping.close()
-                    } else {
-                        appEv.errTips(res.data.msg)
-                    }
-                })
-            }
-        },
-        getProPage: function() {
-            uni.navigateTo({
-                url: '/pages/protocol/index?type=' + 1
-            })
+  data() {
+    return {
+      who_list: [], // 茶宝兑换商品列表
+      type: "",
+    };
+  },
+  onLoad(e) {
+    this.type = e.type;
+  },
+  onShow() {
+    page = 1;
+    this.who_list = [];
+    this.loadData();
+  },
+  methods: {
+    loadData() {
+      let that = this;
+      uni.showLoading({ mask: true });
+      let data = {
+        page: page,
+        type: this.type,
+      };
+      post("goods/goodsList", data).then((res) => {
+        uni.hideLoading();
+        if (res.code === 0) {
+          let obj = res.data.data;
+          if (page == 1) that.who_list = [];
+          if (obj.length > 0) {
+            obj.forEach((e) => {
+              that.who_list.push(e);
+            });
+          } else {
+            page = -1;
+            appEv.errTips("暂无更多");
+          }
+        } else {
+          page = -1;
+          appEv.errTips("暂无更多");
         }
+      });
     },
-    onShareAppMessage: function() {
-        let userinfo = uni.getStorageSync('userinfo');
-        var path = '/pages/product/productRetail?agentId=1';
-        if (userinfo.user_id) {
-            path = '/pages/product/productRetail?agentId=' + userinfo.user_id;
-        }
-        var title = `让数字经济赋能美好生活！`;
-        return {
-            title: title,
-            path: path
-        }
+    // 跳转到商品详情页
+    NavToGoodsDetail: function (id) {
+      uni.navigateTo({
+        url: "/pages/product/p_details?id=" + id + "&type=" + this.type,
+      });
     },
-    /**
-     * 页面上拉触底事件的处理函数
-     */
-    onReachBottom: function() {
-        if (page != -1) {
-            var that = this;
-            setTimeout(function() {
-                ++page;
-                that.loadData();
-            }, 800);
-        }
+  },
+
+  onShareAppMessage: function () {
+    let userinfo = uni.getStorageSync("userinfo");
+    var path = "/pages/product/productWholesale?agentId=1";
+    if (userinfo.user_id) {
+      path = "/pages/product/productWholesale?agentId=" + userinfo.user_id;
     }
-}
+    var title = `让数字经济赋能美好生活！`;
+    return {
+      title: title,
+      path: path,
+    };
+  },
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+    if (page != -1) {
+      var that = this;
+      setTimeout(function () {
+        ++page;
+        that.loadData();
+      }, 800);
+    }
+  },
+};
 </script>
 <style lang="scss">
 // 页面配置
 page {
-    background: #F4F4F4;
+  background: #f5f5f5;
 }
 
 .container {
-    padding: 22rpx 30rpx;
-    box-sizing: border-box;
+  padding: 18rpx 30rpx 0;
+  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_btn_con {
+  width: 100%;
+  overflow: hidden;
 }
 
-.info_hint {
-    font-size: 22rpx;
-    color: #787878;
+.list_info {
+  width: calc(100% - 326rpx - 36rpx);
+  overflow: hidden;
 }
 
-.info_option {
-    width: 100%;
-    overflow: hidden;
+.list_img {
+  width: 300rpx;
+  height: 200rpx;
+  margin-right: 35rpx;
+  border-radius: 12rpx;
 }
 
-.goods_img {
-    width: 100%;
-    height: 232rpx;
-    display: block;
+.info_btn {
+  width: 134rpx;
+  height: 50rpx;
+  background: #2db48a;
+  font-size: 30rpx;
+  color: #fff;
+  border-radius: 12rpx;
 }
 
 .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
+  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>