项目初始化
This commit is contained in:
jerry
282
pages/clerk/detail/components/orderPopup.vue
Normal file
282
pages/clerk/detail/components/orderPopup.vue
Normal file
@@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<tui-bottom-popup :zIndex="1002" :maskZIndex="1001" :show="popupShow" @close="hiddenPopup">
|
||||
<view class="order-box">
|
||||
<view class="avatar-box">
|
||||
<u-image width="140" height="140" border-radius="20" :src="clerk.avatar"></u-image>
|
||||
<view class="close-span" @click="hiddenPopup">
|
||||
<u-icon name="close-circle" color="#98a2a1" size="50"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view style="height: 700rpx;" scroll-y>
|
||||
<view class="page-box">
|
||||
|
||||
<game-box v-model="game" :optionList="clerk.goodsList"></game-box>
|
||||
|
||||
<view class="form-box">
|
||||
<!-- <view class="input-box">
|
||||
<view class="tag-box">
|
||||
<u-icon name="tags" color="#f6f6f6" size="34"></u-icon>
|
||||
<view class="name">你的微信号</view>
|
||||
</view>
|
||||
<view class="input-span">
|
||||
<u-input placeholder="请输入正确的微信号~"></u-input>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input-box">
|
||||
<view class="textarea-box">
|
||||
<u-icon name="tags" color="#f6f6f6" size="34"></u-icon>
|
||||
<view class="name">其它备注</view>
|
||||
</view>
|
||||
<view class="textarea-span">
|
||||
<u-input type="textarea" placeholder="请输入备注内容"></u-input>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="input-box">
|
||||
<view class="tag-box">
|
||||
<u-icon name="tags" color="#f6f6f6" size="34"></u-icon>
|
||||
<view class="name">购买数量</view>
|
||||
</view>
|
||||
<view class="step-span">
|
||||
<tui-numberbox iconBgColor="var(--ui-BG-Main)" iconColor="#fff" backgroundColor="#fff" :min="1" :value="order.num" @change="change"></tui-numberbox>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="input-box">
|
||||
<radio-box style="width: 100%;" v-model="payMethod" :optionList="optionList"></radio-box>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="bottom-box">
|
||||
<view class="price-box">
|
||||
<text>总价：</text>
|
||||
<text class="price">{{ fen2yuan(game.price*order.num) }}</text>
|
||||
<text>钻石</text>
|
||||
</view>
|
||||
<view class="btn-box">
|
||||
<view class="pay-btn" @click="confirm">立即下单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tui-bottom-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tuiBottomPopup from "@/components/thorui/tui-bottom-popup/tui-bottom-popup.vue"
|
||||
import tuiNumberbox from "@/components/thorui/tui-numberbox/tui-numberbox.vue"
|
||||
import RadioBox from '@/pages/clerk/detail/components/radioBox.vue';
|
||||
import GameBox from '@/pages/clerk/detail/components/gameBox.vue';
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
tuiBottomPopup,
|
||||
tuiNumberbox,
|
||||
RadioBox,
|
||||
GameBox,
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
popupShow: false,
|
||||
optionList: [
|
||||
{
|
||||
name: '余额支付',
|
||||
value: '0',
|
||||
type: 'number',
|
||||
number: '1000',
|
||||
},
|
||||
{
|
||||
name: '微信支付',
|
||||
value: '1',
|
||||
type: 'icon',
|
||||
},
|
||||
],
|
||||
payMethod: '0',
|
||||
|
||||
game: {
|
||||
goodsId: -1,
|
||||
price: 0,
|
||||
},
|
||||
order: {
|
||||
num: 1,
|
||||
goodsId: -1,
|
||||
price: 0,
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
clerk() {
|
||||
return sheep.$store('sys').clerk;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
//调用此方法显示弹层
|
||||
showPopup() {
|
||||
this.popupShow = true
|
||||
},
|
||||
hiddenPopup() {
|
||||
this.popupShow = false
|
||||
},
|
||||
change(e) {
|
||||
this.order.num = e.value
|
||||
},
|
||||
// 选中某个单选框时，由radio时触发
|
||||
radioChange(e) {
|
||||
// console.log(e);
|
||||
},
|
||||
// 选中任一radio时，由radio-group触发
|
||||
radioGroupChange(e) {
|
||||
// console.log(e);
|
||||
},
|
||||
fen2yuan(price) {
|
||||
return (price / 100.0).toFixed(0)
|
||||
},
|
||||
confirm() {
|
||||
this.order.goodsId = this.game.goodsId,
|
||||
this.order.price = this.game.price*this.order.num
|
||||
if(this.order.goodsId < 0) {
|
||||
sheep.$helper.toast('请选择商品');
|
||||
return;
|
||||
}
|
||||
var data = {
|
||||
"clerkId": this.clerk.id,
|
||||
'items' : [{"skuId": this.order.goodsId, "count": this.order.num}]
|
||||
}
|
||||
this.$u.route({
|
||||
url: 'pages/order/worker/confirm',
|
||||
params: {
|
||||
data: JSON.stringify(data),
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar-box {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.close-span {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.page-box {
|
||||
padding: 15px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.form-box {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.tag-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 200rpx;
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea-box {
|
||||
height: 20px;
|
||||
display: flex;
|
||||
width: 200rpx;
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-box {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.input-span {
|
||||
background-color: #f6f6f6;
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 0 12px;
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
.textarea-span {
|
||||
background-color: #f6f6f6;
|
||||
margin-left: 15px;
|
||||
flex: 1;
|
||||
padding: 2px 12px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.step-span {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
box-shadow: 0 0 6px 0 #ccc;
|
||||
|
||||
.price-box {
|
||||
color: #fb932c;
|
||||
font-size: 28rpx;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.price {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
width: 50%;
|
||||
padding-left: 15px;
|
||||
|
||||
.pay-btn {
|
||||
background-color: var(--ui-BG-Main);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 40px;
|
||||
font-size: 28rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user