商品界面初步修改

.gitignore

@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+miniprogram_npm
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

api/shop.js

@@ -11,10 +11,10 @@ export default {
     }
     return request.get(`/api/merchant/${id}`,data);
   },
-  productList:(merchant_id)=>request.get('/api/merchant/product/list',merchant_id?{merchant_id}:{}),
+  product:{
-
+    list:(merchant_id)=>request.get('/api/merchant/product/list',merchant_id?{merchant_id}:{}),
-
+    detail:(product_id)=>request.get(`/api/merchant/product/${product_id}`)
-  
+  },
   orderList:(data)=>request.get('/api/merchant-pay',data),
   //计算商品订单金额
   calculateOrderPrice:(merchant_product_id)=>request.post('/api/merchant/order/calculate-price',{merchant_product_id}),

app.js

@@ -2,6 +2,7 @@ import userApi from './api/user';
 import commonApi from './api/common';
 let token = wx.getStorageSync('accessToken');
 App({
+  towxml:require('./miniprogram_npm/@beefast-wxmp/towxml/index'),
   async onLaunch(options){
     wx.getStorage({
       key:'accessToken',

package-lock.json

@@ -0,0 +1,29 @@
+{
+  "name": "dm-wechat-mini",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "dm-wechat-mini",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "@beefast-wxmp/number-box": "^0.0.1",
+        "@beefast-wxmp/towxml": "^0.0.1"
+      }
+    },
+    "node_modules/@beefast-wxmp/number-box": {
+      "version": "0.0.1",
+      "resolved": "https://packages.aliyun.com/6486fc420ce788fc1c0798b3/npm/repo-glpby/@beefast-wxmp/number-box/-/@beefast-wxmp/number-box-0.0.1.tgz",
+      "integrity": "sha512-NLHE2n1jT5WhkYZ+CVI4lEYyHeZSS2X91ac/NmYsIhq7Pe2mJGElwSBZnSncn+4M5VFBk9xxzov+xt9kwAaW1A==",
+      "license": "ISC"
+    },
+    "node_modules/@beefast-wxmp/towxml": {
+      "version": "0.0.1",
+      "resolved": "https://packages.aliyun.com/6486fc420ce788fc1c0798b3/npm/repo-glpby/@beefast-wxmp/towxml/-/@beefast-wxmp/towxml-0.0.1.tgz",
+      "integrity": "sha512-vKp2MOBQWz44Sg+h4Czk2rymQDjEGXRUa9GOmqAUyzIAYW9zDj7lojU0eJQdGZdzO3Pggb/5NIeoDgJaM033Aw==",
+      "license": "ISC"
+    }
+  }
+}

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "dm-wechat-mini",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@beefast-wxmp/number-box": "^0.0.1",
+    "@beefast-wxmp/towxml": "^0.0.1"
+  }
+}

pages/shop/detail/index.js

@@ -10,13 +10,16 @@ Page({
    */
   data: {
     isShowConfirm:false,
+    productId:'',
     detail:{},
     productList:[],
     currentProduct:{},
     calculatedPrice:{},
     calculating:false,
     scrollViewHeight:0,
-    windowInfo:{}
+    windowInfo:{},
+
+    markdown:null
   },
 
   showConfirm(event){
@@ -30,31 +33,16 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-    const windowInfo = wx.getWindowInfo();
+    this.data.productId = options.id;
-    console.log(windowInfo);
-    this.setData({
-      windowInfo:windowInfo,
-      scrollViewHeight:windowInfo.screenHeight-251-windowInfo.statusBarHeight-53
-    })
 
-    const shopId = options.id;
+    // app.getLocation().then((data)=>{
-
+      // this.getDetail(data.longitude,data.latitude);
-    app.getLocation().then((data)=>{
+    // }).catch(()=>{
-      this.getOrderDetail(shopId,data.longitude,data.latitude);
+      this.getDetail();
-    }).catch(()=>{
+    // })
-      this.getOrderDetail(shopId);
-    })
-    shopApi.productList(shopId).then((data)=>{
-      data.items.map((item)=>{
-        item.tags = item.tags.split(',')
-      })
-      this.setData({
-        productList:data.items
-      });
-    })
   },
-  getOrderDetail(id,lng,lat){
+  getDetail(lng,lat){
-    shopApi.detail(id,lng,lat).then((data)=>{
+    shopApi.product.detail(this.data.productId,lng,lat).then((data)=>{
       if(data.distance){
         if(data.distance>=1000){
           data.distance = parseFloat(data.distance/1000).toFixed(1)+'km';

pages/shop/detail/index.json

@@ -1,6 +1,8 @@
 {
   "usingComponents": {
     "nav-bar":"/components/navbar",
-    "merchant-order":"/components/merchantOrder"
+    "towxml":"/miniprogram_npm/@beefast-wxmp/towxml/towxml",
-  }
+    "number-box":"/miniprogram_npm/@beefast-wxmp/number-box"
+  },
+  "navigationStyle": "custom"
 }

pages/shop/detail/index.wxml

@@ -1,68 +1,53 @@
-<!-- <nav-bar background="#fff" share back></nav-bar> -->
+<view class="top">
-<view class="page-container shop-info">
+  <nav-bar background="#fff" back background="transparent"></nav-bar>
-  <view class="head">
+  <image class="image" src="{{detail.optimized_image_url}}"/>
-    <view class="left">
-      <view class="name">{{detail.name}}</view>
-      <view class="time">营业时间 {{detail.business_hours}}</view>
 </view>
-    <image class="image" src="{{detail.optimized_brand_image_url}}"/>
+<view class="page-container product-info">
+  <view class="p-name">{{detail.name}}</view>
+  <view class="info">
+    <view class="tag">定时达</view>
+    <view class="desc">已售100丨自提</view>
+    <number-box class="number-box"/>
   </view>
   <view class="spliter"></view>
-  <view class="address">
+  <view class="user">
-    <view class="left">
+    <image class="avatar" src="{{detail.avatar||'/assets/icon/my/avatar.png'}}"/>
-      <view class="l1">{{detail.address}}</view>
+    <view class="center">
-      <view class="l2" wx:if="{{detail.distance}}">距离{{detail.distance}}</view>
+      <view class="u-name">仙人模斗</view>
+      <view class="building">七栋二单元</view>
     </view>
-    <view class="right" bind:tap="navToMap">
+    <image src="/assets/icon/shop/phone-black.png" class="icon-phone"/>
-      <view class="icon-con">
-        <image class="icon" src="/assets/icon/shop/location@2x.png"/>
   </view>
-      <view class="text">导航</view>
 </view>
-    <view class="right" bind:tap="makePhoneCall">
+<view class="page-container address">
-      <view class="icon-con">
+  <view class="head">配送地址</view>
-        <image class="icon" src="/assets/icon/shop/phone-black.png"/>
+  <view class="content">
+    <view class="no-address right-arrow">请选择收货地址</view>
   </view>
-      <view class="text">电话</view>
+</view>
+<view class="page-container address">
+  <view class="head">配送地址</view>
+  <view class="content">
+    <view class="row right-arrow">
+      <image class="icon" src="/assets/icon/shop/house.png"/>
+      <view class="text">朝阳时代西锦12栋1单元2072</view>
+    </view>
+    <view class="row">
+      <image class="icon" src="/assets/icon/shop/user.png"/>
+      <view class="text">周先生 18583236782</view>
     </view>
   </view>
 </view>
 
-<view class="group-buy">
-  <view class="page-container item">
-    <view class="left">
-      <view class="title">快捷买单</view>
-      <view class="bl-money">
-        <label class="tips">在线买单 赠送蜂蜜{{detail.pay_gift_points_rate}}%</label>
-      </view>
-    </view>
-    <view class="right">
-      <navigator url="/pages/shop/bill/index?id={{detail.id}}&name={{detail.name}}">
-        <button class="button" size="mini" type="primary" data-item="{{item}}">买单</button>
-      </navigator>
-    </view>
-  </view>
-  <scroll-view style="height:{{scrollViewHeight*2}}rpx;" scroll-y class="scroll-view" 
-    enhanced show-scrollbar="{{false}}">
-    <view class="page-container item ticket" wx:for="{{productList}}" wx:key="index">
-      <view class="left">
-        <view class="promation">
-          <image src="/assets/icon/shop/promation@2x.png" class="image"/>
-          <label>{{item.promotion_text}}</label>
-        </view>
-        <view class="title">{{item.name}}</view>
-        <view class="bl-money">
-          <label class="money">{{item.sale_price}}</label>
-          <label class="money-disable">{{item.product_price}}</label>
-        </view>
-      </view>
-      <view class="right">
-        <button class="button" size="mini" type="primary" loading="{{item.loading}}"
-        bind:tap="showConfirm" data-item="{{item}}">抢购</button>
-      </view>
-    </view>
-    <view class="scroll-view-dispatch"></view>
-  </scroll-view>
-</view>
 
-<merchant-order id="merchantOrderConfirm"/>
+<view class="page-container address">
+  <view class="head">
+    自提点<label class="time">3月12 16:00</label>
+  </view>
+  <view class="content">
+    <view class="row right-arrow">
+      <image class="icon" src="/assets/icon/shop/house.png"/>
+      <view class="text">朝阳时代西锦12栋1单元2072</view>
+    </view>
+  </view>
+</view>

pages/shop/detail/index.wxss

@@ -29,164 +29,92 @@
   width:100%;
   height:100%;
 }
-
+.page-container .head{
-.nav-bar{
+  font-size: 32rpx;
-  background-color: #fff;
-}
-.shop-info{}
-.shop-info .head{
-  display: flex;
-}
-.shop-info .head .left{
-  flex: 1;
-}
-.shop-info .head .image{
-  width:180rpx;height:180rpx;
-  margin-left:20rpx;
-}
-.shop-info .address{
-  display: flex;
-}
-.shop-info .name{
-  font-weight: 600;
-  font-size: 40rpx;
-  line-height: 50rpx;
-}
-.shop-info .time{
-  font: 25rpx;
-  margin-top:19rpx;
-}
-.shop-info .spliter{
-  margin:20rpx 0 24rpx 0;
-}
-.shop-info .address .left{
-  flex:1;
-  overflow: hidden;
-}
-.shop-info .address .l1{
-  font-size: 26rpx;
-  white-space: nowrap;
-  text-overflow:ellipsis;
-  overflow: hidden;
-  margin-top:6rpx;
-  color:#555555;
-}
-.shop-info .address .l2{
-  font-size: 26rpx;
-  color: #222222;
-  margin-top:40rpx
-}
-.shop-info .address .right{
-  font-size:26rpx;
-  color: #555555;
-  text-align: center;
-  margin-left: 44rpx;
-}
-.shop-info .address .icon-con{
-  padding:10rpx;
-  background: rgba(153, 153, 153, 0.1);
-  display: inline-block;
-  border-radius: 50%;
-}
-.shop-info .address .icon{
-  width:26rpx;height:26rpx;
-  vertical-align: middle;
-}
-.shop-info .address .right .text{
-  margin-top:26rpx;
-}
-
-.page-container.shop-info{
-  margin:0;
-  padding:30rpx 40rpx 24rpx 40rpx;
-  position: relative;
-  border-radius: 0;
-}
-.group-buy{
-}
-
-.group-buy .item{
-  margin:20rpx;
-  display:flex;
-  position: relative;
-  overflow: hidden;
-}
-.group-buy .item:first-child{
-  margin-bottom: 30rpx;
-}
-.group-buy .item .left{
-  flex:1;
-}
-.group-buy .item .right{
-  display: flex;
-  align-items: center;
-  position:relative;
-}
-.group-buy .item.ticket .title{
-  margin-top:40rpx;
-}
-.group-buy .item.ticket .right{
-  border-left: 1.6rpx dashed rgba(153, 153, 153, 0.3);
-}
-.group-buy .item.ticket .right::before,.group-buy .item.ticket .right::after{
-  content: '';
-  position: absolute;
-  width:24rpx;height:24rpx;
-  background-color:var(--main-bgclolor);
-  border-radius: 50%;
-  top:-42rpx;left:-12rpx;
-}
-.group-buy .item.ticket .right::after{
-  top:auto;
-  bottom:-42rpx;
-}
-.group-buy .item .title{
-  font-size: 36rpx;
   font-weight: 500;
 }
-.group-buy .item .tips{
+.page-container .head .time{
-  color: #888888;
+  font-size: 34rpx;
-  font-size: 30rpx;
+  color:#FF8C12;
+  margin-left:20rpx;
 }
-.group-buy .item .bl-money{
+
-  /* display: flex;
+
-  align-items: center; */
+.top{
-  margin-top:40rpx;
+  position: relative;
+  height:500rpx;
 }
-.group-buy .item .money{
+.top .image{
-  color:#ff0000;
+  width:100%;height:100%;
-  font-size: 48rpx;
-}
-.group-buy .item .money-disable{
-  margin-left: 16rpx;
-  font-size: 26rpx;
-}
-.group-buy .item .promation{
-  background-color: #FFC300;
-  font-size:22rpx;
   position: absolute;
   top:0;left:0;
-  padding:8rpx 16rpx;
+  z-index: -1;
-  border-radius: 9px 3px 9px 0px;
-  color:#fff;
 }
-.group-buy .item .promation .image{
+.product-info .p-name{
-  width:28rpx;height:28rpx;
+  font-size: 34rpx;
-  margin-right: 10rpx;
+  font-weight: 600;
-  vertical-align: text-top;
 }
-.group-buy .item .bottom{
+.product-info .info{
   display: flex;
-  margin-top:30rpx;
+  align-items: center;
-  align-items: flex-end;
+  font-size: 26rpx;
+  margin-top:32rpx;
 }
-.group-buy .item .b-left{
+.product-info .info .tag{
+  border: 1.2rpx solid rgba(255, 140, 18, 0.5);
+  color:#FF8C12;
+  border-radius: 6rpx;
+  padding:4rpx 6rpx;
+}
+.product-info .info .desc{
   flex:1;
+  margin-left:14rpx;
 }
-.group-buy .item .button{
+.product-info .spliter{
-  border-radius: 60rpx;
+  margin:30rpx 0;
-  font-size: 28rpx;
+}
-  line-height: 1;
+.product-info .user{
-  padding:18rpx 46rpx;
+  display: flex;
-  margin-left:40rpx;
+  align-items: center;
+}
+
+.product-info .user .avatar{
+  width:84rpx;height:84rpx;
+  border-radius: 50%;
+}
+.product-info .user .center{
+  flex:1;
+  margin-left:22rpx;
+}
+.product-info .user .building{
+  font-size: 27rpx;
+  color: #555555;
+  margin-top:16rpx;
+}
+.product-info .user .icon-phone{
+  width:36rpx;height:36rpx;
+  padding:10rpx;
+}
+
+.address .head{
+  padding-bottom:16rpx;
+}
+.address .no-address{
+  font-size: 34rpx;
+  font-weight: 500;
+  color: #555555;
+  padding:24rpx 0 14rpx 0;
+}
+.address .row{
+  display: flex;
+  align-items: center;
+  margin-top:24rpx;
+  color: #555555;
+}
+.address .icon{
+  width:28rpx;height:28rpx;
+}
+.address .text{
+  font-size: 27rpx;
+  margin-left: 20rpx;
 }

pages/shop/index/index.js

@@ -54,7 +54,7 @@ Page({
     if(cid){
       params.category_id = cid;
     }
-    shopApi.list(params).then((data)=>{
+    shopApi.product.list().then((data)=>{
       if(this.data.pager.pageIndex==0){
         this.data.shopList = data.items;
       }else{

pages/shop/index/index.wxml

@@ -6,21 +6,38 @@
       <view class="point">{{userInfo.points}}</view>
       <view class="tips">取快递自动抵扣</view>
     </view>
-    <view class="btns">
+    <!-- <view class="btns">
       <button wx:for="{{categories}}" wx:key="index" class="item" size="mini" 
         bind:tap="changeTab" data-index="{{index}}" data-cid="{{item.id}}" 
         type="{{tabIndex==index?'primary':''}}">
           {{item.name}}
         </button>
+    </view> -->
   </view>
+  <view class="main-spliter">
+    <view class="center"></view>
   </view>
-  <list-view class="main shop-list" bind:refresh="refreshList" bind:loadMore="loadList" 
+  <list-view class="main product-list" bind:refresh="refreshList" bind:loadMore="loadList" 
       refresher-triggered="{{pager.refreshTrigger}}" 
       show-load-more="{{!(shopList.length==0&&pager.loadAll)}}"
       loading="{{pager.loading}}" load-all="{{pager.loadAll}}">
-    <shop-item wx:for="{{shopList}}" shop="{{item}}" data-item="{{item}}" wx:key="index">
+    <!-- <shop-item wx:for="{{shopList}}" shop="{{item}}" data-item="{{item}}" wx:key="index">
       
-    </shop-item>
+    </shop-item> -->
+    <navigator class="item" wx:for="{{shopList}}" shop="{{item}}" data-item="{{item}}" 
+        wx:key="index" url="/pages/shop/detail/index?id={{item.id}}">
+      <view class="qty">剩{{item.qty}}份</view>
+      <image class="image" src="{{item.optimized_image_url}}"/>
+      <view class="name">
+        <view>业主丨<label class="bold">{{item.name}}</label></view>
+        <view class="money">{{item.sale_price}}</view>
+      </view>
+      <view class="desc-line">
+        <view class="tag">小时达</view>
+        <view class="desc">已售100丨赠蜂蜜丨自配送</view>
+        <view class="promotion">新人专享</view>
+      </view>
+    </navigator>
     <view class="list-empty" wx:if="{{shopList.length==0&&pager.loadAll}}">
       <view class="title">暂无该分类商铺</view>
     </view>

pages/shop/index/index.wxss

@@ -42,3 +42,81 @@
   background-color: #fff;
   font-weight: normal;
 }
+
+.product-list .item{
+  margin:20rpx;
+  padding:10rpx 10rpx 26rpx 10rpx;
+  border-radius: 18rpx;
+  background-color: #fff;
+  position: relative;
+}
+.product-list .item .qty{
+  background-color: var(--main-color);
+  position: absolute;
+  left:22rpx;top:22rpx;
+  padding:12rpx 18rpx;
+  border-radius: 8rpx;
+  font-size: 24rpx;
+  font-weight: bold;
+}
+.product-list .item .image{
+  width:100%;
+  border-radius: 10rpx;
+  height:360rpx;
+}
+.product-list .item .name{
+  display: flex;
+  justify-content: space-between;
+  font-size: 34rpx;
+  align-items: center;
+  margin-top:26rpx;
+  padding:0 14rpx 0 20rpx;
+}
+.product-list .item .bold{
+  font-size: 600;
+}
+.product-list .item .money{
+  font-size: 40rpx;
+}
+.product-list .item .desc-line{
+  margin-top:22rpx;
+  display: flex;
+  align-items: center;
+  font-size: 26rpx;
+  padding:0 14rpx 0 20rpx;
+}
+.product-list .item .tag{
+  border: 1.2rpx solid rgba(255, 140, 18, 0.5);
+  color:#FF8C12;
+  border-radius: 6rpx;
+  padding:4rpx 6rpx;
+}
+.product-list .item .desc{
+  color:#888888;
+  margin-left: 20rpx;
+  flex:1;
+}
+.product-list .item .promotion{
+  color:#FF8C12;
+  font-weight: 500;
+}
+.main-spliter::before{
+  content: '';
+  display: block;
+  border-bottom:1rpx solid #f5f5f5;
+  background-color: red;
+}
+.main-spliter .center{
+  padding:0 12rpx;
+  margin:0 auto;
+  display: inline-block;
+}
+.main-spliter .center::before{
+  content:'业主参与';
+  border-radius: 25rpx;
+  font-size: 24rpx;
+  padding:13rpx 24rpx;
+  background-color: var(--main-bgclolor);
+  border: 1rpx solid rgba(153, 153, 153, 0.3);
+  display: inline-block;
+}

project.config.json

@@ -12,7 +12,13 @@
     "minified": true,
     "enhance": true,
     "showShadowRootInWxmlPanel": true,
-    "packNpmRelationList": [],
+    "packNpmManually": true,
+    "packNpmRelationList": [
+      {
+        "packageJsonPath": "./package.json",
+        "miniprogramNpmDistDir": "./"
+      }
+    ],
     "babelSetting": {
       "ignore": [],
       "disablePlugins": [],