10 changed files with 1105 additions and 846 deletions
-
14src/pages.json
-
BINsrc/static/images/icon/retail/paySuccess.png
-
BINsrc/static/images/icon/retail/storeIcon.png
-
43src/subpackage/retail/components/hover_cart_list/hover_cart_list.vue
-
221src/subpackage/retail/components/store_card_select/store_card_select.vue
-
419src/subpackage/retail/pages/confirm_goods/confirm_goods.vue
-
569src/subpackage/retail/pages/confirm_order/confirm_order.vue
-
28src/subpackage/retail/pages/index/index.vue
-
77src/subpackage/retail/pages/pay_success/pay_success.vue
|
After Width: 132 | Height: 132 | Size: 1.4 KiB |
|
After Width: 32 | Height: 30 | Size: 1.1 KiB |
@ -0,0 +1,569 @@ |
|||
<template> |
|||
<view class="cg-container"> |
|||
<view class="final-cart-list"> |
|||
<view class="final-cart-list-dialog-title"> |
|||
<view class="icon-line"> |
|||
<image mode="aspectFit" src="/static/images/icon/retail/storeIcon.png"></image> |
|||
<view>{{ curStore.name ? curStore.name : '' }}</view> |
|||
</view> |
|||
<view class="amount-line"> |
|||
<text>零售支付金额</text> |
|||
<view><text>￥</text>{{ totalPrice }}</view> |
|||
</view> |
|||
</view> |
|||
<scroll-view class="pay-way-content" :scroll-top="0" :scroll-y="true" :style="{ height:cartListFinalHeight, paddingBottom:cartListFinalPaddingBottom }"> |
|||
<view class="win-way"> |
|||
<view class="win-way-item" v-for="(item, index) in payWayList" :key="index" @click="onPayWayClick(item, index)"> |
|||
<view class="row1"> |
|||
<image :class="[item.iconClassA, item.iconClassB]" mode="aspectFit" :src="item.icon"></image> |
|||
<text>{{ item.name }}</text> |
|||
<input v-if="item.inputShow&&!storeCardSelectShow" v-model="item.inputValue" :placeholder="item.placeholderLabel" placeholder-style="win-way-item-input-placeholder"> |
|||
<image :class="[item.markClassA, item.markClassB]" mode="aspectFit" :src="item.mark"></image> |
|||
</view> |
|||
<view class="row2"> |
|||
<view v-if="item.name==='储值卡支付'&&curChoose.name==='储值卡支付'&&curStoreInfo.card_no" class="store-card-info"> |
|||
<view>储值卡卡号：<text>{{ curStoreInfo.card_no }}</text></view> |
|||
<view>微信昵称：<text>{{ curStoreInfo.nickname }}</text></view> |
|||
<view>手机号码：<text>{{ curStoreInfo.mobile }}</text></view> |
|||
<view>卡名称：<text>{{ curStoreInfo.card_name }}</text></view> |
|||
<view>卡余额：<text>￥{{ curStoreInfo.balance }}</text></view> |
|||
</view> |
|||
</view> |
|||
<view class="row3"> |
|||
<view class="bottom-line"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
|
|||
<view class="cg-footer"> |
|||
<view class="cg-footer-btn-confirm" @click="confirmPay"><button hover-class="hover-active">立即支付</button></view> |
|||
</view> |
|||
|
|||
<storeCardSelect |
|||
:show="storeCardSelectShow" :price="totalPrice" :storeId="curStore.id" |
|||
@update:onClose="showOrHideStoreCardSelect" @update:onConfirm="storeCardConfirm" |
|||
> |
|||
</storeCardSelect> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '../../../../utils/util.js'; |
|||
import tools from '../../js/tools'; |
|||
import retailServer from '../../js/retail_server'; |
|||
import retailApi from '../../js/retail_api'; |
|||
|
|||
import storeCardSelect from '../../components/store_card_select/store_card_select'; |
|||
|
|||
export default { |
|||
components: { |
|||
'storeCardSelect': storeCardSelect |
|||
}, |
|||
data() { |
|||
return { |
|||
curStore: {}, // 当前店铺信息 |
|||
cartListFinal: [], // 购物车最终列表数据 |
|||
totalPrice: 0, // 最终价格 |
|||
cartListScroll: false, // 购物车列表是否能滚动 |
|||
cartListFinalHeight: "0rpx", // 最终显示的列表高度 |
|||
cartListFinalPaddingBottom: "0rpx", // 根据是否是异形屏来设置 |
|||
|
|||
payWayList: [], // 支付方式列表 |
|||
choosePath: "/static/images/icon/retail/choose.png", |
|||
noChoosePath: "/static/images/icon/retail/noChoose.png", |
|||
curChoose: {}, |
|||
|
|||
storeCardSelectShow: false, |
|||
curStoreInfo: {} |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
let data = JSON.parse(decodeURIComponent(option.data)); |
|||
|
|||
this.curStore = data.curStore; |
|||
this.cartListFinal = []; |
|||
for (let i = 0; i < data.cartListFinal.length; ++i) { |
|||
this.cartListFinal.push(tools.getNewObj(data.cartListFinal[i])); |
|||
} |
|||
|
|||
this.fixMainHeight(); // 适配主内容高度 |
|||
this.calcTotalPrice(); // 计算总价 |
|||
this.createPayWayList(); // 创建支付方式列表 |
|||
|
|||
util.showLoad(); |
|||
setTimeout(util.hideLoad, 1000); |
|||
}, |
|||
onShow() { |
|||
this.getPaySuccess(); // 获取支付成功状态 |
|||
}, |
|||
methods: { |
|||
getPaySuccess() { |
|||
uni.getStorage({ |
|||
key: 'paySuccess', |
|||
success: function (res) { |
|||
uni.removeStorage({ |
|||
key: 'paySuccess', |
|||
success: function (res) { |
|||
uni.navigateBack({ |
|||
delta: 2 |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
fail: function(err) {}, |
|||
}); |
|||
}, |
|||
// 商品出库 |
|||
goodsRetail(info) { |
|||
let _this = this; |
|||
let data = []; |
|||
for (let i = 0; i < this.cartListFinal.length; ++i) { |
|||
if (this.cartListFinal[i].count) { |
|||
data.push({ |
|||
id: this.cartListFinal[i].id, |
|||
name: this.cartListFinal[i].erp_goods_name, |
|||
price: this.cartListFinal[i].erp_goods_price, |
|||
nums: this.cartListFinal[i].count, |
|||
unit: this.cartListFinal[i].erp_goods_unit, |
|||
}); |
|||
} |
|||
} |
|||
|
|||
let newData = { |
|||
store_id: _this.curStore.id, |
|||
goods_data: data, |
|||
pay_type: info.type, |
|||
}; |
|||
if (info.inputValue) { |
|||
newData["other_pay_type"] = info.inputValue; |
|||
} |
|||
if (info.cardNo) { |
|||
newData["card_no"] = info.cardNo; |
|||
} |
|||
|
|||
util.showLoad(); |
|||
retailServer.post({ |
|||
url: retailApi.assistantRetail, |
|||
data: newData, |
|||
isDefaultGet: false, |
|||
failMsg: '出库失败！' |
|||
}).then(res => { |
|||
if (res.data.code == 0) { |
|||
uni.setStorage({ |
|||
key: "retailStatus", |
|||
data: "true", |
|||
success: function() { |
|||
util.hideLoad(); |
|||
uni.navigateTo({ |
|||
url: `/subpackage/retail/pages/pay_success/pay_success` |
|||
}); |
|||
}, |
|||
fail: function(err) { |
|||
util.hideLoad(); |
|||
uni.navigateTo({ |
|||
url: `/subpackage/retail/pages/pay_success/pay_success` |
|||
}); |
|||
}, |
|||
}); |
|||
} |
|||
else { |
|||
util.showNone(res.data.message || '操作失败！'); |
|||
} |
|||
}); |
|||
}, |
|||
// 确认支付 |
|||
confirmPay() { |
|||
let info = { |
|||
type: 0, |
|||
inputValue: "default", |
|||
cardNo: "default" |
|||
}; |
|||
|
|||
switch (this.curChoose.name) { |
|||
case "微信支付": { |
|||
info.type = 0; |
|||
} break; |
|||
case "支付宝支付": { |
|||
info.type = 1; |
|||
} break; |
|||
case "现金支付": { |
|||
info.type = 3; |
|||
} break; |
|||
case "其他": { |
|||
if (!this.curChoose.inputValue) { |
|||
util.showNone("请输入其他支付方式！"); |
|||
return; |
|||
} |
|||
|
|||
info.type = 4; |
|||
info.inputValue = this.curChoose.inputValue; |
|||
} break; |
|||
case "储值卡支付": { |
|||
if (!this.curStoreInfo.card_no) { |
|||
util.showNone("请搜索选择储值卡！"); |
|||
return; |
|||
} |
|||
|
|||
info.type = 2; |
|||
info.cardNo = this.curStoreInfo.card_no; |
|||
} break; |
|||
} |
|||
|
|||
this.goodsRetail(info); |
|||
}, |
|||
storeCardConfirm(info) { |
|||
this.curStoreInfo = info; |
|||
}, |
|||
// 支付方式点击 |
|||
onPayWayClick(item, index) { |
|||
this.curChoose = item; |
|||
for (let i = 0; i < this.payWayList.length; ++i) { |
|||
this.payWayList[i].mark = this.noChoosePath; |
|||
} |
|||
this.payWayList[index].mark = this.choosePath; |
|||
|
|||
if (item.name === '储值卡支付') { |
|||
this.showOrHideStoreCardSelect(true); |
|||
} |
|||
}, |
|||
|
|||
// 创建支付方式列表 |
|||
createPayWayList() { |
|||
this.payWayList = [ |
|||
{ |
|||
type: 0, name: "微信支付", inputShow: false, inputValue: "", |
|||
icon: "/static/images/icon/retail/wechat.png", |
|||
iconClassA: "win-way-item-icon", iconClassB: "", |
|||
placeholderLabel: "请输入其他支付方式", |
|||
mark: this.choosePath, |
|||
markClassA: "win-way-item-mark", markClassB: "", |
|||
}, |
|||
{ |
|||
type: 1, name: "支付宝支付", inputShow: false, inputValue: "", |
|||
icon: "/static/images/icon/retail/alipay.png", |
|||
iconClassA: "win-way-item-icon", iconClassB: "", |
|||
placeholderLabel: "请输入其他支付方式", |
|||
mark: this.noChoosePath, |
|||
markClassA: "win-way-item-mark", markClassB: "", |
|||
}, |
|||
{ |
|||
type: 3, name: "现金支付", inputShow: false, inputValue: "", |
|||
icon: "/static/images/icon/retail/cash.png", |
|||
iconClassA: "win-way-item-icon", iconClassB: "win-way-item-icon-dif", |
|||
placeholderLabel: "请输入其他支付方式", |
|||
mark: this.noChoosePath, |
|||
markClassA: "win-way-item-mark", markClassB: "", |
|||
}, |
|||
{ |
|||
type: 2, name: "储值卡支付", inputShow: false, inputValue: "", |
|||
icon: "/static/images/icon/retail/card.png", |
|||
iconClassA: "win-way-item-icon", iconClassB: "win-way-item-icon-dif", |
|||
placeholderLabel: "请输入其他支付方式", |
|||
mark: this.noChoosePath, |
|||
markClassA: "win-way-item-mark", markClassB: "win-way-item-mark-dif", |
|||
}, |
|||
{ |
|||
type: 4, name: "其他", inputShow: true, inputValue: "", |
|||
icon: "/static/images/icon/retail/other.png", |
|||
iconClassA: "win-way-item-icon", iconClassB: "", |
|||
placeholderLabel: "请输入其他支付方式", |
|||
mark: this.noChoosePath, |
|||
markClassA: "win-way-item-mark", markClassB: "", |
|||
}, |
|||
]; |
|||
|
|||
this.curChoose = this.payWayList[0]; |
|||
}, |
|||
|
|||
// 显示隐藏储值卡选择弹窗 |
|||
showOrHideStoreCardSelect(status) { |
|||
this.storeCardSelectShow= status; |
|||
}, |
|||
|
|||
// 计算总价 |
|||
calcTotalPrice() { |
|||
let price = 0.0; |
|||
|
|||
for (let i = 0; i < this.cartListFinal.length; ++i) { |
|||
price += (this.cartListFinal[i].count * this.cartListFinal[i].erp_goods_price); |
|||
} |
|||
|
|||
this.totalPrice = price.toFixed(2); |
|||
}, |
|||
|
|||
// 适配主内容高度 |
|||
fixMainHeight() { |
|||
let _this = this; |
|||
uni.getSystemInfo({ |
|||
success: res => { |
|||
console.log(res); |
|||
let sumHeight = res.windowHeight; // 获取可用的总高度 |
|||
|
|||
// // 看看当前滚动框是否超出这个高度 |
|||
let query = uni.createSelectorQuery().select(".cg-footer"); |
|||
query.boundingClientRect(data => { |
|||
sumHeight = sumHeight - data.height - uni.upx2px(480 + 24); // 可用高度减去footer 再减去顶部标题项+bottom |
|||
let contentHeight = sumHeight; |
|||
_this.cartListFinalHeight = `${tools.px2rpx(contentHeight)}rpx`; |
|||
_this.cartListScroll = true; |
|||
_this.cartListFinalPaddingBottom = `${res.safeArea.top >= 44 ? tools.px2rpx(res.safeArea.top) : 0}rpx`; |
|||
}).exec(); |
|||
} |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
// background-color: rgb(237,237,245); |
|||
background-color: rgb(255,255,255); |
|||
} |
|||
|
|||
.cg-container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
padding-bottom: 0rpx; |
|||
padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
// border: 1px solid red; |
|||
|
|||
.final-cart-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
// width: 100%; |
|||
// height: 100%; |
|||
flex-grow: 1; |
|||
background-color: rgb(237,237,245); |
|||
|
|||
.final-cart-list-dialog-title { |
|||
width: 100%; |
|||
height: 480rpx; |
|||
background-color: rgb(255,255,255); |
|||
padding-left: 24rpx; |
|||
padding-right: 24rpx; |
|||
color: rgba(51, 51, 51, 1); |
|||
margin-bottom: 24rpx; |
|||
|
|||
.icon-line { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 100rpx; |
|||
border-bottom: 1rpx solid rgba(216, 216, 216, 0.3); |
|||
font-weight: bold; |
|||
|
|||
>image { |
|||
width: 32rpx; |
|||
height: 30rpx; |
|||
margin-right: 12rpx; |
|||
} |
|||
} |
|||
.amount-line { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: #333333; |
|||
height: 380rpx; |
|||
|
|||
>text { |
|||
margin-bottom: 26rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
>view { |
|||
font-size: 80rpx; |
|||
font-weight: bold; |
|||
|
|||
>text { |
|||
font-size: 60rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pay-way-content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: flex-start; |
|||
// flex-grow: 1; |
|||
// height: 428rpx; |
|||
// padding-left: 24rpx; |
|||
// padding-right: 24rpx; |
|||
background-color: rgb(255,255,255); |
|||
// padding-bottom: 0rpx; |
|||
// padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
// padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
|
|||
.win-way { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
position: relative; |
|||
|
|||
.win-way-item { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
padding-left: 40rpx; |
|||
padding-right: 36rpx; |
|||
padding-top: 28rpx; |
|||
// padding-bottom: 28rpx; |
|||
position: relative; |
|||
|
|||
.row1 { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
width: 100%; |
|||
|
|||
.win-way-item-icon { |
|||
width: 54rpx; |
|||
height: 54rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
.win-way-item-mark { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
.win-way-item-icon-dif { |
|||
width: 52rpx; |
|||
height: 52rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
.win-way-item-mark-dif { |
|||
width: 34rpx; |
|||
height: 34rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
> text { |
|||
color: rgba(24, 24, 24, 1); |
|||
font-size: 28rpx; |
|||
flex-grow: 1; |
|||
flex-shrink: 0; |
|||
margin-left: 16rpx; |
|||
margin-right: 16rpx; |
|||
} |
|||
|
|||
> input { |
|||
margin-left: 24rpx; |
|||
margin-right: 132rpx; |
|||
width: 340rpx; |
|||
border-radius: 10rpx; |
|||
border: 2rpx solid rgba(216, 216, 216, 1); |
|||
background-color: white; |
|||
padding-left: 16rpx; |
|||
padding-right: 16rpx; |
|||
padding-top: 10rpx; |
|||
padding-bottom: 10rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.win-way-item-input-placeholder { |
|||
color: rgba(154, 154, 157, 1); |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.row2 { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
|
|||
.store-card-info { |
|||
display: flex; |
|||
flex-direction: column; |
|||
// width: 100%; |
|||
width: 612rpx; |
|||
position: relative; |
|||
flex-shrink: 0; |
|||
padding-top: 26rpx; |
|||
|
|||
> view { |
|||
color: rgba(156, 156, 159, 1); |
|||
font-size: 28rpx; |
|||
margin-bottom: 5rpx; |
|||
|
|||
> text { |
|||
color: rgba(51, 51, 51, 1); |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.row3 { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
width: 100%; |
|||
|
|||
.bottom-line { |
|||
// width: 80.5%; |
|||
width: 612rpx; |
|||
height: 1rpx; |
|||
background-color: rgba(216, 216, 216, 1); |
|||
margin-top: 26rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.cg-footer { |
|||
display: flex; |
|||
flex-direction: row; |
|||
// flex-grow: 1; |
|||
// opacity: 0.3; |
|||
|
|||
position: fixed; |
|||
// bottom: 0rpx; |
|||
bottom: calc( 0rpx + constant(safe-area-inset-bottom)); |
|||
bottom: calc( 0rpx + env(safe-area-inset-bottom)); |
|||
// padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
// padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
width: 100%; |
|||
// height: 188rpx; |
|||
height: 112rpx; |
|||
// border: 1rpx solid blue; |
|||
background-color: rgb(255,255,255); |
|||
|
|||
.cg-footer-btn-confirm { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding-left: 20rpx; |
|||
padding-right: 20rpx; |
|||
display: flex; |
|||
|
|||
>button { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 10rpx; |
|||
padding: 0 0; |
|||
color: rgb(255,255,255); |
|||
background-color: #FF873D; |
|||
border: transparent; |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,77 @@ |
|||
<template> |
|||
<view class="success-container"> |
|||
<image mode="aspectFit" src="/static/images/icon/retail/paySuccess.png"></image> |
|||
<view>支付成功</view> |
|||
<button hover-class="hover-active" @click="review()">查看订单详情</button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
onLoad() { |
|||
uni.setStorage({ |
|||
key: "paySuccess", |
|||
data: "true", |
|||
success: function() {}, |
|||
fail: function(err) {}, |
|||
}); |
|||
}, |
|||
methods: { |
|||
review() { |
|||
// 删除收款出库状态 |
|||
uni.removeStorage({ |
|||
key: 'retailStatus', |
|||
success: function (res) {} |
|||
}); |
|||
uni.removeStorage({ |
|||
key: 'paySuccess', |
|||
success: function (res) {} |
|||
}); |
|||
|
|||
uni.reLaunch({ |
|||
url: `/pages/order_list/order_list?order_type=19`, |
|||
complete: function(res) { |
|||
console.log(res); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.success-container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
// justify-content: center; |
|||
align-items: center; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
padding-bottom: 0rpx; |
|||
padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
font-size: 32rpx; |
|||
color: #333333; |
|||
|
|||
>image { |
|||
width: 132rpx; |
|||
height: 132rpx; |
|||
margin-top: 60rpx; |
|||
} |
|||
>view { |
|||
font-weight: bold; |
|||
margin-top: 30rpx; |
|||
margin-bottom: 102rpx; |
|||
} |
|||
> button { |
|||
color: #009874; |
|||
border: 2rpx solid #009874; |
|||
border-radius: 44rpx; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue