小程序：首页接口对接

htmldev/wxMini/app.json

@@ -8,9 +8,7 @@
     "pages/collection/collection",
     "pages/news/news",
     "pages/businessDetail/businessDetail",
-    "pages/shoppingCar/shoppingCar",
     "pages/goodsDetail/goodsDetail",
-    "pages/contactBusiness/contactBusiness",
     "pages/newGoods/newGoods",
     "pages/VR/VR",
     "pages/media/media",

htmldev/wxMini/components/business-detail-large/index.js

@@ -0,0 +1,121 @@
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {},
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    booShow: false,
+    actions: [
+      {
+        name: '呼叫',
+        value: 'makePhoneCall'
+      },
+      {
+        name: '复制号码',
+        value: 'setClipboardData'
+      },
+      {
+        name: '添加到手机通讯录',
+        value: 'addPhoneContact'
+      }
+    ],
+    businessInfo: {
+      phone: '13429176706'
+    }
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    showActionSheet() {
+      this.setData({ booShow: true })
+    },
+    hideActionSheet() {
+      this.setData({ booShow: false })
+    },
+    async onSelect(event) {
+      const { value } = event.detail
+      const { businessInfo } = this.data
+      this.hideActionSheet()
+      switch (value) {
+        case 'makePhoneCall':
+          try {
+            await wx.makePhoneCall({ phoneNumber: businessInfo.phone })
+          } catch (err) {}
+          break
+        case 'setClipboardData':
+          try {
+            await wx.setClipboardData({ data: businessInfo.phone })
+          } catch (err) {}
+          break
+        case 'addPhoneContact':
+          this.handleGetSetting()
+          break
+        default:
+      }
+    },
+    // 获取添加手机通讯录联系人权限
+    async handleGetSetting() {
+      const that = this
+
+      try {
+        const { errMsg, authSetting } = await wx.getSetting()
+        if (errMsg === 'getSetting:ok') {
+          if (authSetting['scope.addPhoneContact']) {
+            await that.addPhoneContactBridge()
+            return
+          }
+        }
+      } catch (err) {}
+
+      try {
+        await wx.authorize({ scope: 'scope.addPhoneContact' })
+        await that.addPhoneContactBridge()
+      } catch (err) {
+        wx.showModal({
+          title: '提示',
+          content: '未开启添加手机通讯录联系人权限，去设置中打开',
+          success(res) {
+            if (res.confirm) {
+              that.openSetting()
+            }
+          }
+        })
+      }
+    },
+    // 去小程序自带设置页：返回
+    async openSetting() {
+      try {
+        const openSettingData = await wx.openSetting()
+        if (openSettingData.authSetting['scope.addPhoneContact']) {
+          await this.addPhoneContactBridge()
+        }
+      } catch (err) {}
+    },
+    async addPhoneContactBridge() {
+      const { businessInfo } = this.data
+
+      try {
+        await wx.addPhoneContact({
+          firstName: 'businessInfo.phone',
+          mobilePhoneNumber: businessInfo.phone
+        })
+      } catch (err) {}
+    },
+    async openLocationBridge() {
+      try {
+        // 测试 latitude: 30.25727 longitude: 120.20523
+        await wx.openLocation({
+          latitude: 30.25727,
+          longitude: 120.20523,
+          name: '浙江省杭州市余杭区'
+        })
+      } catch (err) {}
+    }
+  }
+})

htmldev/wxMini/pages/contactBusiness/contactBusiness.json → htmldev/wxMini/components/business-detail-large/index.json

@@ -1,4 +1,5 @@
 {
+  "component": true,
   "usingComponents": {
     "van-action-sheet": "@vant/weapp/action-sheet/index"
   }

htmldev/wxMini/components/business-detail-large/index.scss

@@ -0,0 +1,61 @@
+.business-info {
+  width: 100%;
+  padding: 32rpx 0 82rpx;
+
+  .box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+
+    &.tel {
+      margin-top: 46rpx;
+    }
+  }
+
+  .label {
+    width: 112rpx;
+    height: 112rpx;
+  }
+
+  .value {
+    width: 484rpx;
+    margin-right: 62rpx;
+    line-height: 42rpx;
+    font-size: 28rpx;
+    color: rgba(0, 28, 51, 1);
+    word-break: break-all;
+    word-wrap: break-word;
+  }
+
+  .arrow {
+    width: 16rpx;
+    height: 28rpx;
+  }
+}
+
+.qrcode {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 432rpx;
+  height: 428rpx;
+  margin: 46rpx auto 0;
+  border-radius: 20rpx;
+  box-shadow: 0 4rpx 20rpx 0 rgba(0, 0, 0, 0.1);
+
+  image {
+    width: 404rpx;
+    height: 400rpx;
+    border-radius: 20rpx;
+    overflow: hidden;
+  }
+}
+
+.tip {
+  margin-top: 28rpx;
+  font-size: 24rpx;
+  line-height: 30rpx;
+  color: rgba(163, 163, 163, 1);
+  text-align: center;
+}

htmldev/wxMini/components/business-detail-large/index.wxml

@@ -0,0 +1,44 @@
+<view class="business-info">
+  <view
+    class="box"
+    bind:tap="openLocationBridge">
+    <image
+      class="label"
+      src="../../image/common/location.png"></image>
+    <view
+      class="value">地址：浙江省杭州市余杭区道良渚街道xx小区
+    </view>
+    <image
+      class="arrow"
+      src="../../image/common/arrow_2.png"></image>
+  </view>
+  <view
+    class="box tel"
+    bind:tap="showActionSheet">
+    <image
+      class="label"
+      src="../../image/common/tel.png"></image>
+    <view
+      class="value">手机：12345678900
+    </view>
+    <image
+      class="arrow"
+      src="../../image/common/arrow_2.png"></image>
+  </view>
+  <view class="qrcode">
+    <image
+      class="code"
+      src=""></image>
+  </view>
+  <view class="tip">长按扫码，添加微信</view>
+</view>
+
+<van-action-sheet
+  show="{{ booShow }}"
+  actions="{{ actions }}"
+  cancel-text="取消"
+  description="13429176706可能是一个电话号码，你可以"
+  close-on-click-overlay="{{false}}"
+  bind:cancel="hideActionSheet"
+  bind:select="onSelect"
+/>

htmldev/wxMini/pages/businessDetail/businessDetail.json

@@ -2,7 +2,8 @@
   "usingComponents": {
     "customer-tab": "../../components/customer-tab/index",
     "goods-item-large": "../../components/goods-item-large",
-    "van-loading": "@vant/weapp/loading/index"
+    "van-loading": "@vant/weapp/loading/index",
+    "business-detail-large": "../../components/business-detail-large"
   },
   "backgroundTextStyle": "dark",
   "enablePullDownRefresh": true,

htmldev/wxMini/pages/businessDetail/businessDetail.wxml

@@ -23,9 +23,7 @@
 <view
   class="business-info"
   hidden="{{active === '2'}}">
-  <text class="phone" user-select>电话：12345678900</text>
-  <text class="wechat" user-select>微信：1234567890</text>
-  <text class="introduce" user-select>巴啦啦啦，吧啦啦啦啦啦，爸爸啊爸爸爸爸爸爸，爸爸爸爸爸爸。</text>
+  <business-detail-large/>
 </view>
   <!--产品-->
 <view

htmldev/wxMini/pages/businessDetail/businessDetail.wxss

@@ -28,7 +28,6 @@
 .business-info {
   display: flex;
   flex-direction: column;
-  padding: 36rpx 42rpx 36rpx 72rpx;
 }
 
 .business-info text {

htmldev/wxMini/pages/contactBusiness/contactBusiness.js

@@ -1,167 +0,0 @@
-Page({
-
-  /**
-   * 页面的初始数据
-   */
-  data: {
-    booShow: false,
-    actions: [
-      {
-        name: '呼叫',
-        value: 'makePhoneCall'
-      },
-      {
-        name: '复制号码',
-        value: 'setClipboardData'
-      },
-      {
-        name: '添加到手机通讯录',
-        value: 'addPhoneContact'
-      }
-    ],
-    businessInfo: {
-      phone: '13429176706'
-    }
-  },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad(options) {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
-  },
-  showActionSheet() {
-    this.setData({ booShow: true })
-  },
-  hideActionSheet() {
-    this.setData({ booShow: false })
-  },
-  async onSelect(event) {
-    const { value } = event.detail
-    const { businessInfo } = this.data
-    this.hideActionSheet()
-    switch (value) {
-      case 'makePhoneCall':
-        try {
-          await wx.makePhoneCall({ phoneNumber: businessInfo.phone })
-        } catch (err) {}
-        break
-      case 'setClipboardData':
-        try {
-          await wx.setClipboardData({ data: businessInfo.phone })
-        } catch (err) {}
-        break
-      case 'addPhoneContact':
-        this.handleGetSetting()
-        break
-      default:
-    }
-  },
-  // 获取添加手机通讯录联系人权限
-  async handleGetSetting() {
-    const that = this
-
-    try {
-      const { errMsg, authSetting } = await wx.getSetting()
-      if (errMsg === 'getSetting:ok') {
-        if (authSetting['scope.addPhoneContact']) {
-          await that.addPhoneContactBridge()
-          return
-        }
-      }
-    } catch (err) {}
-
-    try {
-      await wx.authorize({ scope: 'scope.addPhoneContact' })
-      await that.addPhoneContactBridge()
-    } catch (err) {
-      wx.showModal({
-        title: '提示',
-        content: '未开启添加手机通讯录联系人权限，去设置中打开',
-        success(res) {
-          if (res.confirm) {
-            that.openSetting()
-          }
-        }
-      })
-    }
-  },
-  // 去小程序自带设置页：返回
-  async openSetting() {
-    try {
-      const openSettingData = await wx.openSetting()
-      if (openSettingData.authSetting['scope.addPhoneContact']) {
-        await this.addPhoneContactBridge()
-      }
-    } catch (err) {}
-  },
-  async addPhoneContactBridge() {
-    const { businessInfo } = this.data
-
-    try {
-      await wx.addPhoneContact({
-        firstName: 'businessInfo.phone',
-        mobilePhoneNumber: businessInfo.phone
-      })
-    } catch (err) {}
-  },
-  async openLocationBridge() {
-    try {
-      // 测试 latitude: 30.25727 longitude: 120.20523
-      await wx.openLocation({
-        latitude: 30.25727,
-        longitude: 120.20523,
-        name: '浙江省杭州市余杭区'
-      })
-    } catch (err) {}
-  }
-})

htmldev/wxMini/pages/contactBusiness/contactBusiness.scss

@@ -1,197 +0,0 @@
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 34rpx 0 68rpx;
-}
-
-.list {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  margin-bottom: 40rpx;
-}
-
-.icon-wrap {
-  display: flex;
-  width: 114rpx;
-  padding-left: 30rpx;
-
-  image {
-    width: 34rpx;
-    height: 32rpx;
-    background: pink;
-  }
-}
-
-.goods-wrap {
-  display: flex;
-  align-items: center;
-  width: calc(100% - 114rpx);
-}
-
-.photo-wrap {
-  width: 202rpx;
-  height: 194rpx;
-  border-radius: 20rpx;
-  overflow: hidden;
-
-  image {
-    display: block;
-    width: 100%;
-    height: 100%;
-    background: pink;
-  }
-}
-
-.info {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: calc(100% - 202rpx);
-  min-height: 194rpx;
-  padding: 0 30rpx 0 50rpx;
-}
-
-.name-wrap {
-  display: flex;
-  flex-direction: column;
-}
-
-.goods-name {
-  width: 100%;
-  font-size: 32rpx;
-  line-height: 46rpx;
-  color: rgba(0, 28, 51, 1);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.partner-name {
-  width: 100%;
-  font-size: 24rpx;
-  line-height: 34rpx;
-  color: rgba(163, 163, 163, 1);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.price {
-  margin-top: 10rpx;
-  font-size: 28rpx;
-  line-height: 32rpx;
-  color: rgba(0, 28, 51, 1);
-}
-
-.count-wrap {
-  display: flex;
-  align-items: center;
-}
-
-.count {
-  min-width: 69rpx;
-  font-size: 24rpx;
-  line-height: 30rpx;
-  color: rgba(0, 28, 51, 1);
-  text-align: center;
-}
-
-.del,
-.add {
-  width: 38rpx;
-  height: 36rpx;
-  background: pink;
-}
-
-.business-info {
-  width: 100%;
-
-  .label {
-    width: 100%;
-    padding-left: 36rpx;
-    font-size: 36rpx;
-    line-height: 52rpx;
-    color: rgba(0, 28, 51, 1);
-  }
-
-  .value {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding-left: 36rpx;
-    margin-top: 24rpx;
-  }
-
-  .icon-map {
-    width: 112rpx;
-    height: 112rpx;
-    border-radius: 16rpx;
-    background: pink;
-  }
-
-  .address-wrap {
-    width: 515rpx;
-    padding: 0 80rpx 0 32rpx;
-  }
-
-  .address {
-    width: 100%;
-    font-size: 26rpx;
-    line-height: 40rpx;
-    color: rgba(0, 28, 51, 1);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .phone {
-    margin-top: 8rpx;
-    font-size: 24rpx;
-    line-height: 28rpx;
-    color: rgba(163, 163, 163, 1);
-  }
-
-  .icon-arrow {
-    width: 15rpx;
-    height: 27rpx;
-    background: pink;
-  }
-}
-
-.qrcode {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 542rpx;
-  height: 542rpx;
-  margin-top: 108rpx;
-  border-radius: 20rpx;
-  box-shadow: 0 4rpx 20rpx 0 rgba(0, 0, 0, 0.1);
-
-  image {
-    width: 468rpx;
-    height: 468rpx;
-    border-radius: 20rpx;
-    overflow: hidden;
-    background: pink;
-  }
-}
-
-.tip {
-  margin-top: 26rpx;
-  font-size: 24rpx;
-  line-height: 34rpx;
-  color: rgba(163, 163, 163, 1);
-}
-
-button.btn-business[type="primary"] {
-  width: 627rpx;
-  height: 80rpx;
-  margin-top: 250rpx;
-  border-radius: 88rpx;
-  background: rgba(145, 179, 121, 1);
-  font-size: 36rpx;
-  font-weight: 500;
-}

htmldev/wxMini/pages/contactBusiness/contactBusiness.wxml

@@ -1,74 +0,0 @@
-<view class="wrapper">
-  <view
-    class="list"
-    wx:for="{{[1]}}"
-    wx:key="item">
-    <view
-      class="icon-wrap">
-      <image
-        src=""
-        hidden="{{true}}"></image>
-      <image
-        src=""
-        hidden="{{false}}"></image>
-    </view>
-    <view
-      class="goods-wrap">
-      <view class="photo-wrap">
-        <image src=""></image>
-      </view>
-      <view class="info">
-        <view class="name-wrap">
-          <text
-            class="goods-name">名字名字名字名字名字名字名字名字名字名字名字</text>
-          <text
-            class="partner-name"
-            user-select>上三村合作社名字名字名字名字名字名字名字名字名字名字名字</text>
-          <text class="price">￥12.00</text>
-        </view>
-        <view class="count-wrap">
-          <image
-            class="del"
-            src=""></image>
-          <text class="count">9</text>
-          <image
-            class="add"
-            src=""></image>
-        </view>
-      </view>
-    </view>
-  </view>
-  <view class="business-info">
-    <view class="label">商家信息</view>
-    <view
-      class="value"
-      bind:tap="openLocationBridge">
-      <image class="icon-map" src=""></image>
-      <view class="address-wrap">
-        <view class="address">地址：浙江省杭州市余杭区道浙江省杭州市余杭区道浙江省杭州市余杭区道浙江省杭州市余杭区道
-        </view>
-        <text class="phone" user-select>12345678910</text>
-      </view>
-      <image class="icon-arrow" src=""></image>
-    </view>
-  </view>
-  <view class="qrcode">
-    <image src=""></image>
-  </view>
-  <view class="tip">长按扫码，添加微信</view>
-  <button
-    class="btn-business"
-    type="primary"
-    bind:tap="showActionSheet">点击联系
-  </button>
-</view>
-
-<van-action-sheet
-  show="{{ booShow }}"
-  actions="{{ actions }}"
-  cancel-text="取消"
-  description="13429176706可能是一个电话号码，你可以"
-  close-on-click-overlay="{{false}}"
-  bind:cancel="hideActionSheet"
-  bind:select="onSelect"
-/>

htmldev/wxMini/pages/shoppingCar/shoppingCar.js

@@ -1,63 +0,0 @@
-Page({
-
-  /**
-   * 页面的初始数据
-   */
-  data: {},
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad(options) {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
-  }
-})

htmldev/wxMini/pages/shoppingCar/shoppingCar.json

@@ -1,3 +0,0 @@
-{
-  "usingComponents": {}
-}

htmldev/wxMini/pages/shoppingCar/shoppingCar.scss

@@ -1,115 +0,0 @@
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 34rpx 0;
-}
-
-.list {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  margin-bottom: 40rpx;
-}
-
-.icon-wrap {
-  display: flex;
-  width: 114rpx;
-  padding-left: 30rpx;
-
-  image {
-    width: 34rpx;
-    height: 32rpx;
-    background: pink;
-  }
-}
-
-.goods-wrap {
-  display: flex;
-  align-items: center;
-  width: calc(100% - 114rpx);
-}
-
-.photo-wrap {
-  width: 202rpx;
-  height: 194rpx;
-  border-radius: 20rpx;
-  overflow: hidden;
-
-  image {
-    display: block;
-    width: 100%;
-    height: 100%;
-    background: pink;
-  }
-}
-
-.info {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: calc(100% - 202rpx);
-  min-height: 194rpx;
-  padding: 0 30rpx 0 50rpx;
-}
-
-.name-wrap {
-  display: flex;
-  flex-direction: column;
-}
-
-.goods-name {
-  width: 100%;
-  font-size: 32rpx;
-  line-height: 46rpx;
-  color: rgba(0, 28, 51, 1);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.partner-name {
-  width: 100%;
-  font-size: 24rpx;
-  line-height: 34rpx;
-  color: rgba(163, 163, 163, 1);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.price {
-  margin-top: 10rpx;
-  font-size: 28rpx;
-  line-height: 32rpx;
-  color: rgba(0, 28, 51, 1);
-}
-
-.count-wrap {
-  display: flex;
-  align-items: center;
-}
-
-.count {
-  min-width: 69rpx;
-  font-size: 24rpx;
-  line-height: 30rpx;
-  color: rgba(0, 28, 51, 1);
-  text-align: center;
-}
-
-.del,
-.add {
-  width: 38rpx;
-  height: 36rpx;
-  background: pink;
-}
-
-button.btn-business[type="primary"] {
-  width: 627rpx;
-  height: 80rpx;
-  border-radius: 88rpx;
-  background: rgba(145, 179, 121, 1);
-  font-size: 36rpx;
-  font-weight: 500;
-}

htmldev/wxMini/pages/shoppingCar/shoppingCar.wxml

@@ -1,46 +0,0 @@
-<view class="wrapper">
-  <view
-    class="list"
-    wx:for="{{[1]}}"
-    wx:key="item">
-    <view
-      class="icon-wrap">
-      <image
-        src=""
-        hidden="{{true}}"></image>
-      <image
-        src=""
-        hidden="{{false}}"></image>
-    </view>
-    <view
-      class="goods-wrap">
-      <view class="photo-wrap">
-        <image src=""></image>
-      </view>
-      <view class="info">
-        <view class="name-wrap">
-          <text
-            class="goods-name">名字名字名字名字名字名字名字名字名字名字名字</text>
-          <text
-            class="partner-name"
-            user-select>上三村合作社名字名字名字名字名字名字名字名字名字名字名字</text>
-          <text class="price">￥12.00</text>
-        </view>
-        <view class="count-wrap">
-          <image
-            class="del"
-            src=""></image>
-          <text class="count">9</text>
-          <image
-            class="add"
-            src=""></image>
-        </view>
-      </view>
-    </view>
-  </view>
-  <!-- todo 购物车有多个商家的产品怎么办 -->
-  <button
-    class="btn-business"
-    type="primary">商家信息
-  </button>
-</view>

htmldev/wxMini/project.private.config.json

@@ -3,7 +3,19 @@
     "urlCheck": false,
     "compileHotReLoad": true
   },
-  "condition": {},
+  "condition": {
+    "miniprogram": {
+      "list": [
+        {
+          "name": "1111",
+          "pathName": "pages/businessDetail/businessDetail",
+          "query": "shop_id=3",
+          "launchMode": "default",
+          "scene": null
+        }
+      ]
+    }
+  },
   "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
   "libVersion": "2.13.2",
   "projectname": "%E5%A7%8B%E5%AE%81%E5%86%9C%E4%B8%9A"