代金券订单列表+详情+若干 bug

This commit is contained in:
2025-02-14 01:35:04 +08:00
parent 1f81134eea
commit ccd5d7f9ef
25 changed files with 272 additions and 153 deletions

View File

@ -3,7 +3,7 @@ import request from './request';
export default {
category:()=>request.get('/api/merchant-categories'),
list(category_id,longitude,latitude){
const data = {longitude,latitude};
const data = {};
if(category_id){
data.category_id = category_id;
}

View File

@ -33,7 +33,15 @@ export default {
list:()=>request.get('/api/order/user/list'),
cancel:(orderid)=>request.post(`/api/order/${orderid}/user/cancel`),
merchantList:()=>request.get('/api/merchant/order/user'),
merchantDetail:(order_id)=>request.get(`/api/merchant/order/${order_id}`),
merchantDetail(order_id,longitude,latitude){
const data = {};
if(longitude&&latitude){
data.longitude = longitude;
data.latitude = latitude;
}
return request.get(`/api/merchant/order/${order_id}`,data);
},
orderQRCode:(order_id)=>request.get(`/api/merchant/order/${order_id}/verify-qrcode`),
detail:(orderid)=>request.get(`/api/order/${orderid}`)
},
coupon:{

3
app.js
View File

@ -7,9 +7,6 @@ App({
key:'accessToken',
success:(res)=>{
this.globalData.accessToken = res.data;
if(res.data){
this.getUserInfo();
}
}
})
},

View File

@ -0,0 +1,68 @@
import shopApi from '../../api/shop';
import userApi from '../../api/user';
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
calculatedPrice:{},
product:{},
isShowConfirm:false
},
/**
* 组件的方法列表
*/
methods: {
preOrder(product){
shopApi.calculateOrderPrice(product.id).then((data)=>{
this.setData({
calculatedPrice:data,
product,
isShowConfirm:true
});
})
},
getOrder(){
shopApi.order(this.data.product.id).then((data)=>{
userApi.createPayment(data.order_id,'PRODUCT').then((data)=>{
this.triggerEvent('orderCreated');
wx.requestPayment({
timeStamp:data.payment_params.timeStamp,
nonceStr:data.payment_params.nonceStr,
package:data.payment_params.package,
signType:data.payment_params.signType,
paySign:data.payment_params.paySign,
success:(res)=>{
console.log(res);
wx.navigateTo({
url: '/pages/shop/success/index',
})
},
fail:(res)=>{
console.log(res);
}
})
});
}).catch((error)=>{
this.setData({
isShowConfirm:false
})
wx.showModal({
title: error.message,
showCancel:false,
complete: (res) => {
}
})
});
},
}
})

View File

@ -0,0 +1,5 @@
{
"component": true,
"usingComponents": {},
"styleIsolation": "shared"
}

View File

@ -0,0 +1,22 @@
<page-container show="{{isShowConfirm}}" round close-on-slide-down>
<view class="content pc-content">
<view class="title">{{product.name}}</view>
<view class="tags">
<view class="tag" wx:for="{{product.tags}}"
wx:for-item="tag" wx:for-index="tIndex" wx:key="tIndex">{{tag}}</view>
</view>
<view class="spliter"></view>
<view class="price">
<view class="left">
<label class="key">团购价</label>
<label class="money">{{calculatedPrice.amount}}</label>
</view>
<view class="right">
<label class="key">赠送蜂蜜</label>
<label class="weight">{{calculatedPrice.gift_points}}克</label>
</view>
</view>
<button class="button" type="primary" bind:tap="getOrder">立即抢购</button>
</view>
</page-container>

View File

@ -0,0 +1,31 @@
.pc-content{
padding:60rpx 30rpx 0 30rpx;
}
.pc-content .title{
font-size: 40rpx;
font-weight: 500;
}
.pc-content .tags{
margin-top:20rpx;
}
.pc-content .spliter{
margin:40rpx 0;
}
.pc-content .price{
display: flex;
justify-content: space-between;
}
.pc-content .price .key{
font-size: 28rpx;
margin-right: 12rpx;
}
.pc-content .price .money{
font-size: 44rpx;
}
.pc-content .price .weight{
font-size: 44rpx;
color:#FFC300;
}
.pc-content .button{
margin:54rpx 0 50rpx;
}

View File

@ -5,7 +5,7 @@ Component({
* 组件的属性列表
*/
properties: {
data:{
shop:{
type:Object,
value:{}
}
@ -22,5 +22,10 @@ Component({
* 组件的方法列表
*/
methods: {
goToDetail(event){
wx.navigateTo({
url: `/pages/shop/detail/index?id=${this.properties.shop.id}`,
})
},
}
})

View File

@ -1,21 +1,21 @@
<view class="page-container shop-item">
<image class="logo" src="{{data.optimized_brand_image_url}}"/>
<view class="page-container shop-item" bind:tap="goToDetail">
<image class="logo" src="{{shop.optimized_brand_image_url}}"/>
<view class="content">
<view class="line1">{{data.name}}</view>
<view class="line1">{{shop.name}}</view>
<view class="line2">
<view class="line2-1">{{data.address}}</view>
<view class="line2-2">{{data.distance||''}}</view>
<view class="line2-1">{{shop.address}}</view>
<view class="line2-2">{{shop.distance||''}}</view>
</view>
<view class="promation buy">
<view class="coupon">
<label class="tag">[在线买单]</label>
<label class="detail">赠送蜂蜜{{data.pay_gift_points_rate}}%</label>
<label class="detail">赠送蜂蜜{{shop.pay_gift_points_rate}}%</label>
</view>
</view>
<view class="promation">
<view class="coupon" wx-if="{{data.featured_product}}">
<label class="tag">[{{data.featured_product.promotion_text}}]</label>
<label class="detail">{{data.featured_product.product_name}}</label>
<view class="coupon" wx:if="{{shop.featured_product}}">
<label class="tag">[{{shop.featured_product.promotion_text}}]</label>
<label class="detail">{{shop.featured_product.product_name}}</label>
</view>
</view>
</view>

View File

@ -1,5 +1,5 @@
.bg{
background: linear-gradient(180deg, #1A4DEB 62%, #F8F9FB 100%);
background: linear-gradient(180deg, #FEC400 62%, #F8F9FB 100%);
height:90vw;
width:100%;
position:absolute;

View File

@ -1,4 +1,5 @@
import userApi from '../../../api/user';
const app = getApp();
Page({
@ -6,7 +7,8 @@ Page({
* 页面的初始数据
*/
data: {
orderDetail:{}
orderDetail:{},
qrcodeUrl:''
},
goToSuccess(){
@ -29,13 +31,34 @@ Page({
* 生命周期函数--监听页面加载
*/
onLoad(options) {
userApi.order.merchantDetail(options.id).then((data)=>{
app.getLocation().then((data)=>{
this.getOrderDetail(options.id,data.longitude,data.latitude);
}).catch(()=>{
this.getOrderDetail(options.id);
});
userApi.order.orderQRCode(options.id).then((data)=>{
this.setData({
qrcodeUrl:data.qrcode_url
})
});
},
getOrderDetail(id,lng,lat){
userApi.order.merchantDetail(id,lng,lat).then((data)=>{
if(data.distance){
if(data.distance>=1000){
data.distance = parseFloat(data.distance/1000).toFixed(1)+'km';
}else{
data.distance+='m';
}
}
if(data.product_tags){
data.product_tags = data.product_tags.split(',');
}
this.setData({
orderDetail:data
})
})
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/

View File

@ -3,22 +3,21 @@
<view class="center">
<view class="name">{{orderDetail.product_name}}</view>
<view class="tags">
<view class="tag">周一至周五可用</view>
<view class="tag">免预约</view>
<view class="tag" wx:for="{{orderDetail.product_tags}}" wx:key="index">{{item}}</view>
</view>
</view>
<view class="money money-normal">{{orderDetail.order_amount}}</view>
</view>
<view class="spliter dashed"></view>
<view class="qrcode" bind:tap="goToSuccess">
二维码区域,小程序存储总量限制
<image src="{{qrcodeUrl}}" class="image"/>
</view>
</view>
<view class="page-container address">
<view class="left">
<view class="text1">{{orderDetail.merchant_name}}</view>
<view class="text2">距离 xxx km</view>
<view class="text2">距离{{orderDetail.distance}}</view>
</view>
<view class="right location">
<view class="icon-con">
@ -52,10 +51,6 @@
<view class="key">交易方式</view>
<view class="value">微信支付</view>
</view>
<view class="kv">
<view class="key">手机号码</view>
<view class="value">{{}}</view>
</view>
<view class="kv">
<view class="key">下单时间</view>
<view class="value">{{orderDetail.create_time}}</view>

View File

@ -29,6 +29,10 @@
margin: 0 auto;
background-color: #999;
}
.prd-info .qrcode .image{
width:100%;height:100%;
vertical-align: middle;
}
.address{
display: flex;

View File

@ -30,13 +30,32 @@ Page({
url: `/pages/order/detail/index?id=${orderId}`,
})
},
goToShopDetail(event){
const item = event.currentTarget.dataset.item;
//缺少 shopid
// wx.navigateTo({
// url: `/pages/shop/detail/index?id=${item.id}`,
// })
},
goToCouponDetail(event){
const id = event.currentTarget.dataset.id;
wx.navigateTo({
url: `/pages/order/detail-group/index?id=${id}`,
})
},
orderAgain(event){
const order = event.currentTarget.dataset.item;
const orderConfirm = this.selectComponent("#merchantOrderConfirm");
orderConfirm.preOrder({
id:order.merchant_product_id,
name:order.product_name,
tags:order.product_tags
});
},
orderCreated(){
//创建成功之后刷新 order 列表,成功之后会跳转,不用刷新
this.loadMerchantOrderList();
},
/**
* 生命周期函数--监听页面加载
*/
@ -64,6 +83,11 @@ Page({
loadMerchantOrderList(){
//代金券列表
userApi.order.merchantList().then((data)=>{
data.map((item)=>{
if(item.product_tags){
item.product_tags = item.product_tags.split(',');
}
})
this.setData({
couponList:data
})

View File

@ -1,6 +1,7 @@
{
"usingComponents": {
"nav-bar":"/components/navbar"
"nav-bar":"/components/navbar",
"merchant-order":"/components/merchantOrder"
},
"navigationStyle": "custom"
}

View File

@ -38,7 +38,7 @@
</view>
<view class="bill-list" wx:if="{{tabIndex==1}}" wx:for="{{merchantOrderList}}" wx:key="index">
<view class="item">
<image class="image" src="{{item.product_image}}"/>
<image class="image" src="{{item.merchant_image}}"/>
<view class="name">{{item.merchant_name}}</view>
<view class="amount">-{{item.amount}}</view>
<view class="kv">
@ -68,27 +68,26 @@
</view>
</view>
<view class="group-list" wx:if="{{tabIndex==2}}">
<view class="item status-waiting" wx:for="{{couponList}}" wx:key="index" bind:tap="goToCouponDetail" data-id="{{item.order_id}}">
<view class="item" wx:for="{{couponList}}" wx:key="index" bind:tap="goToCouponDetail" data-id="{{item.order_id}}">
<view class="head">
<view class="name">
<view class="name" capture-catch:tap="goToShopDetail" data-item="{{item}}">
<label>{{item.merchant_name}}</label>
<image class="icon" src="/assets/icon/order/right-arrow@2x.png"/>
</view>
<view class="status">{{merchantOrderStatusKV[item.status]}}</view>
<view class="status {{item.status}}">{{merchantOrderStatusKV[item.status]}}</view>
</view>
<view class="content">
<view class="center">
<view>{{item.product_name}}</view>
<view class="tags">
<view class="tag">周一至周五可用</view>
<view class="tag">免预约</view>
<view class="tag" wx:for="{{item.product_tags}}" wx:key="index">{{item}}</view>
</view>
</view>
<view class="money money-normal">{{item.order_amount}}</view>
</view>
<view class="btns">
<button class="button button1" plain size="mini">再来一单</button>
<button class="button button2" plain size="mini">查看券码</button>
<button class="button button1" plain size="mini" capture-catch:tap="orderAgain" data-item="{{item}}">再来一单</button>
<button class="button button2" plain size="mini" wx:if="{{item.status==merchantOrderStatus.unverified}}">查看券码</button>
</view>
</view>
</view>
@ -96,3 +95,6 @@
<image class="icon" src="/assets/icon/order/empty@2x.png"/>
<view class="text">暂无相关订单</view>
</view>
<merchant-order id="merchantOrderConfirm" bind:orderCreated="orderCreated"/>

View File

@ -94,11 +94,14 @@
.group-list .item{
background-color: #fff;
border-radius: 18rpx;
padding: 30rpx 40rpx;
padding: 20rpx 40rpx;
margin:24rpx 0;
}
.group-list .item.status-waiting .status{
color: #1A4DEB;
.group-list .item .status{
color:var(--main-color);
}
.group-list .item .status.VERIFIED,.group-list .item .status.REFUNDED{
color:var(--main-font-color);
}
.group-list .head{
display: flex;
@ -109,6 +112,7 @@
flex:1;
display: flex;
align-items: center;
padding:10rpx 0;
}
.group-list .head .name .icon{
width:28rpx;height:28rpx;
@ -117,7 +121,7 @@
.group-list .content{
display: flex;
margin-top:30rpx;
margin-top:20rpx;
}
.group-list .content .image{
width:160rpx;height:160rpx;
@ -138,8 +142,11 @@
padding:16rpx 26rpx;
border-radius: 12rpx;
}
.group-list .btns .button1{
color: #555555;
border-color: rgba(153, 153, 153, 0.5);
}
.group-list .btns .button2{
color: #1A4DEB;
margin-left: 20rpx;
}

View File

@ -19,47 +19,11 @@ Page({
showConfirm(event){
const currentProduct = event.currentTarget.dataset.item;
shopApi.calculateOrderPrice(currentProduct.id).then((data)=>{
this.setData({
calculatedPrice:data,
currentProduct,
isShowConfirm:true
});
})
},
getOrder(){
shopApi.order(this.data.currentProduct.id).then((data)=>{
userApi.createPayment(data.order_id,'PRODUCT').then((data)=>{
wx.requestPayment({
timeStamp:data.payment_params.timeStamp,
nonceStr:data.payment_params.nonceStr,
package:data.payment_params.package,
signType:data.payment_params.signType,
paySign:data.payment_params.paySign,
success:(res)=>{
console.log(res);
wx.navigateTo({
url: '/pages/shop/success/index',
})
},
fail:(res)=>{
console.log(res);
}
})
});
}).catch((error)=>{
this.setData({
isShowConfirm:false
})
wx.showModal({
title: error.message,
showCancel:false,
complete: (res) => {
}
})
});
const orderConfirm = this.selectComponent("#merchantOrderConfirm");
orderConfirm.preOrder(currentProduct);
},
/**
* 生命周期函数--监听页面加载
*/
@ -82,11 +46,13 @@ Page({
},
getOrderDetail(id,lng,lat){
shopApi.detail(id,lng,lat).then((data)=>{
if(data.distance&&data.distance>=1000){
if(data.distance){
if(data.distance>=1000){
data.distance = parseFloat(data.distance/1000).toFixed(1)+'km';
}else{
data.distance+='m';
}
}
this.setData({
detail:data
});

View File

@ -1,6 +1,7 @@
{
"usingComponents": {
"nav-bar":"/components/navbar"
"nav-bar":"/components/navbar",
"merchant-order":"/components/merchantOrder"
},
"navigationStyle": "custom"
}

View File

@ -26,7 +26,7 @@
<view class="address">
<view class="left">
<view class="l1">{{detail.address}}</view>
<view class="l2" wx-if="{{detail.distance}}">距离{{detail.distance}}</view>
<view class="l2" wx:if="{{detail.distance}}">距离{{detail.distance}}</view>
</view>
<view class="right">
<view class="icon-con">
@ -76,26 +76,4 @@
</view>
</view>
<page-container show="{{isShowConfirm}}" round close-on-slide-down>
<view class="content pc-content">
<view class="title">{{currentProduct.name}}</view>
<view class="tags">
<view class="tag" wx:for="{{currentProduct.tags}}"
wx:for-item="tag" wx:for-index="tIndex" wx:key="tIndex">{{tag}}</view>
</view>
<view class="spliter"></view>
<view class="price">
<view class="left">
<label class="key">团购价</label>
<label class="money">{{calculatedPrice.amount}}</label>
</view>
<view class="right">
<label class="key">赠送蜂蜜</label>
<label class="weight">{{calculatedPrice.gift_points}}克</label>
</view>
</view>
<button class="button" type="primary" bind:tap="getOrder">立即抢购</button>
</view>
</page-container>
<merchant-order id="merchantOrderConfirm"/>

View File

@ -187,34 +187,4 @@
padding:18rpx 46rpx;
margin-left:40rpx;
}
.pc-content{
padding:60rpx 30rpx 0 30rpx;
}
.pc-content .title{
font-size: 40rpx;
font-weight: 500;
}
.pc-content .tags{
margin-top:20rpx;
}
.pc-content .spliter{
margin:40rpx 0;
}
.pc-content .price{
display: flex;
justify-content: space-between;
}
.pc-content .price .key{
font-size: 28rpx;
margin-right: 12rpx;
}
.pc-content .price .money{
font-size: 44rpx;
}
.pc-content .price .weight{
font-size: 44rpx;
color:#FFC300;
}
.pc-content .button{
margin:54rpx 0 50rpx;
}

View File

@ -22,12 +22,6 @@ Page({
this.setData({tabIndex})
this.loadList(cid);
},
goToDetail(event){
const item = event.currentTarget.dataset.item;
wx.navigateTo({
url: `/pages/shop/detail/index?id=${item.id}`,
})
},
loadList(cid){
shopApi.list(cid,this.data.lng,this.data.lat).then((data)=>{
data.items.map((item)=>{

View File

@ -13,8 +13,8 @@
</view>
<view class="shop-list">
<block wx-if="{{shopList.length>0}}">
<shop-item wx:for="{{shopList}}" data="{{item}}" data-item="{{item}}" bind:tap="goToDetail" wx:key="index">
<block wx:if="{{shopList.length>0}}">
<shop-item wx:for="{{shopList}}" shop="{{item}}" data-item="{{item}}" wx:key="index">
</shop-item>
</block>

View File

@ -1,4 +1,6 @@
import shopApi from '../../../api/shop';
const app = getApp();
Page({
/**
@ -12,7 +14,23 @@ Page({
* 生命周期函数--监听页面加载
*/
onLoad(options) {
shopApi.list().then((data)=>{
app.getLocation().then((res)=>{
this.getProductList(res.longitude,res.latitude);
}).catch(()=>{
this.getProductList();
})
},
getProductList(lng,lat){
shopApi.list(null,lng,lat).then((data)=>{
data.items.map((item)=>{
if(item.distance){
if(item.distance>=1000){
item.distance = parseFloat(item.distance/1000).toFixed(1)+'km';
}else{
item.distance+='m';
}
}
});
this.setData({
shopList:data.items
});

View File

@ -4,7 +4,7 @@
<button class="button" plain bind:tap="back">前往查看订单</button>
</view>
<view class="shop-list">
<shop-item wx:for="{{shopList}}" data="{{item}}" data-item="{{item}}" bind:tap="goToDetail" wx:key="index">
<shop-item wx:for="{{shopList}}" shop="{{item}}" data-item="{{item}}" wx:key="index">
</shop-item>
</view>