Augcl
/
massage-front
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

feat: 支付页面(暂存);

pull/1/head
fox 2 months ago
parent
a4f00134fb
commit
fa48f27716
9 changed files with 121 additions and 124 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +8
    -2
      components/product/productCard.vue
  2. +109
    -121
      pages_order/order/createOrder.vue
  3. +4
    -1
      pages_order/product/productDetail.vue
  4. BIN
      pages_order/static/createOrder/account.png
  5. BIN
      pages_order/static/createOrder/coupon.png
  6. BIN
      pages_order/static/createOrder/icon-account.png
  7. BIN
      pages_order/static/createOrder/icon-coupon.png
  8. BIN
      pages_order/static/createOrder/icon-wx.png
  9. BIN
      pages_order/static/createOrder/wx.png

+ 8
- 2
components/product/productCard.vue View File

@ -1,5 +1,5 @@
<template> <template>
<view class="card flex product" :class="[direction]" @click="$emit('click')">
<view class="card flex product product-card__view" :class="[direction]" @click="$emit('click')">
<view class="img" :class="[ data.isRecommend ? 'is-recommend' : '']"> <view class="img" :class="[ data.isRecommend ? 'is-recommend' : '']">
<image :src="data.imgUrl" mode="aspectFill"></image> <image :src="data.imgUrl" mode="aspectFill"></image>
<image v-if="data.isRecommend" class="mark" src="@/static/image/home/mark-recommend.png"></image> <image v-if="data.isRecommend" class="mark" src="@/static/image/home/mark-recommend.png"></image>
@ -29,7 +29,9 @@
<text>{{ `已售出 ${data.sales}单` }}</text> <text>{{ `已售出 ${data.sales}单` }}</text>
</view> </view>
</view> </view>
<button plain class="btn" @click="goToPlaceOrder(data.id)">立即下单</button>
<template v-if="!readonly">
<button plain class="btn" @click="goToPlaceOrder(data.id)">立即下单</button>
</template>
</view> </view>
</view> </view>
</template> </template>
@ -56,6 +58,10 @@
direction: { direction: {
type: String, type: String,
default: 'horizontal' // horizontal | vertical default: 'horizontal' // horizontal | vertical
},
readonly: {
type: Boolean,
default: false,
} }
}, },
data() { data() {


+ 109
- 121
pages_order/order/createOrder.vue View File

@ -1,66 +1,13 @@
<template> <template>
<view class="page"> <view class="page">
<!-- 导航栏 --> <!-- 导航栏 -->
<navbar :title="titleMap[type]" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" />
<navbar title="商品支付" leftClick @leftClick="$utils.navigateBack" color="#fff" />
<view class="bac"></view>
<view class="box">
<!-- 送礼 -->
<view class="give-type" v-if="type == 'give'">
<view class="tab-box">
<view class="tab-item" :class="{'active': isGive === 1}"
@click="isGive = 1">
<text>单人礼包</text>
<text class="desc">送给1位好友，可同时送多件礼品</text>
</view>
<view class="tab-item" :class="{'active': isGive === 2}"
@click="isGive = 2">
<text>多人礼包</text>
<text class="desc">送给多位好友，每人1件礼品</text>
</view>
<view class="tab-item" :class="{'active': isGive === 3}"
@click="isGive = 3">
<text>抽奖礼包</text>
<text class="desc">好友抽奖，中奖者获得礼品</text>
</view>
</view>
<!-- <view class="tips">
<text>支付后分享给好友收礼</text>
<text class="guide" @click="$refs.popup.open('gift_guide')">指南</text>
</view> -->
</view>
<!-- 多人礼包人数 -->
<view class="cell-item" v-if="type == 'give' && isGive === 2">
<view class="cell-item-left">
<uv-icon name="gift" size="40" color="#E3441A"></uv-icon>
<view class="user-name">礼包份数</view>
</view>
<view class="cell-item-right">
<view class="stepper">
<text class="minus" :class="{disabled: multiNum <= multiMinNum}"
@click="multiNum > multiMinNum && multiNum--">-</text>
<text class="num">{{multiNum}}</text>
<text class="plus" :class="{disabled: multiNum >= multiMaxNum}"
@click="multiNum < multiMaxNum && multiNum++">+</text>
</view>
</view>
</view>
<!-- 抽奖礼包说明 -->
<view class="lucky-box" v-if="type == 'give' && isGive === 3">
<view class="title">抽奖规则</view>
<view class="tips-list">
<view class="tip-item">• 好友参与抽奖</view>
<view class="tip-item">• 系统随机抽取中奖者</view>
<view class="tip-item">• 中奖者填写地址领取礼品</view>
</view>
</view>
<view class="content">
<!-- 商品详情 --> <!-- 商品详情 -->
<view class="product-item" v-for="item in payOrderProduct" :key="item.id">
<productCard :data="payOrderProduct[0]" :readonly="true"></productCard>
<!-- <view class="product-item" v-for="item in payOrderProduct" :key="item.id">
<view class="img-box"> <view class="img-box">
<image :src="item.image" mode="aspectFill"></image> <image :src="item.image" mode="aspectFill"></image>
</view> </view>
@ -80,58 +27,26 @@
<view class="desc">已售出 {{ item.payNum }}单</view> <view class="desc">已售出 {{ item.payNum }}单</view>
</view> </view>
</view> </view>
</view>
<!-- 地址 -->
<view @click="openAddress" class="cell-item">
<view class="cell-item-left">
<image src="@/pages_order/static/createOrder/address.png" mode="widthFix" class="cell-icon"></image>
<view class="user-name">{{ address.name }}</view>
<view class="user-address">{{ address.address }}</view>
</view>
<view class="cell-item-right">
<uv-icon name="arrow-right"></uv-icon>
</view>
</view>
</view> -->
<view class="cell-list">
<view class="card payment">
<uv-radio-group v-model="payMethod"> <uv-radio-group v-model="payMethod">
<view style="width: 710rpx;">
<!-- 账户余额 -->
<view class="cell-item">
<view class="cell-item-left">
<image src="@/pages_order/static/createOrder/account.png" mode="widthFix" class="cell-icon">
</image>
<view class="user-name">账户余额</view>
<view class="descript">(余额: {{ riceInfo.balance }})</view>
</view>
<view class="cell-item-right">
<uv-radio activeColor="#E3441A"
size="40rpx"
icon-size="30rpx"
:name="1"/>
</view>
</view>
<!-- 微信支付 -->
<view class="cell-item">
<view class="cell-item-left">
<image src="@/pages_order/static/createOrder/wx.png" mode="widthFix" class="cell-icon">
</image>
<view class="user-name">微信支付</view>
<view class="descript"></view>
</view>
<view class="cell-item-right">
<uv-radio
activeColor="#E3441A"
size="40rpx"
icon-size="30rpx"
:name="0"/>
</view>
</view>
<view class="flex payment-item">
<image class="icon" src="../static/createOrder/icon-wx.png" mode="widthFix"></image>
<text class="label">微信支付</text>
<uv-radio :name="0" activeColor="#84A73F" size="39rpx" icon-size="39rpx"/>
</view>
<view class="flex payment-item">
<image class="icon" src="../static/createOrder/icon-account.png" mode="widthFix"></image>
<text class="label">账户余额<text class="desc">{{ `（余额:￥${riceInfo.balance || 0}）` }}</text></text>
<uv-radio :name="1" activeColor="#84A73F" size="39rpx" icon-size="39rpx"/>
</view> </view>
</uv-radio-group> </uv-radio-group>
</view> </view>
</view>
<template v-if="false">
<!-- 优惠券 --> <!-- 优惠券 -->
<view @click="openCoupon" class="cell-item"> <view @click="openCoupon" class="cell-item">
@ -170,15 +85,8 @@
立即支付 立即支付
</view> </view>
</view> </view>
</view>
<!-- 地址选择 -->
<uv-popup ref="addressPopup" :round="30" style="padding-bottom: 90rpx;">
<addressList ref="addressList" height="60vh" @select="selectAddress" />
<view class="add-btn">
<view @click="$utils.navigateTo('/pages_order/mine/address')" class="button-submit">新增地址</view>
</view>
</uv-popup>
</template>
<!-- 优惠券选择--> <!-- 优惠券选择-->
<uv-popup ref="couponPopup" :round="30"> <uv-popup ref="couponPopup" :round="30">
@ -191,6 +99,8 @@
</template> </template>
<script> <script>
import productCard from '@/components/product/productCard.vue'
import addressList from '../components/address/addressList.vue' import addressList from '../components/address/addressList.vue'
import couponList from '@/components/couponList/couponList.vue' import couponList from '@/components/couponList/couponList.vue'
@ -200,6 +110,8 @@
export default { export default {
components: { components: {
productCard,
addressList, addressList,
couponList couponList
}, },
@ -215,15 +127,15 @@
agreement: false, agreement: false,
coupon: {}, coupon: {},
payMethod : 0, payMethod : 0,
isGive : 0,
type : '',
titleMap : {
def : '确认订单',
give : '送礼清单',
},
multiNum: 2, // 多人礼包人数
multiMinNum: 2, // 最小人数
multiMaxNum: 100, // 最大人数
isGive : 0,
type : '',
titleMap : {
def : '确认订单',
give : '送礼清单',
},
multiNum: 2, // 多人礼包人数
multiMinNum: 2, // 最小人数
multiMaxNum: 100, // 最大人数
} }
}, },
computed: { computed: {
@ -250,6 +162,8 @@
this.$store.commit('getUserInfo') this.$store.commit('getUserInfo')
}, },
onShow() { onShow() {
// todo
return
this.getAddressList() this.getAddressList()
this.getCouponList() this.getCouponList()
}, },
@ -427,6 +341,49 @@
.page { .page {
overflow: auto; overflow: auto;
padding-bottom: 300rpx; padding-bottom: 300rpx;
/deep/ .nav-bar__view {
padding-bottom: 190rpx;
background-image: linear-gradient(#84A73F, #D8FF8F);
}
.content {
position: absolute;
z-index: 999;
transform: translateY(-118rpx);
width: 100vw;
padding: 0 13rpx;
box-sizing: border-box;
}
/deep/ .product-card__view {
// margin: 0 13rpx;
padding: 27rpx 25rpx;
// width: calc(100vw - 13rpx*2);
width: 100%;
box-sizing: border-box;
// transform: translateY(-50%);
.img {
width: 184rpx;
height: 184rpx;
}
.title {
margin-bottom: 14rpx;
}
.price {
margin-top: 15rpx;
}
.sales {
margin-top: 15rpx;
}
}
.bac { .bac {
width: 100%; width: 100%;
height: 100px; height: 100px;
@ -772,4 +729,35 @@
} }
} }
} }
.payment {
margin-top: 23rpx;
padding: 22rpx 42rpx 34rpx 41rpx;
color: #000000;
font-size: 28rpx;
&-item {
width: 100%;
& + & {
margin-top: 38rpx;
}
}
.icon {
width: 46rpx;
height: auto;
margin-right: 18rpx;
}
.label {
flex: 1;
}
.desc {
color: #999999;
}
}
</style> </style>

+ 4
- 1
pages_order/product/productDetail.vue View File

@ -1,7 +1,7 @@
<template> <template>
<view class="page"> <view class="page">
<!-- 导航栏 --> <!-- 导航栏 -->
<navbar title="商品详情" leftClick @leftClick="$utils.navigateBack" />
<navbar title="商品详情" leftClick @leftClick="$utils.navigateBack" color="#fff" />
<uv-swiper :list="bannerList" indicator indicatorMode="dot" height="475rpx"></uv-swiper> <uv-swiper :list="bannerList" indicator indicatorMode="dot" height="475rpx"></uv-swiper>
@ -146,10 +146,12 @@
const TEMP_BANNER_IMG_URL = 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280' const TEMP_BANNER_IMG_URL = 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280'
this.productDetail = { this.productDetail = {
imgUrl: TEMP_BANNER_IMG_URL,
image: new Array(4).fill(1).map(() => TEMP_BANNER_IMG_URL), image: new Array(4).fill(1).map(() => TEMP_BANNER_IMG_URL),
price: 99, price: 99,
sales: 235, sales: 235,
title: '60分钟肩颈推拿按摩', title: '60分钟肩颈推拿按摩',
desc: '疏通经络 放松肌肉',
tags: ['专业技师', '舒适环境', '深度放松'], tags: ['专业技师', '舒适环境', '深度放松'],
details: '<p>这里是商品详情..............<br/>这里是商品详情..............</p>' details: '<p>这里是商品详情..............<br/>这里是商品详情..............</p>'
} }
@ -254,6 +256,7 @@
} }
.detail { .detail {
margin-top: 12rpx;
padding: 18rpx 28rpx; padding: 18rpx 28rpx;
background-color: $uni-fg-color; background-color: $uni-fg-color;


BIN
pages_order/static/createOrder/account.png View File

Before After
Width: 48  |  Height: 39  |  Size: 839 B

BIN
pages_order/static/createOrder/coupon.png View File

Before After
Width: 60  |  Height: 60  |  Size: 1.5 KiB

BIN
pages_order/static/createOrder/icon-account.png View File

Before After
Width: 46  |  Height: 45  |  Size: 896 B

BIN
pages_order/static/createOrder/icon-coupon.png View File

Before After
Width: 46  |  Height: 31  |  Size: 1.8 KiB

BIN
pages_order/static/createOrder/icon-wx.png View File

Before After
Width: 46  |  Height: 39  |  Size: 1.8 KiB

BIN
pages_order/static/createOrder/wx.png View File

Before After
Width: 58  |  Height: 48  |  Size: 2.2 KiB

Write Preview
Loading…
Cancel
Save