deliveryman/dm-wechat-mini
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

商品界面初步修改

Browse Source
This commit is contained in:
潇 2025-03-21 19:30:53 +08:00
parent 6a0d84395e
commit 27ea50ba7e
15 changed files with 320 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
.gitignore vendored Normal file
View File

@ -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?

8
api/shop.js
View File

@ -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}),

1
app.js
View File

@ -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',

BIN
assets/icon/shop/house.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
assets/icon/shop/user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

29
package-lock.json generated Normal file
View File

@ -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"
}
}
}

15
package.json Normal file
View File

@ -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"
}
}

36
pages/shop/detail/index.js
View File

@ -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();
console.log(windowInfo);
this.setData({
windowInfo:windowInfo,
scrollViewHeight:windowInfo.screenHeight-251-windowInfo.statusBarHeight-53
})
this.data.productId = options.id;
const shopId = options.id;
app.getLocation().then((data)=>{
this.getOrderDetail(shopId,data.longitude,data.latitude);
}).catch(()=>{
this.getOrderDetail(shopId);
})
shopApi.productList(shopId).then((data)=>{
data.items.map((item)=>{
item.tags = item.tags.split(',')
})
this.setData({
productList:data.items
});
})
// app.getLocation().then((data)=>{
// this.getDetail(data.longitude,data.latitude);
// }).catch(()=>{
this.getDetail();
// })
},
getOrderDetail(id,lng,lat){
shopApi.detail(id,lng,lat).then((data)=>{
getDetail(lng,lat){
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';

6
pages/shop/detail/index.json
View File

@ -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"
}

97
pages/shop/detail/index.wxml
View File

@ -1,68 +1,53 @@
<!-- <nav-bar background="#fff" share back></nav-bar> -->
<view class="page-container shop-info">
<view class="head">
<view class="left">
<view class="name">{{detail.name}}</view>
<view class="time">营业时间 {{detail.business_hours}}</view>
<view class="top">
<nav-bar background="#fff" back background="transparent"></nav-bar>
<image class="image" src="{{detail.optimized_image_url}}"/>
</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="left">
<view class="l1">{{detail.address}}</view>
<view class="l2" wx:if="{{detail.distance}}">距离{{detail.distance}}</view>
<view class="user">
<image class="avatar" src="{{detail.avatar||'/assets/icon/my/avatar.png'}}"/>
<view class="center">
<view class="u-name">仙人模斗</view>
<view class="building">七栋二单元</view>
</view>
<view class="right" bind:tap="navToMap">
<view class="icon-con">
<image class="icon" src="/assets/icon/shop/location@2x.png"/>
<image src="/assets/icon/shop/phone-black.png" class="icon-phone"/>
</view>
<view class="text">导航</view>
</view>
<view class="right" bind:tap="makePhoneCall">
<view class="icon-con">
<image class="icon" src="/assets/icon/shop/phone-black.png"/>
<view class="page-container address">
<view class="head">配送地址</view>
<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>

224
pages/shop/detail/index.wxss
View File

@ -29,164 +29,92 @@
width:100%;
height:100%;
}
.nav-bar{
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;
.page-container .head{
font-size: 32rpx;
font-weight: 500;
}
.group-buy .item .tips{
color: #888888;
font-size: 30rpx;
.page-container .head .time{
font-size: 34rpx;
color:#FF8C12;
margin-left:20rpx;
}
.group-buy .item .bl-money{
/* display: flex;
align-items: center; */
margin-top:40rpx;
.top{
position: relative;
height:500rpx;
}
.group-buy .item .money{
color:#ff0000;
font-size: 48rpx;
}
.group-buy .item .money-disable{
margin-left: 16rpx;
font-size: 26rpx;
}
.group-buy .item .promation{
background-color: #FFC300;
font-size:22rpx;
.top .image{
width:100%;height:100%;
position: absolute;
top:0;left:0;
padding:8rpx 16rpx;
border-radius: 9px 3px 9px 0px;
color:#fff;
z-index: -1;
}
.group-buy .item .promation .image{
width:28rpx;height:28rpx;
margin-right: 10rpx;
vertical-align: text-top;
.product-info .p-name{
font-size: 34rpx;
font-weight: 600;
}
.group-buy .item .bottom{
.product-info .info{
display: flex;
margin-top:30rpx;
align-items: flex-end;
align-items: center;
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{
border-radius: 60rpx;
font-size: 28rpx;
line-height: 1;
padding:18rpx 46rpx;
margin-left:40rpx;
.product-info .spliter{
margin:30rpx 0;
}
.product-info .user{
display: flex;
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;
}

2
pages/shop/index/index.js
View File

@ -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{

25
pages/shop/index/index.wxml
View File

@ -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>

78
pages/shop/index/index.wxss
View File

@ -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;
}

8
project.config.json
View File

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