34 Commits
39a80c7a95
...
257d5c31cf
19 changed files with 1800 additions and 1702 deletions
-
43src/components/order_list/retail/retail.vue
-
14src/pages.json
-
2src/pages/order_list/order_list.vue
-
BINsrc/static/images/icon/retail/addEmpty.png
-
BINsrc/static/images/icon/retail/paySuccess.png
-
BINsrc/static/images/icon/retail/storeIcon.png
-
1src/subpackage/order/js/api.js
-
2src/subpackage/order/pages/curriculum/detail/detail.vue
-
256src/subpackage/order/pages/retail/detail/detail.vue
-
221src/subpackage/retail/components/hover_cart_list/hover_cart_list.vue
-
498src/subpackage/retail/components/retail_pay_way/retail_pay_way.vue
-
275src/subpackage/retail/components/store_card_select/store_card_select.vue
-
2src/subpackage/retail/js/retail_api.js
-
488src/subpackage/retail/pages/confirm_goods/confirm_goods.vue
-
471src/subpackage/retail/pages/confirm_order/confirm_order.vue
-
847src/subpackage/retail/pages/index/index.vue
-
56src/subpackage/retail/pages/pay_success/pay_success.vue
-
158src/subpackage/retail/pages/search/search.vue
|
After Width: 36 | Height: 36 | Size: 366 B |
|
After Width: 132 | Height: 132 | Size: 1.4 KiB |
|
After Width: 32 | Height: 30 | Size: 1.1 KiB |
@ -1,498 +0,0 @@ |
|||
<template> |
|||
<view class="content" v-if="show"> |
|||
<view class="win-mask"></view> |
|||
|
|||
<view class="win-operate"> |
|||
<image mode="aspectFit" src="/static/images/icon/retail/close.png" @click="onClose"></image> |
|||
<text class="win-title">{{ curChoose.name == "储值卡支付" ? "请选择储值卡" : "请选择支付方式" }}</text> |
|||
|
|||
<view class="win-way" v-if="curChoose.name!='储值卡支付'?true:false"> |
|||
<view class="win-way-item" v-for="(item, index) in payWayList" :key="index" @click="onPayWayClick(item, index)"> |
|||
<image :class="[item.iconClassA, item.iconClassB]" mode="aspectFit" :src="item.icon"></image> |
|||
<text>{{ item.name }}</text> |
|||
<input v-if="item.inputShow" 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> |
|||
</view> |
|||
</view> |
|||
<view class="win-card" v-if="curChoose.name=='储值卡支付'?true:false"> |
|||
<view class="win-card-search"> |
|||
<image v-if="searchCardValue?false:true" mode="aspectFit" src="/static/images/icon/retail/search.png"></image> |
|||
<input v-model="searchCardValue" @confirm="searchCardList" placeholder="请输入微信昵称/手机号码/储值卡号搜索" placeholder-style="win-card-search-input-placeholder"> |
|||
</view> |
|||
<view class="win-card-list"> |
|||
<view class="win-card-list-item" v-for="(item, index) in cardList" :key="index" @click="onCardClick(item)"> |
|||
<view>储值卡卡号：<text :style="{color:item.color.card_no}">{{ item.card_no }}</text></view> |
|||
<view>微信昵称：<text :style="{color:item.color.nickname}">{{ item.nickname }}</text></view> |
|||
<view>手机号码：<text :style="{color:item.color.mobile}">{{ item.mobile }}</text></view> |
|||
<view>卡名称：<text :style="{color:item.color.card_name}">{{ item.card_name }}</text></view> |
|||
<view>卡余额：<text :style="{color:item.color.balance}">￥{{ item.balance }}</text></view> |
|||
<image mode="aspectFit" :src="item.mark"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="win-way-confirm"><button hover-class="hover-active" @click="onConfirm">确定</button></view> |
|||
<view class="win-iphonex-block"></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '../../../../utils/util.js'; |
|||
import tools from '../../js/tools.js'; |
|||
import retailServer from '../../js/retail_server'; |
|||
import retailApi from '../../js/retail_api'; |
|||
|
|||
export default { |
|||
props: [ |
|||
"show", "price", "storeId" |
|||
], |
|||
data() { |
|||
return { |
|||
cardList: [], // 储值卡列表 |
|||
payWayList: [], // 支付方式列表 |
|||
choosePath: "/static/images/icon/retail/choose.png", |
|||
noChoosePath: "/static/images/icon/retail/noChoose.png", |
|||
curChoose: {}, |
|||
curCardChoose: null, |
|||
searchCardValue: "", |
|||
} |
|||
}, |
|||
created() { |
|||
this.createPayWayList(); // 创建支付方式列表 |
|||
}, |
|||
methods: { |
|||
// 储值卡点击 |
|||
onCardClick(item) { |
|||
this.curCardChoose = item; |
|||
|
|||
for (let i = 0; i < this.cardList.length; ++i) { |
|||
this.cardList[i].mark = this.noChoosePath; |
|||
} |
|||
|
|||
this.curCardChoose.mark = this.choosePath; |
|||
}, |
|||
|
|||
// 获取储值卡列表 |
|||
searchCardList() { |
|||
if (!this.searchCardValue) { |
|||
util.showNone("请输入微信昵称/手机号码/储值卡号搜索"); |
|||
return; |
|||
} |
|||
|
|||
let _this = this; |
|||
this.cardList = []; |
|||
|
|||
util.showLoad(); |
|||
retailServer.get({ |
|||
url: retailApi.assistantGetValueCardList, |
|||
data: { |
|||
stadium_id: this.storeId, |
|||
key: this.searchCardValue, |
|||
total_amount: this.price |
|||
}, |
|||
isDefaultGet: false, |
|||
failMsg: '搜索失败！' |
|||
}).then(res => { |
|||
util.hideLoad(); |
|||
if (res.data.code == 0) { |
|||
let color = "rgba(51, 51, 51, 1)"; |
|||
for (let i = 0; i < res.data.data.length; ++i) { |
|||
_this.cardList.push(res.data.data[i]); |
|||
_this.cardList[i].mark = this.noChoosePath; |
|||
_this.cardList[i].color = { |
|||
card_no: color, nickname: color, mobile: color, card_name: color, balance: color |
|||
}; |
|||
|
|||
for (let j = 0; j < res.data.data[i].match_key_fields.length; ++j) { |
|||
_this.cardList[i].color[res.data.data[i].match_key_fields[j]] = "rgba(0, 152, 118, 1)"; |
|||
} |
|||
} |
|||
|
|||
if (_this.cardList.length) { |
|||
_this.cardList[0].mark = _this.choosePath; |
|||
this.curCardChoose = _this.cardList[0]; |
|||
} |
|||
else { |
|||
util.showNone("查询不到该储值卡信息，请检查重新输入"); |
|||
} |
|||
} |
|||
else { |
|||
util.showNone(res.data.message || '操作失败！'); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 重置数据 |
|||
resetData() { |
|||
for (let i = 0; i < this.payWayList.length; ++i) { |
|||
this.payWayList[i].inputValue = ""; |
|||
|
|||
if (this.payWayList[i].name != "储值卡支付") { |
|||
this.payWayList[i].mark = this.noChoosePath; |
|||
} |
|||
} |
|||
|
|||
this.payWayList[0].mark = this.choosePath; |
|||
this.curChoose = this.payWayList[0]; |
|||
this.curCardChoose = null; |
|||
this.cardList = []; |
|||
this.searchCardValue = ""; |
|||
}, |
|||
|
|||
// 关闭窗口 |
|||
onClose() { |
|||
this.resetData(); // 重置数据 |
|||
this.$emit("update:onClose", false); |
|||
}, |
|||
|
|||
// 支付确定 |
|||
onConfirm() { |
|||
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.curCardChoose) { |
|||
util.showNone("请搜索选择储值卡！"); |
|||
return; |
|||
} |
|||
|
|||
info.type = 2; |
|||
info.cardNo = this.curCardChoose.card_no; |
|||
} break; |
|||
} |
|||
|
|||
this.onClose(); |
|||
this.$emit("update:onConfirm", info); |
|||
}, |
|||
|
|||
// 支付方式点击 |
|||
onPayWayClick(item, index) { |
|||
this.curChoose = item; |
|||
|
|||
if (item.name != "储值卡支付") { |
|||
for (let i = 0; i < this.payWayList.length; ++i) { |
|||
if (this.payWayList[i].name != "储值卡支付") { |
|||
this.payWayList[i].mark = this.noChoosePath; |
|||
} |
|||
} |
|||
|
|||
this.payWayList[index].mark = this.choosePath; |
|||
} |
|||
else { |
|||
|
|||
} |
|||
}, |
|||
|
|||
// 创建支付方式列表 |
|||
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: "/static/images/icon/retail/turn.png", |
|||
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]; |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.content { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
position: fixed; |
|||
top: 0%; |
|||
left: 0; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.win-mask { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
background-color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
.win-operate { |
|||
width: 100%; |
|||
height: 964rpx; |
|||
position: fixed; |
|||
bottom: 0%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
background-color: white; |
|||
padding-top: 46rpx; |
|||
|
|||
> image { |
|||
width: 34rpx; |
|||
height: 34rpx; |
|||
position: absolute; |
|||
top: 32rpx; |
|||
right: 28rpx; |
|||
} |
|||
|
|||
> text { |
|||
width: 100%; |
|||
color: rgba(51, 51, 51, 1); |
|||
font-size: 32rpx; |
|||
text-align: center; |
|||
margin-bottom: 54rpx; |
|||
} |
|||
|
|||
.win-way { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
position: relative; |
|||
|
|||
.win-way-item { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
padding-left: 40rpx; |
|||
padding-right: 36rpx; |
|||
padding-top: 28rpx; |
|||
padding-bottom: 28rpx; |
|||
position: relative; |
|||
|
|||
.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; |
|||
} |
|||
|
|||
> view { |
|||
width: 90%; |
|||
height: 1rpx; |
|||
background-color: rgba(216, 216, 216, 1); |
|||
position: absolute; |
|||
bottom: 0%; |
|||
right: 0%; |
|||
} |
|||
|
|||
> 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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.win-way-confirm { |
|||
width: 100%; |
|||
padding-left: 20rpx; |
|||
padding-right: 20rpx; |
|||
position: absolute; |
|||
bottom: 0%; |
|||
bottom: calc( 0% + constant(safe-area-inset-bottom)); |
|||
bottom: calc( 0% + env(safe-area-inset-bottom)); |
|||
|
|||
> button { |
|||
width: 100%; |
|||
height: 112rpx; |
|||
line-height: 112rpx; |
|||
border-radius: 10rpx; |
|||
padding: 0 0; |
|||
color: rgb(255,255,255); |
|||
background-color: rgb(0,152,116); |
|||
} |
|||
} |
|||
|
|||
.win-iphonex-block { |
|||
background-color: white; |
|||
width: 100%; |
|||
height: constant(safe-area-inset-bottom); |
|||
height: env(safe-area-inset-bottom); |
|||
poisition: absolute; |
|||
bottom: 0%; |
|||
} |
|||
|
|||
.win-card { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
padding-left: 20rpx; |
|||
padding-right: 20rpx; |
|||
|
|||
.win-card-search { |
|||
width: 100%; |
|||
border-radius: 10rpx; |
|||
background-color: rgba(242, 242, 247, 1); |
|||
margin-bottom: 30rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
|
|||
> image { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
flex-shrink: 0; |
|||
margin-left: 20rpx; |
|||
} |
|||
|
|||
> input { |
|||
font-size: 32rpx; |
|||
padding-left: 20rpx; |
|||
padding-right: 20rpx; |
|||
padding-top: 24rpx; |
|||
padding-bottom: 24rpx; |
|||
flex-grow: 1; |
|||
} |
|||
|
|||
.win-card-search-input-placeholder { |
|||
font-size: 32rpx; |
|||
color: rgba(156, 156, 159, 1); |
|||
} |
|||
} |
|||
|
|||
.win-card-list { |
|||
width: 100%; |
|||
height: 100rpx; |
|||
overflow: scroll; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
position: relative; |
|||
flex-grow: 1; |
|||
margin-bottom: 112rpx; |
|||
|
|||
.win-card-list-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
border: 1rpx solid rgba(151, 151, 151, 1); |
|||
border-radius: 10rpx; |
|||
padding: 20rpx; |
|||
margin-bottom: 24rpx; |
|||
position: relative; |
|||
flex-shrink: 0; |
|||
|
|||
> view { |
|||
color: rgba(156, 156, 159, 1); |
|||
font-size: 28rpx; |
|||
margin-bottom: 5rpx; |
|||
|
|||
> text { |
|||
color: rgba(51, 51, 51, 1); |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
|
|||
> image { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
position: absolute; |
|||
top: 50%; |
|||
right: 20rpx; |
|||
transform: translate(0%, -50%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,275 @@ |
|||
<template> |
|||
<view class="content" v-if="show"> |
|||
<view class="win-mask"></view> |
|||
|
|||
<view class="win-operate"> |
|||
<image mode="aspectFit" src="/static/images/icon/retail/close.png" @click="onClose"></image> |
|||
<text class="win-title">请选择储值卡</text> |
|||
|
|||
<view class="win-card"> |
|||
<view class="win-card-search"> |
|||
<image v-if="searchCardValue?false:true" mode="aspectFit" src="/static/images/icon/retail/search.png"></image> |
|||
<input v-model="searchCardValue" @confirm="searchCardList" placeholder="请输入微信昵称/手机号码/储值卡号搜索" placeholder-style="win-card-search-input-placeholder"> |
|||
</view> |
|||
<view class="win-card-list"> |
|||
<view class="win-card-list-item" v-for="(item, index) in cardList" :key="index" @click="onCardClick(item)" :style="{borderColor:item.mark===choosePath?'#009874':'#979797'}"> |
|||
<view>储值卡卡号：<text :style="{color:item.color.card_no}">{{ item.card_no }}</text></view> |
|||
<view>微信昵称：<text :style="{color:item.color.nickname}">{{ item.nickname }}</text></view> |
|||
<view>手机号码：<text :style="{color:item.color.mobile}">{{ item.mobile }}</text></view> |
|||
<view>卡名称：<text :style="{color:item.color.card_name}">{{ item.card_name }}</text></view> |
|||
<view>卡余额：<text :style="{color:item.color.balance}">￥{{ item.balance }}</text></view> |
|||
<image mode="aspectFit" :src="item.mark"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="win-way-confirm"><button hover-class="hover-active" @click="onConfirm">确定</button></view> |
|||
<view class="win-iphonex-block"></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '../../../../utils/util.js'; |
|||
import tools from '../../js/tools.js'; |
|||
import retailServer from '../../js/retail_server'; |
|||
import retailApi from '../../js/retail_api'; |
|||
|
|||
export default { |
|||
props: [ |
|||
"show", "price", "storeId", "brandId" |
|||
], |
|||
data() { |
|||
return { |
|||
cardList: [], // 储值卡列表 |
|||
choosePath: "/static/images/icon/retail/choose.png", |
|||
noChoosePath: "/static/images/icon/retail/noChoose.png", |
|||
curCardChoose: null, |
|||
searchCardValue: "", |
|||
} |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
// 储值卡点击 |
|||
onCardClick(item) { |
|||
this.curCardChoose = item; |
|||
for (let i = 0; i < this.cardList.length; ++i) this.cardList[i].mark = this.noChoosePath; |
|||
this.curCardChoose.mark = this.choosePath; |
|||
}, |
|||
// 获取储值卡列表 |
|||
searchCardList() { |
|||
if (!this.searchCardValue) { |
|||
util.showNone("请输入微信昵称/手机号码/储值卡号搜索"); |
|||
return; |
|||
} |
|||
|
|||
let _this = this; |
|||
this.cardList = []; |
|||
|
|||
util.showLoad(); |
|||
retailServer.get({ |
|||
url: retailApi.assistantGetValueCardList, |
|||
data: { |
|||
brand_id: this.brandId, |
|||
stadium_id: this.storeId, |
|||
key: this.searchCardValue, |
|||
total_amount: this.price |
|||
}, |
|||
isDefaultGet: false, |
|||
failMsg: '搜索失败！' |
|||
}).then(res => { |
|||
util.hideLoad(); |
|||
if (res.data.code == 0) { |
|||
let color = "#333"; |
|||
for (let i = 0; i < res.data.data.length; ++i) { |
|||
_this.cardList.push(res.data.data[i]); |
|||
_this.cardList[i].mark = this.noChoosePath; |
|||
_this.cardList[i].color = { |
|||
card_no: color, nickname: color, mobile: color, card_name: color, balance: color |
|||
}; |
|||
|
|||
for (let j = 0; j < res.data.data[i].match_key_fields.length; ++j) |
|||
_this.cardList[i].color[res.data.data[i].match_key_fields[j]] = "#009874"; |
|||
} |
|||
|
|||
if (_this.cardList.length) { |
|||
_this.cardList[0].mark = _this.choosePath; |
|||
this.curCardChoose = _this.cardList[0]; |
|||
} |
|||
else { |
|||
util.showNone("查询不到该储值卡信息，请检查重新输入"); |
|||
} |
|||
} |
|||
else { |
|||
util.showNone(res.data.message || '操作失败！'); |
|||
} |
|||
}); |
|||
}, |
|||
// 重置数据 |
|||
resetData() { |
|||
this.curCardChoose = null; |
|||
this.cardList = []; |
|||
this.searchCardValue = ""; |
|||
}, |
|||
// 关闭窗口 |
|||
onClose() { |
|||
this.$emit("update:onClose", false); |
|||
}, |
|||
// 支付确定 |
|||
onConfirm() { |
|||
if (!this.curCardChoose) { |
|||
util.showNone("请搜索选择储值卡！"); |
|||
return; |
|||
} |
|||
this.$emit("update:onConfirm", this.curCardChoose); |
|||
this.onClose(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.content { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
overflow: hidden; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
.win-mask { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
background-color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
.win-operate { |
|||
width: 100%; |
|||
height: 964rpx; |
|||
position: fixed; |
|||
bottom: 0%; |
|||
@include centerFlex(flex-start); |
|||
flex-direction: column; |
|||
background-color: white; |
|||
padding-top: 46rpx; |
|||
|
|||
> image { |
|||
width: 34rpx; |
|||
height: 34rpx; |
|||
position: absolute; |
|||
top: 32rpx; |
|||
right: 28rpx; |
|||
} |
|||
> text { |
|||
width: 100%; |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
text-align: center; |
|||
margin-bottom: 54rpx; |
|||
} |
|||
.win-way-confirm { |
|||
width: 100%; |
|||
padding: 0 20rpx; |
|||
position: absolute; |
|||
bottom: 0%; |
|||
bottom: calc( 0% + constant(safe-area-inset-bottom)); |
|||
bottom: calc( 0% + env(safe-area-inset-bottom)); |
|||
|
|||
> button { |
|||
width: 100%; |
|||
height: 112rpx; |
|||
line-height: 112rpx; |
|||
border-radius: 10rpx; |
|||
padding: 0 0; |
|||
color: white; |
|||
background-color: $themeColor; |
|||
} |
|||
} |
|||
.win-iphonex-block { |
|||
background-color: white; |
|||
width: 100%; |
|||
height: constant(safe-area-inset-bottom); |
|||
height: env(safe-area-inset-bottom); |
|||
poisition: absolute; |
|||
bottom: 0%; |
|||
} |
|||
.win-card { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
@include centerFlex(flex-start); |
|||
flex-direction: column; |
|||
padding: 0 20rpx; |
|||
|
|||
.win-card-search { |
|||
width: 100%; |
|||
border-radius: 10rpx; |
|||
background-color: #f2f2f7; |
|||
margin-bottom: 30rpx; |
|||
@include centerFlex(flex-start); |
|||
|
|||
> image { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
flex-shrink: 0; |
|||
margin-left: 20rpx; |
|||
} |
|||
> input { |
|||
font-size: 32rpx; |
|||
padding: 24rpx 20rpx; |
|||
flex-grow: 1; |
|||
} |
|||
.win-card-search-input-placeholder { |
|||
font-size: 32rpx; |
|||
color: #9c9c9f; |
|||
} |
|||
} |
|||
.win-card-list { |
|||
width: 100%; |
|||
height: 100rpx; |
|||
overflow: scroll; |
|||
@include centerFlex(flex-start); |
|||
flex-direction: column; |
|||
flex-grow: 1; |
|||
position: relative; |
|||
margin-bottom: 112rpx; |
|||
|
|||
.win-card-list-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex-shrink: 0; |
|||
width: 100%; |
|||
border: 2rpx solid #979797; |
|||
border-color: #979797; |
|||
border-radius: 10rpx; |
|||
padding: 20rpx 0; |
|||
margin-bottom: 24rpx; |
|||
position: relative; |
|||
|
|||
> view { |
|||
color: #9c9c9f; |
|||
font-size: 28rpx; |
|||
margin-bottom: 5rpx; |
|||
|
|||
> text { |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
|
|||
> image { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
position: absolute; |
|||
top: 50%; |
|||
right: 20rpx; |
|||
transform: translate(0%, -50%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,471 @@ |
|||
<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" :brandId="brandInfo.brand.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 { mapState } from 'vuex' |
|||
|
|||
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 = data.cartListFinal; |
|||
this.totalPrice = data.totalPrice; |
|||
|
|||
this.fixMainHeight(); // 适配主内容高度 |
|||
this.createPayWayList(); // 创建支付方式列表 |
|||
util.showLoad(); |
|||
setTimeout(util.hideLoad, 500); |
|||
}, |
|||
onShow() { |
|||
this.getPaySuccess(); // 获取支付成功状态 |
|||
}, |
|||
computed:{ |
|||
...mapState([ 'brandInfo',]) |
|||
}, |
|||
methods: { |
|||
getPaySuccess() { |
|||
uni.getStorage({ |
|||
key: 'paySuccess', |
|||
success: (res) => { |
|||
uni.removeStorage({ |
|||
key: 'paySuccess', |
|||
success: (res) => { uni.navigateBack({ delta: 2 }); } |
|||
}); |
|||
}, |
|||
fail: (err) => {}, |
|||
}); |
|||
}, |
|||
// 商品出库 |
|||
goodsRetail(info) { |
|||
let _this = this; |
|||
let goods_data = []; |
|||
for (let i = 0; i < this.cartListFinal.length; ++i) { |
|||
goods_data.push({ |
|||
// id: this.cartListFinal[i].erp_goods.erp_goods_cid, |
|||
id: this.cartListFinal[i].id, |
|||
// name: this.cartListFinal[i].erp_goods.erp_goods_name, |
|||
name: this.cartListFinal[i].goods_name, |
|||
price: this.cartListFinal[i].assistant_price, |
|||
nums: this.cartListFinal[i].count, |
|||
unit: this.cartListFinal[i].erp_goods.erp_goods_unit, |
|||
}); |
|||
} |
|||
|
|||
util.showLoad(); |
|||
retailServer.post({ |
|||
url: retailApi.assistantRetail, |
|||
data: { |
|||
goods_data, |
|||
brand_id: _this.brandInfo.brand.id, store_id: _this.curStore.id, |
|||
amount: parseFloat(_this.totalPrice), pay_type: info.type, |
|||
other_pay_type: info.inputValue, |
|||
card_no: info.cardNo, |
|||
mark: '' |
|||
}, |
|||
isDefaultGet: false, |
|||
failMsg: '出库失败！' |
|||
}).then(res => { |
|||
if (res.data.code == 0) { |
|||
uni.setStorage({ |
|||
key: "retailStatus", |
|||
data: "true", |
|||
success: () => { |
|||
util.hideLoad(); |
|||
uni.navigateTo({ url: `/subpackage/retail/pages/pay_success/pay_success` }); |
|||
}, |
|||
fail: (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: "", cardNo: "" }; |
|||
|
|||
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; |
|||
}, |
|||
// 适配主内容高度 |
|||
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"> |
|||
@import '~style/public.scss'; |
|||
$orange: #FF873D; |
|||
page { |
|||
background-color: white; |
|||
} |
|||
|
|||
.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 */ |
|||
|
|||
.final-cart-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex-grow: 1; |
|||
background-color: #ededf5; |
|||
|
|||
.final-cart-list-dialog-title { |
|||
width: 100%; |
|||
height: 480rpx; |
|||
background-color: white; |
|||
padding: 0 24rpx; |
|||
margin-bottom: 24rpx; |
|||
|
|||
.icon-line { |
|||
@include centerFlex(flex-start); |
|||
width: 100%; |
|||
height: 100rpx; |
|||
border-bottom: 1rpx solid rgba(216, 216, 216, 0.3); |
|||
font-weight: 500; |
|||
|
|||
>image { |
|||
width: 32rpx; |
|||
height: 30rpx; |
|||
margin-right: 12rpx; |
|||
} |
|||
} |
|||
.amount-line { |
|||
@include centerFlex(center); |
|||
flex-direction: column; |
|||
height: 380rpx; |
|||
|
|||
>text { |
|||
margin-bottom: 26rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
>view { |
|||
font-size: 80rpx; |
|||
font-weight: 500; |
|||
|
|||
>text { |
|||
font-size: 60rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.pay-way-content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: flex-start; |
|||
background-color: white; |
|||
|
|||
.win-way { |
|||
width: 100%; |
|||
@include centerFlex(flex-start); |
|||
flex-direction: column; |
|||
position: relative; |
|||
|
|||
.win-way-item { |
|||
width: 100%; |
|||
@include centerFlex(flex-start); |
|||
flex-direction: column; |
|||
padding: 28rpx 36rpx 0 40rpx; |
|||
position: relative; |
|||
|
|||
.row1 { |
|||
@include centerFlex(flex-start); |
|||
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 { |
|||
font-size: 28rpx; |
|||
flex-grow: 1; |
|||
flex-shrink: 0; |
|||
margin: 0 16rpx; |
|||
} |
|||
> input { |
|||
margin: 0 132rpx 0 24rpx; |
|||
width: 340rpx; |
|||
border-radius: 10rpx; |
|||
border: 2rpx solid #d8d8d8; |
|||
background-color: white; |
|||
padding: 10rpx 16rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
.win-way-item-input-placeholder { |
|||
color: rgba(154, 154, 157, 1); |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.row2 { |
|||
width: 100%; |
|||
@include centerFlex(flex-end); |
|||
|
|||
.store-card-info { |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex-shrink: 0; |
|||
width: 612rpx; |
|||
position: relative; |
|||
padding-top: 26rpx; |
|||
|
|||
> view { |
|||
color: #9c9c9f; |
|||
font-size: 28rpx; |
|||
margin-bottom: 5rpx; |
|||
|
|||
> text { |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.row3 { |
|||
@include centerFlex(flex-end); |
|||
width: 100%; |
|||
|
|||
.bottom-line { |
|||
width: 612rpx; |
|||
height: 1rpx; |
|||
background-color: #d8d8d8; |
|||
margin-top: 26rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.cg-footer { |
|||
display: flex; |
|||
flex-direction: row; |
|||
position: fixed; |
|||
bottom: calc( 0rpx + constant(safe-area-inset-bottom)); |
|||
bottom: calc( 0rpx + env(safe-area-inset-bottom)); |
|||
width: 100%; |
|||
height: 112rpx; |
|||
background-color: white; |
|||
|
|||
.cg-footer-btn-confirm { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0 20rpx; |
|||
display: flex; |
|||
|
|||
>button { |
|||
@include centerFlex(center); |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 10rpx; |
|||
padding: 0 0; |
|||
color: white; |
|||
background-color: $orange; |
|||
border: transparent; |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
847
src/subpackage/retail/pages/index/index.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,56 @@ |
|||
<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: () => {}, fail: () => {} }); |
|||
}, |
|||
methods: { |
|||
review() { |
|||
// 删除收款出库状态 |
|||
uni.removeStorage({ key: 'retailStatus', success: () => {} }); |
|||
uni.removeStorage({ key: 'paySuccess', success: () => {} }); |
|||
uni.reLaunch({ url: `/pages/order_list/order_list?order_type=19` }); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.success-container { |
|||
@include centerFlex(flex-start); |
|||
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 */ |
|||
font-size: 32rpx; |
|||
|
|||
>image { |
|||
width: 132rpx; |
|||
height: 132rpx; |
|||
margin-top: 60rpx; |
|||
} |
|||
>view { |
|||
font-weight: 500; |
|||
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