支付成功
This commit is contained in:
潇
parent
fe6d62071f
commit
d52c9b94a4
@ -12,7 +12,11 @@ const sendRequest = (options)=>{
|
||||
wx.request({
|
||||
url: `${baseUrl}${options.url}`,
|
||||
success:(result)=>{
|
||||
rs(result.data.data);
|
||||
if(result.data.code==200){
|
||||
rs(result.data.data);
|
||||
}else{
|
||||
rj(result.data)
|
||||
}
|
||||
},
|
||||
method:options.method,
|
||||
data:options.data,
|
||||
|
||||
15
api/shop.js
Normal file
15
api/shop.js
Normal file
@ -0,0 +1,15 @@
|
||||
import request from './request';
|
||||
|
||||
export default {
|
||||
category:()=>request.get('/api/merchant-categories'),
|
||||
list:(cid)=>request.get('/api/merchant',cid?{category_id:cid}:{}),
|
||||
detail:(id)=>request.get(`/api/merchant/${id}`),
|
||||
productList:(merchant_id)=>request.get('/api/merchant/product/list',merchant_id?{merchant_id}:{}),
|
||||
|
||||
order(merchant_product_id,order_amount){
|
||||
const data = {};
|
||||
return request.post('/api/merchant/order',{merchant_product_id,order_amount})
|
||||
},
|
||||
calculatePrice:(merchant_product_id)=>request.post('/api/merchant/order/calculate-price',{merchant_product_id}),
|
||||
merchantPay:(merchant_id,amount)=>request.post('/api/merchant-pay',{merchant_id,amount})
|
||||
}
|
||||
@ -21,6 +21,11 @@ export default {
|
||||
},
|
||||
order:{
|
||||
pre:(data)=>request.post('/api/order/pre-order',data),
|
||||
real:(data)=>request.post('/api/order',data)
|
||||
real:(data)=>request.post('/api/order',data),
|
||||
list:()=>request.get('/api/order/user/list'),
|
||||
merchantList:()=>request.get('/api/merchant/order/user')
|
||||
},
|
||||
createPayment(order_id,order_type){
|
||||
return request.post('/api/wechat/create-payment',{order_id,order_type});
|
||||
}
|
||||
}
|
||||
4
app.json
4
app.json
@ -20,7 +20,9 @@
|
||||
"pages/my/coupon/index",
|
||||
"pages/my/money/index",
|
||||
"pages/my/firend/index",
|
||||
"pages/my/setting/index"
|
||||
"pages/my/setting/index",
|
||||
"pages/shop/bill/index",
|
||||
"pages/shop/bill_success/index"
|
||||
],
|
||||
"window": {
|
||||
"navigationBarTextStyle": "black",
|
||||
|
||||
26
app.wxss
26
app.wxss
@ -2,11 +2,12 @@
|
||||
page{
|
||||
font-size:32rpx;
|
||||
line-height: 1;
|
||||
background-color:#F5F5F5;
|
||||
color: #222222;
|
||||
padding-bottom:80rpx;
|
||||
--main-bgclolor:#F5F5F5;
|
||||
--main-color:#FEC400;
|
||||
--main-hover-color:#fcce39;
|
||||
background-color:var(--main-bgclolor);
|
||||
}
|
||||
|
||||
button{
|
||||
@ -34,6 +35,10 @@ button[type=primary]{
|
||||
background-color:var(--main-color);
|
||||
color:#222222;
|
||||
}
|
||||
button[plain]{
|
||||
border: 1rpx solid rgba(255, 195, 0, 0.5);
|
||||
color: #FFC300;
|
||||
}
|
||||
button:not([plain])[type=primary]:hover{
|
||||
background-color:var(--main-hover-color);
|
||||
}
|
||||
@ -49,8 +54,8 @@ button[type=primary][plain]{
|
||||
padding:28rpx 25rpx;
|
||||
}
|
||||
button[type=primary][plain]:hover{
|
||||
border-color: #1A4DEB;
|
||||
color:#1A4DEB;
|
||||
border-color:var(--main-color);
|
||||
color:var(--main-color);
|
||||
}
|
||||
|
||||
radio-group{
|
||||
@ -277,4 +282,19 @@ page-container .content{
|
||||
|
||||
navigator button{
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
.list-empty{
|
||||
text-align: center;
|
||||
padding:60rpx 0 30rpx 0;
|
||||
}
|
||||
.list-empty .title{
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.list-empty .sub-title{
|
||||
font-size: 26rpx;
|
||||
color: #A1A1A1;
|
||||
margin-top:24rpx;
|
||||
}
|
||||
@ -5,7 +5,10 @@ Component({
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
|
||||
data:{
|
||||
type:Object,
|
||||
value:{}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@ -1,18 +1,24 @@
|
||||
<view class="page-container shop-item">
|
||||
<image class="logo" src="/assets/imgs/for_test/jd.png"/>
|
||||
<image class="logo" src="{{data.brand_image_url}}"/>
|
||||
<view class="content">
|
||||
<view class="line1">京东养车</view>
|
||||
<view class="line1">{{data.name}}</view>
|
||||
<view class="line2">
|
||||
<view class="line2-1">燎原路228号御景湾</view>
|
||||
<view class="line2-2">100m</view>
|
||||
<view class="line2-1">{{data.address}}</view>
|
||||
<view class="line2-2">{{data.distance||''}}</view>
|
||||
</view>
|
||||
<view class="line-coupon">
|
||||
<view class="promation">
|
||||
<view class="coupon" wx-if="{{data.featured_product}}">
|
||||
<label class="tag">[新客专享]</label>
|
||||
{{data.featured_product.product_name}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="line-coupon">
|
||||
<label class="money">22.9</label>
|
||||
<label class="money-disable">22.9</label>【5座】标准洗车
|
||||
</view>
|
||||
<view class="line-coupon">
|
||||
<label class="money">22.9</label>
|
||||
<label class="money-disable">22.9</label>【5座】标准洗车
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
@ -9,15 +9,16 @@
|
||||
margin-left:18rpx;
|
||||
}
|
||||
.shop-item .line1{
|
||||
line-height: 1.4;
|
||||
font-size:34rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.shop-item .line2{
|
||||
line-height: 1.4;
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
color:#888888;
|
||||
margin-top:26rpx;
|
||||
padding-bottom:16rpx;
|
||||
margin-top:14rpx;
|
||||
}
|
||||
.shop-item .line2-1{
|
||||
flex:1;
|
||||
@ -46,4 +47,27 @@
|
||||
.shop-item .money-disable{
|
||||
font-size: 28rpx;
|
||||
margin-left:10rpx;
|
||||
}
|
||||
|
||||
.shop-item .promation{
|
||||
margin-top:30rpx;
|
||||
}
|
||||
|
||||
.shop-item .promation .coupon{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.shop-item .promation .coupon::before{
|
||||
content: '券';
|
||||
background-color: #FFC300;
|
||||
font-size: 20rpx;
|
||||
padding:6rpx;
|
||||
border-radius: 4rpx;
|
||||
color:#fff;
|
||||
}
|
||||
.shop-item .promation .tag{
|
||||
font-weight: 500;
|
||||
margin:0 16rpx;
|
||||
color:#FFC300;
|
||||
}
|
||||
@ -27,17 +27,3 @@
|
||||
width:36rpx;height:36rpx;
|
||||
padding:10rpx;
|
||||
}
|
||||
|
||||
.list-empty{
|
||||
text-align: center;
|
||||
padding:60rpx 0 30rpx 0;
|
||||
}
|
||||
.list-empty .title{
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.list-empty .sub-title{
|
||||
font-size: 26rpx;
|
||||
color: #A1A1A1;
|
||||
margin-top:24rpx;
|
||||
}
|
||||
@ -1,11 +1,14 @@
|
||||
// pages/order/index/index.js
|
||||
import userApi from '../../../api/user';
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
tabIndex:0
|
||||
tabIndex:0,
|
||||
orderList:[],
|
||||
merchantOrderList:[]
|
||||
},
|
||||
changeTab(event){
|
||||
const tabIndex = event.currentTarget.dataset.index;
|
||||
@ -26,7 +29,16 @@ Page({
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
userApi.order.list().then((data)=>{
|
||||
this.setData({
|
||||
orderList:data.items
|
||||
})
|
||||
});
|
||||
userApi.order.merchantList().then((data)=>{
|
||||
this.setData({
|
||||
merchantOrderList:data
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
</view>
|
||||
|
||||
<view class="order-list" wx:if="{{tabIndex==0}}">
|
||||
<view class="item" wx:for="{{3}}" wx:key="index" bind:tap="goToDetail">
|
||||
<view class="item" wx:for="{{orderList}}" wx:key="index" bind:tap="goToDetail">
|
||||
<view class="head">
|
||||
<view class="icon-con">
|
||||
<image class="icon" src="/assets/icon/order/package@2x.png"/>
|
||||
@ -21,8 +21,8 @@
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="spliter"></view>
|
||||
<view class="address">朝阳时代西锦12栋1单元2072</view>
|
||||
<view class="time">下单时间：2024-12-07 10:58:31</view>
|
||||
<view class="address">{{item.address.community_name}}{{item.address.address_detail}}</view>
|
||||
<view class="time">下单时间：{{item.create_time}}</view>
|
||||
<view class="pay" wx:if="{{index==2}}">
|
||||
<view class="left">
|
||||
<label>跑腿费用</label>
|
||||
@ -34,24 +34,24 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-list" wx:if="{{tabIndex==1}}">
|
||||
<view class="item status-waiting" wx:for="{{3}}" wx:key="index" bind:tap="goToGroupDetail">
|
||||
<view class="item status-waiting" wx:for="{{merchantOrderList}}" wx:key="index" bind:tap="goToGroupDetail">
|
||||
<view class="head">
|
||||
<view class="name">
|
||||
<label>椰岛造型</label>
|
||||
<label>{{item.merchant_name}}</label>
|
||||
<image class="icon" src="/assets/icon/order/right-arrow@2x.png"/>
|
||||
</view>
|
||||
<view class="status">待使用</view>
|
||||
<view class="status">{{item.status}}</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<image class="image" src="/assets/imgs/for_test/woman.png"/>
|
||||
<image class="image" src="{{item.product_image}}"/>
|
||||
<view class="center">
|
||||
<view>【洗吹】精致造型</view>
|
||||
<view>{{item.product_name}}</view>
|
||||
<view class="tags">
|
||||
<view class="tag">周一至周五可用</view>
|
||||
<view class="tag">免预约</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="money money-normal">9.9</view>
|
||||
<view class="money money-normal">{{item.order_amount}}</view>
|
||||
</view>
|
||||
<view class="btns">
|
||||
<button class="button button1" plain size="mini">再来一单</button>
|
||||
|
||||
115
pages/shop/bill/index.js
Normal file
115
pages/shop/bill/index.js
Normal file
@ -0,0 +1,115 @@
|
||||
import shopApi from '../../../api/shop';
|
||||
import userApi from '../../../api/user';
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
shopId:'',
|
||||
shopName:'',
|
||||
amount:null,
|
||||
timer:null,
|
||||
checkedAmount:{}
|
||||
},
|
||||
inputAmount(){
|
||||
clearTimeout(this.data.timer);
|
||||
this.data.timer = setTimeout(()=>{
|
||||
this.checkAmount();
|
||||
},500)
|
||||
},
|
||||
checkAmount(){
|
||||
if(this.data.amount){
|
||||
shopApi.merchantPay(this.data.shopId,this.data.amount).then((data)=>{
|
||||
this.setData({
|
||||
checkedAmount:data
|
||||
})
|
||||
});
|
||||
}else{
|
||||
this.setData({
|
||||
checkedAmount:{}
|
||||
})
|
||||
}
|
||||
},
|
||||
merchantPay(){
|
||||
shopApi.merchantPay(this.data.shopId,this.data.amount).then((data)=>{
|
||||
userApi.createPayment(data.order_id,'ONLINE_PAY').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/bill_success/index?name=${this.data.shopName}&amount=${this.data.amount}`,
|
||||
})
|
||||
},
|
||||
fail:(res)=>{
|
||||
console.log(res);
|
||||
}
|
||||
})
|
||||
})
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.setData({
|
||||
shopId:options.id,
|
||||
shopName:options.name
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
4
pages/shop/bill/index.json
Normal file
4
pages/shop/bill/index.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
11
pages/shop/bill/index.wxml
Normal file
11
pages/shop/bill/index.wxml
Normal file
@ -0,0 +1,11 @@
|
||||
<view class="page-container">
|
||||
<view class="input-area">
|
||||
<input class="input" type="number" placeholder="请输入消费金额"
|
||||
bindinput="inputAmount" model:value="{{amount}}"/>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<label class="key">蜂蜜 (克)</label>
|
||||
<label class="value">{{checkedAmount.gift_points||0}}</label>
|
||||
</view>
|
||||
</view>
|
||||
<button type="primary" class="button" bind:tap="merchantPay" disabled="{{amount==''}}">快捷买单</button>
|
||||
39
pages/shop/bill/index.wxss
Normal file
39
pages/shop/bill/index.wxss
Normal file
@ -0,0 +1,39 @@
|
||||
.page-container{
|
||||
margin-top:40rpx;
|
||||
}
|
||||
.page-container .input-area{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
border-bottom:1rpx solid rgba(153, 153, 153, 0.3);
|
||||
font-weight: bold;
|
||||
padding-top:60rpx;
|
||||
}
|
||||
.page-container .input-area::before{
|
||||
content: '¥';
|
||||
font-size: 50rpx;
|
||||
padding-bottom:40rpx;
|
||||
}
|
||||
.page-container .input{
|
||||
font-size: 56rpx;
|
||||
flex: 1;
|
||||
margin-left:30rpx;
|
||||
height:136rpx;
|
||||
}
|
||||
.page-container .bottom{
|
||||
margin:34rpx 0 10rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.page-container .bottom .key{
|
||||
font-size: 32rpx;
|
||||
flex: 1;
|
||||
}
|
||||
.page-container .bottom .value{
|
||||
font-size: 44rpx;
|
||||
font-weight: 500;
|
||||
color: #FFC300;
|
||||
}
|
||||
|
||||
.button{
|
||||
margin:50rpx 24rpx!important;
|
||||
}
|
||||
74
pages/shop/bill_success/index.js
Normal file
74
pages/shop/bill_success/index.js
Normal file
@ -0,0 +1,74 @@
|
||||
// pages/shop/bill_success/index.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
shopName:'',
|
||||
amount:0
|
||||
},
|
||||
back(){
|
||||
wx.navigateBack({
|
||||
delta:2
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.setData({
|
||||
shopName:options.name,
|
||||
amount:options.amount
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
4
pages/shop/bill_success/index.json
Normal file
4
pages/shop/bill_success/index.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
13
pages/shop/bill_success/index.wxml
Normal file
13
pages/shop/bill_success/index.wxml
Normal file
@ -0,0 +1,13 @@
|
||||
<view class="success">
|
||||
<view class="head">
|
||||
<icon class="icon" type="success" size="120rpx" color="#FFC300"/>
|
||||
<view class="title">支付成功</view>
|
||||
<view class="money money-normal">{{amount}}</view>
|
||||
</view>
|
||||
|
||||
<view class="shop">
|
||||
<label class="key">付款商户</label>
|
||||
<label class="value">{{shopName}}</label>
|
||||
</view>
|
||||
<button class="button" bind:tap="back">完成</button>
|
||||
</view>
|
||||
42
pages/shop/bill_success/index.wxss
Normal file
42
pages/shop/bill_success/index.wxss
Normal file
@ -0,0 +1,42 @@
|
||||
.success{
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
height: 100%;width:100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.success .head{
|
||||
padding:200rpx 0 80rpx 0;
|
||||
}
|
||||
.success .title{
|
||||
font-size: 36rpx;
|
||||
margin-top:30rpx;
|
||||
}
|
||||
.success .money{
|
||||
font-size: 70rpx;
|
||||
margin-top:50rpx;
|
||||
}
|
||||
.success .button{
|
||||
background: rgba(153, 153, 153, 0.15);
|
||||
position: absolute;
|
||||
bottom:180rpx;left:calc(50% - 170rpx);
|
||||
width:340rpx;
|
||||
}
|
||||
.shop{
|
||||
border-top:12rpx solid var(--main-bgclolor);
|
||||
border-bottom:12rpx solid var(--main-bgclolor);
|
||||
height: 110rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding:0 30rpx;
|
||||
}
|
||||
.shop .key{
|
||||
flex:1;
|
||||
text-align: left;
|
||||
font-size: 30rpx;
|
||||
color: #555555;
|
||||
}
|
||||
.shop .value{
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -1,29 +1,72 @@
|
||||
// pages/shop/detail/index.js
|
||||
import shopApi from '../../../api/shop';
|
||||
import userApi from '../../../api/user';
|
||||
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
isShowConfirm:false
|
||||
isShowConfirm:false,
|
||||
detail:{},
|
||||
productList:[],
|
||||
currentProduct:{},
|
||||
calculatedPrice:{},
|
||||
calculating:false
|
||||
},
|
||||
|
||||
showConfirm(){
|
||||
this.setData({
|
||||
isShowConfirm:true
|
||||
showConfirm(event){
|
||||
const currentProduct = event.currentTarget.dataset.item;
|
||||
shopApi.calculatePrice(currentProduct.id).then((data)=>{
|
||||
this.setData({
|
||||
calculatedPrice:data,
|
||||
currentProduct,
|
||||
isShowConfirm:true
|
||||
});
|
||||
})
|
||||
},
|
||||
goToSuccess(){
|
||||
wx.navigateTo({
|
||||
url: '/pages/shop/success/index',
|
||||
})
|
||||
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);
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
const shopId = options.id;
|
||||
shopApi.detail(shopId).then((data)=>{
|
||||
this.setData({
|
||||
detail:data
|
||||
});
|
||||
});
|
||||
shopApi.productList(shopId).then((data)=>{
|
||||
data.items.map((item)=>{
|
||||
item.tags = item.tags.split(',')
|
||||
})
|
||||
this.setData({
|
||||
productList:data.items
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"usingComponents": {
|
||||
"navBar":"/components/navbar"
|
||||
},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
<view class="swiper-container">
|
||||
<!-- <view class="swiper-container">
|
||||
<swiper class="swiper" >
|
||||
<swiper-item class="item">
|
||||
<image class="image" src="/assets/imgs/for_test/1.jpg" mode="aspectFit"/>
|
||||
@ -12,21 +12,27 @@
|
||||
<label class="text">1/2</label>
|
||||
<image src="/assets/icon/shop/right-arrow@2x.png" class="right-arrow"/>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<navBar/>
|
||||
<view class="page-container shop-info">
|
||||
<view class="name">椰岛造型</view>
|
||||
<view class="time">营业时间 10:00-22:00</view>
|
||||
<view class="head">
|
||||
<view class="left">
|
||||
<view class="name">{{detail.name}}</view>
|
||||
<view class="time">营业时间 {{detail.business_hours}}</view>
|
||||
</view>
|
||||
<image class="image" wx:if="{{detail.images.length>0}}" src="{{detail.images[0].image_url}}"/>
|
||||
</view>
|
||||
<view class="spliter"></view>
|
||||
<view class="address">
|
||||
<view class="left">
|
||||
<view class="l1">温江区光华大道三段1588号1栋合生汇…</view>
|
||||
<view class="l2">距离958m</view>
|
||||
<view class="l1">{{detail.address}}</view>
|
||||
<view class="l2" wx-if="{{detail.distance}}">距离{{detail.distance}}</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="icon-con">
|
||||
<image class="icon" src="/assets/icon/shop/location@2x.png"/>
|
||||
</view>
|
||||
<view class="text">导航</view>
|
||||
<view class="text">地图</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="icon-con">
|
||||
@ -37,35 +43,31 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page-container group-buy">
|
||||
<view class="head">
|
||||
<image class="h-icon" src="/assets/icon/shop/group-buy@2x.png"/>
|
||||
<view class="h-right">
|
||||
<image class="avatar" src="/assets/imgs/for_test/avatar.png"/>
|
||||
<label class="text">刚刚参与团购</label>
|
||||
<view class="group-buy">
|
||||
<view class="page-container item">
|
||||
<view class="left">
|
||||
<view class="title">快捷买单</view>
|
||||
<view class="bl-money">
|
||||
<label class="tips">在线买单 赠送蜂蜜</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>
|
||||
<view class="item" wx:for="{{2}}" wx:key="index">
|
||||
<image class="image" src="/assets/imgs/for_test/woman.png"/>
|
||||
<view class="page-container item ticket" wx:for="{{productList}}" wx:key="index">
|
||||
<view class="left">
|
||||
<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">
|
||||
<view class="title">【督导】洗剪吹+修眉</view>
|
||||
<view class="tags">
|
||||
<view class="tag">周一至周五可用</view>
|
||||
<view class="tag">随时退</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="b-left">
|
||||
<view class="bl-money">
|
||||
<label class="money">88</label>
|
||||
<label class="money-disable">188</label>
|
||||
</view>
|
||||
<view class="promation">
|
||||
<image class="icon" src="/assets/icon/shop/arrow-down@2x.png"/>
|
||||
<label>消费金抵扣</label>
|
||||
</view>
|
||||
</view>
|
||||
<button class="button" size="mini" type="primary" bind:tap="showConfirm">抢购</button>
|
||||
</view>
|
||||
<button class="button" size="mini" type="primary" loading="{{item.loading}}"
|
||||
bind:tap="showConfirm" data-item="{{item}}">抢购</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -73,35 +75,23 @@
|
||||
|
||||
<page-container show="{{isShowConfirm}}" round close-on-slide-down>
|
||||
<view class="content pc-content">
|
||||
<view class="page-container">
|
||||
<view class="info">
|
||||
<image class="image" src="/assets/imgs/for_test/woman.png"/>
|
||||
<view class="right">
|
||||
<view class="title">【督导】洗剪吹+修眉</view>
|
||||
<view class="tags">
|
||||
<view class="tag">周一至周五可用</view>
|
||||
<view class="tag">随时退</view>
|
||||
</view>
|
||||
</view>
|
||||
<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="kv">
|
||||
<view class="key">团购价</view>
|
||||
<view class="value">
|
||||
<label class="money-normal">88.0</label>
|
||||
</view>
|
||||
</view>
|
||||
<view class="spliter"></view>
|
||||
<view class="kv">
|
||||
<view class="key">消费金抵扣</view>
|
||||
<view class="value">
|
||||
<label class="money-promation">9.0</label>
|
||||
</view>
|
||||
</view>
|
||||
<view class="kv">
|
||||
<view class="key"></view>
|
||||
<view class="value">合计：<label class="money">79.0</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="goToSuccess">立即购买</button>
|
||||
|
||||
<button class="button" type="primary" bind:tap="getOrder">立即抢购</button>
|
||||
</view>
|
||||
</page-container>
|
||||
@ -30,28 +30,43 @@
|
||||
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;
|
||||
}
|
||||
.shop-info .address{
|
||||
display: flex;
|
||||
}
|
||||
.shop-info .name{
|
||||
font-weight: 500;
|
||||
font-size: 44rpx;
|
||||
font-weight: 600;
|
||||
font-size: 40rpx;
|
||||
margin-top:10rpx;
|
||||
}
|
||||
.shop-info .time{
|
||||
font: 25rpx;
|
||||
margin-top:20rpx;
|
||||
margin-top:24rpx;
|
||||
}
|
||||
.shop-info .spliter{
|
||||
margin:16rpx 0 30rpx 0;
|
||||
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;
|
||||
}
|
||||
.shop-info .address .l2{
|
||||
@ -80,60 +95,63 @@
|
||||
|
||||
.page-container.shop-info{
|
||||
margin:0;
|
||||
margin-top:-34rpx;
|
||||
padding:0 40rpx 24rpx 40rpx;
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
}
|
||||
.page-container.group-buy{
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
.group-buy{
|
||||
}
|
||||
|
||||
.group-buy .head{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.group-buy .h-icon{
|
||||
width:144rpx;height:36rpx;
|
||||
}
|
||||
.group-buy .h-right{
|
||||
font-size:24rpx;
|
||||
color: #555555;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.group-buy .h-right .avatar{
|
||||
width:32rpx;height:32rpx;
|
||||
margin-right:10rpx;
|
||||
}
|
||||
.group-buy .item{
|
||||
display: flex;
|
||||
margin:40rpx 0;
|
||||
margin:20rpx;
|
||||
display:flex;
|
||||
}
|
||||
.group-buy .item .image{
|
||||
width:200rpx;height: 200rpx;
|
||||
.group-buy .item:first-child{
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.group-buy .item .left{
|
||||
flex:1;
|
||||
}
|
||||
.group-buy .item .right{
|
||||
flex:1;
|
||||
margin-left:24rpx;
|
||||
}
|
||||
.group-buy .item .right .title{
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.group-buy .item .right .tags{
|
||||
margin-top:20rpx;
|
||||
}
|
||||
.group-buy .item .right .bl-money{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position:relative;
|
||||
}
|
||||
.group-buy .item .right .money{
|
||||
.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{
|
||||
color: #888888;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.group-buy .item .bl-money{
|
||||
/* display: flex;
|
||||
align-items: center; */
|
||||
margin-top:40rpx;
|
||||
}
|
||||
.group-buy .item .money{
|
||||
color:#EB0000;
|
||||
font-size: 32rpx;
|
||||
font-size: 48rpx;
|
||||
}
|
||||
.group-buy .item .right .money-disable{
|
||||
margin-left: 10rpx;
|
||||
font-size: 24rpx;
|
||||
.group-buy .item .money-disable{
|
||||
margin-left: 16rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.group-buy .item .promation{
|
||||
border-radius: 6rpx;
|
||||
@ -148,7 +166,7 @@
|
||||
.group-buy .item .promation .icon{
|
||||
width:24rpx;height:24rpx;
|
||||
}
|
||||
.group-buy .item .right .bottom{
|
||||
.group-buy .item .bottom{
|
||||
display: flex;
|
||||
margin-top:30rpx;
|
||||
align-items: flex-end;
|
||||
@ -158,40 +176,39 @@
|
||||
}
|
||||
.group-buy .item .button{
|
||||
border-radius: 12rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
padding:14rpx 36rpx;
|
||||
}
|
||||
|
||||
.pc-content .info{
|
||||
display: flex;
|
||||
padding-bottom:10rpx
|
||||
}
|
||||
.pc-content .info .image{
|
||||
width:160rpx;height:160rpx;
|
||||
}
|
||||
.pc-content .info .right{
|
||||
flex:1;
|
||||
padding:18rpx 46rpx;
|
||||
margin-left:40rpx;
|
||||
}
|
||||
.pc-content .info .tags{
|
||||
.pc-content{
|
||||
padding:60rpx 30rpx 0 30rpx;
|
||||
}
|
||||
.pc-content .title{
|
||||
font-size: 40rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.pc-content .tags{
|
||||
margin-top:20rpx;
|
||||
}
|
||||
.pc-content .info .title{
|
||||
font-size: 36rpx;
|
||||
.pc-content .spliter{
|
||||
margin:40rpx 0;
|
||||
}
|
||||
.pc-content .kv{
|
||||
.pc-content .price{
|
||||
display: flex;
|
||||
margin:30rpx;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.pc-content .kv .key{
|
||||
flex:1;
|
||||
font-size:29rpx;
|
||||
.pc-content .price .key{
|
||||
font-size: 28rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.pc-content .kv .value{
|
||||
font-size: 26rpx;
|
||||
.pc-content .price .money{
|
||||
font-size: 44rpx;
|
||||
}
|
||||
.pc-content .price .weight{
|
||||
font-size: 44rpx;
|
||||
color:#FFC300;
|
||||
}
|
||||
.pc-content .button{
|
||||
margin:20rpx 20rpx 50rpx;
|
||||
margin:54rpx 0 50rpx;
|
||||
}
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
// pages/savemoney/index/index.js
|
||||
import shop from '../../../api/shop';
|
||||
import shopApi from '../../../api/shop';
|
||||
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
@ -6,23 +9,38 @@ Page({
|
||||
*/
|
||||
data: {
|
||||
tabIndex:0,
|
||||
tabItems:["全部","养车用车","美容剪发","洗衣洗鞋"]
|
||||
categories:[],
|
||||
shopList:[]
|
||||
},
|
||||
changeTab(event){
|
||||
const tabIndex = event.currentTarget.dataset.index;
|
||||
const cid = event.currentTarget.dataset.cid;
|
||||
this.setData({tabIndex})
|
||||
|
||||
this.loadList(cid);
|
||||
},
|
||||
goToDetail(){
|
||||
goToDetail(event){
|
||||
const item = event.currentTarget.dataset.item;
|
||||
wx.navigateTo({
|
||||
url: '/pages/shop/detail/index',
|
||||
url: `/pages/shop/detail/index?id=${item.id}`,
|
||||
})
|
||||
},
|
||||
loadList(cid){
|
||||
shopApi.list(cid).then((data)=>{
|
||||
this.setData({
|
||||
shopList:data.items
|
||||
})
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
shopApi.category().then((data)=>{
|
||||
this.setData({
|
||||
categories:[{id:0,name:'全部'},...data.items]
|
||||
});
|
||||
})
|
||||
this.loadList();
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@ -5,29 +5,20 @@
|
||||
<view class="tips">买券自动抵扣</view>
|
||||
</view>
|
||||
<view class="btns">
|
||||
<button wx:for="{{tabItems}}" wx:key="index" class="item" size="mini"
|
||||
bind:tap="changeTab" data-index="{{index}}" type="{{tabIndex==index?'primary':''}}">
|
||||
{{item}}
|
||||
<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 class="shop-list">
|
||||
<shop-item wx:for="{{3}}" bind:tap="goToDetail" wx:key="index">
|
||||
<image class="logo" src="/assets/imgs/for_test/jd.png"/>
|
||||
<view class="content">
|
||||
<view class="line1">京东养车</view>
|
||||
<view class="line2">
|
||||
<view class="line2-1">燎原路228号御景湾</view>
|
||||
<view class="line2-2">100m</view>
|
||||
</view>
|
||||
<view class="line-coupon">
|
||||
<label class="money">22.9</label>
|
||||
<label class="money-disable">22.9</label>【5座】标准洗车
|
||||
</view>
|
||||
<view class="line-coupon">
|
||||
<label class="money">22.9</label>
|
||||
<label class="money-disable">22.9</label>【5座】标准洗车
|
||||
</view>
|
||||
</view>
|
||||
</shop-item>
|
||||
<block wx-if="{{shopList.length>0}}">
|
||||
<shop-item wx:for="{{shopList}}" data="{{item}}" data-item="{{item}}" bind:tap="goToDetail" wx:key="index">
|
||||
|
||||
</shop-item>
|
||||
</block>
|
||||
<view class="list-empty" wx:else>
|
||||
<view class="title">暂无该分类商铺</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -28,17 +28,18 @@
|
||||
|
||||
.btns{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin:24rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.btns .item{
|
||||
font-weight: normal;
|
||||
border-radius: 12rpx;
|
||||
font-size: 26rpx;
|
||||
margin:0;
|
||||
padding:18rpx 34rpx;
|
||||
line-height: 1;
|
||||
min-width: 132rpx;
|
||||
}
|
||||
.btns .item:not([type=primary]){
|
||||
background-color: #fff;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@ -1,18 +1,27 @@
|
||||
// pages/shop/success/index.js
|
||||
import shopApi from '../../../api/shop';
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
shopList:[]
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
shopApi.list().then((data)=>{
|
||||
this.setData({
|
||||
shopList:data.items
|
||||
});
|
||||
})
|
||||
},
|
||||
back(){
|
||||
wx.switchTab({
|
||||
url: '/pages/order/index/index',
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"shop-item":"/components/shopItem"
|
||||
}
|
||||
},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
@ -1,8 +1,10 @@
|
||||
<view class="success">
|
||||
<icon class="icon" type="success" size="120rpx" color="#1A4DEB"/>
|
||||
<icon class="icon" type="success" size="120rpx" color="#FFC300"/>
|
||||
<view class="text">支付成功</view>
|
||||
<button class="button" plain>前往查看订单</button>
|
||||
<button class="button" plain bind:tap="back">前往查看订单</button>
|
||||
</view>
|
||||
<view class="shop-list">
|
||||
<shop-item wx:for="{{3}}" wx:key="index"/>
|
||||
<shop-item wx:for="{{shopList}}" data="{{item}}" data-item="{{item}}" bind:tap="goToDetail" wx:key="index">
|
||||
|
||||
</shop-item>
|
||||
</view>
|
||||
@ -1,7 +1,7 @@
|
||||
.success{
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
padding:100rpx 0;
|
||||
padding:244rpx 0 100rpx 0;
|
||||
}
|
||||
.success .text{
|
||||
font-size: 36rpx;
|
||||
@ -10,7 +10,6 @@
|
||||
}
|
||||
.success .button{
|
||||
margin:100rpx 112rpx 0;
|
||||
border: 1rpx solid rgba(124, 134, 149, 0.5);
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user