958 lines
24 KiB
Vue
958 lines
24 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 占位符导航栏 -->
|
||
<navseat class="navbar" :opacity='opacitys' :backColor="'#E8AD7B'" :title='toplist.name' :titleshow='true'></navseat>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view :style="{'height':HeighT.customBar+HeighT.heightBar+'px;background-color: #E8AD7B;position: fixed;top: 0;width: 100%;z-index: 9'}"></view>
|
||
<view :style="{'height':HeighT.customBar+HeighT.heightBar+'px;background-color: #E8AD7B;'}"></view>
|
||
<!-- #endif -->
|
||
<!-- 头部内容 -->
|
||
<view class="head">
|
||
<view class="head_bg"></view>
|
||
<view class="tips">
|
||
<image class="informIcon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/informIcon.png" mode="widthFix"/>
|
||
<text class="informText">温馨提示：请适量点餐，避免浪费</text>
|
||
</view>
|
||
<!-- <view class="tabBox"> -->
|
||
<!-- <view class="tab">
|
||
<view :class="is_type==(index+1)?'tab_item'+is_type+' tab_item active ':'tab_item'" v-for="(item,index) in is_typeList" :key="index" @click="tabClick(index+1)">
|
||
<view></view>
|
||
<image class="icon" :src="is_type==(index+1)?item.url_active:item.url" mode="aspectFill"/>
|
||
<text class="title" :class="{active:is_type==(index+1)}">{{item.title}}</text>
|
||
</view>
|
||
</view> -->
|
||
<!-- 送餐到桌 -->
|
||
<!-- <view class="table" v-if="is_type==1">
|
||
<view>
|
||
<text class="title">桌台</text>
|
||
</view>
|
||
<view class="value"> {{ tableValue }} </view>
|
||
</view> -->
|
||
<!-- 打包外带 -->
|
||
<!-- <view class="pack" v-else>
|
||
<view class="top">
|
||
<text class="title">后海&双屿</text>
|
||
<text class="address">浐灞生态区灞河东路东三环至欧亚大道段商业用房09号</text>
|
||
</view>
|
||
<view class="list">
|
||
<view class="item">
|
||
<view class="lable">取餐时间</view><view class="text">立即取餐</view>
|
||
</view>
|
||
<view class="item">
|
||
|
||
<view class="lable">预留电话</view><view class="getPhone text"><u-input class="inputVal" v-model="order.phone" input-align="right" placeholder="请输入预留电话以便联系您" ></u-input><text class="getBtn">获取手机号</text></view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- </view> -->
|
||
</view>
|
||
<!-- 订单内容区域 -->
|
||
<view class="content_box">
|
||
<view class="content">
|
||
<view class="title"> {{ listinfo.name }} </view>
|
||
<view class="list_item" v-for="(item,index) in listinfo.details" :key="item.id">
|
||
<view class="left">
|
||
<image class="img" :src="item.coverImg" mode="aspectFill"/>
|
||
<view class="center">
|
||
<text class="center_title"> {{item.name}} </text>
|
||
<text class="type"> {{ item.skuName}} </text>
|
||
<text class="num"> X{{ item.totalNumber}} </text>
|
||
</view>
|
||
</view>
|
||
<view class="price"> ￥{{ item.totalAmount}} </view>
|
||
</view>
|
||
<!-- <view class="favorable" v-for="(item,index) in favorable" :key="index">
|
||
<view class="favorable_left">
|
||
<image class="icon" :src="item.url" mode="aspectFill"/>
|
||
<text class="name"> {{ item.name }} </text>
|
||
</view>
|
||
<view class="favorable_right"><text class="favorable_right_text">暂无可用优惠券</text> <u-icon name="arrow-right" color="#575B66" size="28"></u-icon></view>
|
||
</view> -->
|
||
<view class="totalPrice">
|
||
<text style="margin-bottom: 5rpx;">小计￥</text>
|
||
<text class="totalPriceNum"> {{listinfo.payAmount}} </text>
|
||
</view>
|
||
<!-- <u-divider color="#fa3534" half-width="200" border-color="#6d6d6d">姑苏城外寒山寺</u-divider> -->
|
||
</view>
|
||
</view>
|
||
<!-- 订单备注 -->
|
||
<view class="remark">
|
||
<view class="remark_bg">
|
||
<view class="remark_title">订单备注</view>
|
||
<u-textarea class="remark_value" placeholder="请填写口味、偏好等要求" :type="'textarea'" v-model="remark" :border="false" :clearable="true"/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 支付方式 -->
|
||
<view class="paymentMethod">
|
||
<view class="paymentMethod_content">
|
||
<view class="paymentMethod_title">支付方式</view>
|
||
<u-radio-group v-model="radiovalue" iconPlacement="right" @change="groupChange" :size="28"
|
||
placement="column">
|
||
<block v-for="(item,index) in paymentMethodList" :key="index">
|
||
<view class="method_list" @click="groupChange(index+1)">
|
||
<view class="method_list_top">
|
||
<view class="method_list_top_left">
|
||
<image class="icon" :src="item.url" mode="widthFix"/>
|
||
<text class="name"> {{ item.name }} </text>
|
||
</view>
|
||
<u-radio activeColor="#E8AD7B" icon-size="36" size="36" :name="index+1">
|
||
</u-radio>
|
||
</view>
|
||
<view class="method_list_bom" v-if="item.type == 1">
|
||
<text class="balance">会员卡余额 ￥{{amountVIP?amountVIP.amount:0}}</text>
|
||
<text class="topUpNow" @click="goRecharge">去充值</text>
|
||
</view>
|
||
</view>
|
||
|
||
</block>
|
||
|
||
</u-radio-group>
|
||
|
||
|
||
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom">
|
||
<view class="bottom_left">
|
||
<text style="margin-bottom: 5rpx;">实付金额</text>
|
||
<text class="totalAmount">￥{{ listinfo.payAmount }} </text>
|
||
</view>
|
||
<view class="paymentBtnText" @tap="$u.debounce(showpopupclickdd, 500)" v-if="listinfoid && listinfo"> {{ paymentBtnText }} </view>
|
||
<view class="paymentBtnText" @tap="$u.debounce(orderdetail, 500)" v-else> {{ paymentBtnText }} </view>
|
||
</view>
|
||
|
||
<!-- 支付密码 -->
|
||
<payPassword ref="payPwd" @accountPayevent="accountPayevent" v-if="ispws"></payPassword>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import navseat from '@/components/navseat.vue'
|
||
import webSocketUtils from '@/common/js/websocket.js'
|
||
import payPassword from '@/components/payPassword.vue'
|
||
export default {
|
||
components: {
|
||
payPassword,
|
||
navseat
|
||
},
|
||
data() {
|
||
return {
|
||
opacitys: false,
|
||
toplist: {
|
||
name: '确认订单'
|
||
},
|
||
is_type: 1,
|
||
is_typeList: [
|
||
{ title: "送餐到桌", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab1.png" , url_active: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab1_active.png"},
|
||
{ title: "打包外带", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab2.png" , url_active: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab2_active.png"},
|
||
],
|
||
orderList: [
|
||
{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
|
||
{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
|
||
{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
|
||
{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
|
||
{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
|
||
],
|
||
favorable: [
|
||
{ name: "优惠券", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/coupon.png"},
|
||
{ name: "团购优惠", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/groupOffer.png"},
|
||
],
|
||
paymentMethodList:[
|
||
{ name: "会员卡支付", type: "1", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png"},
|
||
{ name: "微信支付", type: "2", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png"},
|
||
],
|
||
order: {
|
||
phone: "",
|
||
},
|
||
cartLists: [],
|
||
listinfo: {
|
||
details: [],
|
||
payAmount: 0,
|
||
name: "",
|
||
},
|
||
tableValue: "A203", // 桌台号
|
||
totalPrice: 0, // 小计金额
|
||
totalAmount: 20, // 支付金额
|
||
remark: "", // 备注
|
||
radiovalue: 1, // 支付方式
|
||
ispws: false, // 输入支付密码
|
||
amountVIP: null, // 会员信息
|
||
listinfoid: null,
|
||
paymentBtnText: "会员卡支付",
|
||
}
|
||
},
|
||
computed: {
|
||
HeighT() { //手机类型的尺寸
|
||
return this.$store.getters.is_BarHeight
|
||
},
|
||
},
|
||
onUnload() {
|
||
console.log(this)
|
||
this.socketTicket.Close()
|
||
uni.$off('getMessage')
|
||
this.ispws = false
|
||
},
|
||
onHide() {
|
||
this.socketTicket.Close()
|
||
uni.$off('message')
|
||
},
|
||
onLoad(e) {
|
||
this.listinfo.name = JSON.parse(e.storeInfo).shopName;
|
||
},
|
||
onShow() {
|
||
uni.$on('message', this.getMessage)
|
||
if (this.listinfoid) {
|
||
this.orderorderInfo()
|
||
} else {
|
||
this.handlemessage()
|
||
}
|
||
this.getAount()
|
||
},
|
||
methods: {
|
||
|
||
/**
|
||
* 消息监听
|
||
* @param {Object} msg
|
||
*/
|
||
getMessage(msg) {
|
||
if (msg == 1) { // 网络在连接
|
||
return false
|
||
}
|
||
if (msg.type == 'heartbeat') { //后台心跳 处理返回 不然控制台一直报错
|
||
return false
|
||
}
|
||
if (msg.status != 'success') {
|
||
uni.showToast({
|
||
title: msg.msg,
|
||
icon: "none",
|
||
})
|
||
return false;
|
||
|
||
} else {
|
||
switch (msg.type) {
|
||
case 'createOrder':
|
||
this.listinfoid = msg.data.id
|
||
uni.$off('getMessage')
|
||
this.orderorderInfo(1)
|
||
break;
|
||
case 'addCart':
|
||
console.log("商品列表===",msg)
|
||
this.listinfo.details = msg.data;
|
||
this.listinfo.payAmount = msg.amount;
|
||
|
||
break;
|
||
case 'order':
|
||
uni.navigateBack()
|
||
setTimeout(() => {
|
||
uni.showToast({
|
||
title: '您的小伙伴已下单了哦~~'
|
||
})
|
||
}, 1000)
|
||
break;
|
||
case 'addcart':
|
||
/*插入一条弹幕*/
|
||
// this.$refs.lBarrage.add(
|
||
// `${msg.reqData.nickName?msg.reqData.nickName:'微信用户'}${msg.reqData.num==-1?'取消了':'添加了'}${msg.reqData.name}(${msg.reqData.num})`
|
||
// );
|
||
break;
|
||
}
|
||
this.$set(this, 'cartLists', msg)
|
||
}
|
||
|
||
},
|
||
|
||
/**
|
||
* 监听送餐/打包切换
|
||
* @param {Object} val
|
||
*/
|
||
tabClick ( val ) {
|
||
this.is_type = val;
|
||
console.log(this.is_type)
|
||
},
|
||
|
||
/**
|
||
* 监听支付方式切换
|
||
* @param {Object} n
|
||
*/
|
||
groupChange(n) {
|
||
this.radiovalue = n;
|
||
this.paymentBtnText = n==1?'会员卡支付':'微信支付'
|
||
},
|
||
|
||
/**
|
||
* 初始化socket
|
||
*/
|
||
handlemessage() {
|
||
//调用前先判断是否有socket正在进行 先关闭后链接
|
||
this.socketTicket ? this.socketTicket.Close() : null
|
||
this.socketTicket = new webSocketUtils(`${uni.conf.baseUrlwws}`, 5000, {
|
||
tableId: uni.cache.get('tableCode'),
|
||
shopId: uni.cache.get('shopUser'),
|
||
userId: uni.cache.get('userInfo').id,
|
||
"type": "connect",
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 数据处理
|
||
* @param {Object} data
|
||
*/
|
||
socketSendMsg(data) {
|
||
if (this.socketTicket) {
|
||
this.socketTicket.send(data);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 获取会员信息
|
||
*/
|
||
async getAount() {
|
||
let res = await this.api.shopUserInfo({
|
||
"shopId": uni.cache.get('shopUser'),
|
||
"userId": uni.cache.get('userInfo').id,
|
||
})
|
||
if (res.code == 0) {
|
||
console.log("会员信息===",res)
|
||
this.amountVIP = res.data
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 查询订单信息
|
||
* @param {Object} i
|
||
*/
|
||
async orderorderInfo(i) {
|
||
console.log(this.listinfo)
|
||
let res = await this.api.orderorderInfo({
|
||
orderId: this.listinfoid
|
||
})
|
||
if (res.code == 0) {
|
||
console.log(res)
|
||
// this.listinfo = res.data
|
||
if (i == 1) { //请求完了详情在去调支付
|
||
this.showpopupclickdd()
|
||
}
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 去充值
|
||
*/
|
||
goRecharge() {
|
||
// 判断是否绑定手机,只有下单时候有,会员列表肯定有
|
||
// console.log(this.amountVIP.isVip, '调试1')
|
||
if (this.amountVIP.isVip == 0) {
|
||
// 跳转到开通页面
|
||
uni.navigateTo({
|
||
url: '/pages/member/activatedmemberone?shopId=' + uni.cache.get('shopUser')
|
||
})
|
||
} else {
|
||
uni.pro.navigateTo('/pages/member/index', {
|
||
shopId: uni.cache.get('shopUser')
|
||
})
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 生成订单
|
||
*/
|
||
orderdetail() {
|
||
console.log(this.radiovalue)
|
||
let data = {
|
||
"skuId": '',
|
||
"num": '', //数量
|
||
"type": "createOrder", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
||
"remark": this.remark,
|
||
"couponsId": '', //优惠券ID,
|
||
"isYhq": 0, // 是否使用优惠券（ 1： 使用， 0： 不使用）,
|
||
"isBuyYhq": 0, // 是否购买优惠券（ 1： 购买， 0： 不够买）
|
||
"productId": '', //商品id
|
||
"shopId": uni.cache.get('shopUser'),
|
||
"userId": uni.cache.get('userInfo').id,
|
||
}
|
||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||
},
|
||
|
||
/**
|
||
* 去支付
|
||
*/
|
||
showpopupclickdd() {
|
||
console.log(this.radiovalue)
|
||
uni.showLoading({
|
||
title: '加载中',
|
||
mask: true
|
||
})
|
||
// radiovalue为2是微信支付
|
||
if (this.radiovalue == 2) {
|
||
this.showpopupclickdds() //微信支付
|
||
} else {
|
||
// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
|
||
// console.log(isPwd,'是否设置了支付密码')
|
||
if (uni.cache.get('userInfo').isPwd == 0) {
|
||
uni.pro.navigateTo('/pages/user/repairpassword', {
|
||
shopId_id: uni.cache.get('shopUser')
|
||
})
|
||
} else {
|
||
uni.hideLoading()
|
||
this.ispws = true
|
||
this.$nextTick(() => {
|
||
this.$refs.payPwd.onPayUp();
|
||
})
|
||
}
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 微信支付
|
||
*/
|
||
async showpopupclickdds() {
|
||
console.log(this.listinfoid)
|
||
let res = await this.api.payorderPay({
|
||
orderId: this.listinfoid
|
||
}) //判断是否支付成功
|
||
if (res.code == 0) {
|
||
|
||
// #ifdef MP-WEIXIN
|
||
// 微信支付还是余额支付
|
||
uni.requestPayment({
|
||
provider: 'wxpay', //支付类型-固定值
|
||
partnerid: res.data.appId, // 微信支付商户号
|
||
timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
|
||
nonceStr: res.data.nonceStr, // 随机字符串
|
||
package: res.data.package, // 固定值
|
||
signType: res.data.signType, //固定值
|
||
paySign: res.data.paySign, //签名
|
||
success: (res) => {
|
||
let _this = this
|
||
uni.requestSubscribeMessage({
|
||
tmplIds: ['z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ'],
|
||
complete() {
|
||
uni.showToast({
|
||
title: "支付成功"
|
||
})
|
||
// uni.cache.set('shopUser', '') //删除shopUser
|
||
_this.paymodfiyOrderInfo()
|
||
uni.redirectTo({
|
||
url: '/pages/order/order_detail?orderId=' + _this
|
||
.listinfoid
|
||
});
|
||
},
|
||
})
|
||
},
|
||
fail: () => {
|
||
uni.hideLoading()
|
||
}
|
||
});
|
||
// #endif
|
||
uni.hideLoading()
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 支付完成后请求
|
||
*/
|
||
async paymodfiyOrderInfo() {
|
||
let res = await this.api.paymodfiyOrderInfo({
|
||
orderId: this.listinfoid,
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 余额支付
|
||
* @param {Object} pwd
|
||
*/
|
||
async accountPayevent(pwd) {
|
||
this.ispws = false
|
||
let res = await this.api.accountPay({
|
||
orderId: this.listinfoid,
|
||
memberId: this.amountVIP.id,
|
||
pwd: pwd
|
||
})
|
||
if (res.code == 0) {
|
||
// data ->1 支付成功
|
||
// ->2 余额不足
|
||
// ->3 未设置支付密码，
|
||
// ->4 不是会员，
|
||
if (res.data == 1) {
|
||
this.showToastUppop('支付成功')
|
||
let _this = this
|
||
|
||
uni.requestSubscribeMessage({
|
||
tmplIds: ['z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ'],
|
||
complete() {
|
||
uni.redirectTo({
|
||
url: '/pages/order/order_detail?orderId=' + _this
|
||
.listinfoid
|
||
});
|
||
},
|
||
})
|
||
|
||
} else if (res.data == 2) {
|
||
this.showToastUppop('余额不足')
|
||
setTimeout(() => {
|
||
// 去充值
|
||
this.goRecharge()
|
||
}, 1500)
|
||
} else if (res.data == 3) {
|
||
this.showToastUppop('未设置支付密码')
|
||
setTimeout(() => {
|
||
uni.pro.navigateTo('/pages/user/repairpassword', {
|
||
shopId_id: uni.cache.get('shopUser')
|
||
})
|
||
}, 1500)
|
||
|
||
} else if (res.data == 4) {
|
||
this.showToastUppop('非会员请充值')
|
||
setTimeout(() => {
|
||
// 去充值
|
||
this.goRecharge()
|
||
}, 1500)
|
||
}
|
||
|
||
}
|
||
|
||
},
|
||
|
||
showToastUppop(title) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title,
|
||
success: () => {
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.head{
|
||
width: 100%;
|
||
padding: $uni-spacing-row-base;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
.head_bg{
|
||
height: 456rpx;
|
||
background: linear-gradient( 180deg, #E8AD7B 0%, #F5F5F5 100%);
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
margin: auto;
|
||
}
|
||
.tips{
|
||
width: 100%;
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
background: #FFF8E8;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
padding: 0 16rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
.informIcon{
|
||
width: 26.7rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
.informText{
|
||
font-size: $uni-font-size-base;
|
||
color: #FF803D;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
.tabBox{
|
||
width: 100%;
|
||
margin-top: 52rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
.tab{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-radius: 22rpx;
|
||
background-color: $uni-bg-color;
|
||
.tab_item{
|
||
width: 50%;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 30rpx;
|
||
box-sizing: border-box;
|
||
background-color: #FEFBF8;
|
||
border-radius: 22rpx 22rpx 0 0;
|
||
position: relative;
|
||
.title{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
position:relative;
|
||
z-index: 1;
|
||
}
|
||
.title.active{
|
||
color: #E8AD7B;
|
||
}
|
||
.icon{
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 16rpx;
|
||
position:relative;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
.tab_item.active{
|
||
background-color: #fff;
|
||
}
|
||
// .tab_item.active:after {
|
||
// content: "";
|
||
// position: absolute;
|
||
// top: 0;
|
||
// left: -4px;
|
||
// width: 40px;
|
||
// height: 26px;
|
||
// background: orange;
|
||
// }
|
||
.tab_item.active:before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -20rpx;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
border-radius: 2px;
|
||
background: #fff;
|
||
transform: skewX(0deg);
|
||
}
|
||
.tab_item1.active:before{
|
||
border-radius: 22rpx 40rpx 0 0;
|
||
}
|
||
.tab_item2.active:before{
|
||
border-radius: 40rpx 22rpx 0 0;
|
||
}
|
||
}
|
||
.table{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
height: 90rpx;
|
||
background-color: $uni-bg-color;
|
||
border-radius: 0 0 22rpx 22rpx;
|
||
.title{
|
||
display: flex;
|
||
align-items: center;
|
||
color: #E8AD7B;
|
||
}
|
||
.value{
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.pack{
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
background-color: $uni-bg-color;
|
||
border-radius: 0 0 22rpx 22rpx;
|
||
.top{
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 8rpx;
|
||
.title{
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.address{
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.list{
|
||
display: flex;
|
||
flex-direction: column;
|
||
.item{
|
||
height: 70rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
.lable{
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
.getPhone{
|
||
display: flex;
|
||
align-items: center;
|
||
.u-input{
|
||
width: 340rpx;
|
||
border: none;
|
||
input{
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
|
||
}
|
||
.input-placeholder{
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
.text,.getBtn{
|
||
color: #E8AD7B;
|
||
}
|
||
.getBtn{
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #E8AD7B;
|
||
padding: 8rpx 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.content_box{
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 10rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
.content{
|
||
background-color: $uni-bg-color;
|
||
border-radius: 22rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 30rpx 0;
|
||
box-sizing: border-box;
|
||
.title{
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-bottom: 32rpx;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.list_item{
|
||
display: flex;
|
||
margin-bottom: 32rpx;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
.left{
|
||
width: 100%;
|
||
display: flex;
|
||
.img{
|
||
width: 142rpx;
|
||
height: 142rpx;
|
||
margin-right: 34rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.center{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.center_title{
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
.type{
|
||
margin: 12rpx 0 10rpx 0;
|
||
}
|
||
.type,.num{
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
}
|
||
}
|
||
.price{
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
.favorable{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
margin-bottom: 32rpx;
|
||
.favorable_left{
|
||
display: flex;
|
||
align-items: center;
|
||
.icon{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
.name{
|
||
font-size: 28rpx;
|
||
font-weight: 400rpx;
|
||
color: #333;
|
||
}
|
||
}
|
||
.favorable_right{
|
||
display: flex;
|
||
align-items: center;
|
||
.favorable_right_text{
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
font-weight: 400rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
.totalPrice{
|
||
padding: 32rpx 30rpx;
|
||
box-sizing: border-box;
|
||
border-top: 2rpx solid #E5E5E5;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: flex-end;
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
.totalPriceNum{
|
||
font-size: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.remark{
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 30rpx;
|
||
.remark_bg{
|
||
background-color: $uni-bg-color;
|
||
border-radius: 22rpx;
|
||
padding: 32rpx 30rpx;
|
||
box-sizing: border-box;
|
||
.remark_title{
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.u-textarea{
|
||
height: 148rpx;
|
||
background-color: #f5f5f5;
|
||
border-radius: 10rpx;
|
||
padding: 32rpx 22rpx!important;
|
||
box-sizing: border-box;
|
||
textarea{
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
.paymentMethod{
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 30rpx;
|
||
padding-bottom: 246rpx;
|
||
.paymentMethod_content{
|
||
background-color: $uni-bg-color;
|
||
border-radius: 22rpx;
|
||
padding:30rpx 0;
|
||
box-sizing: border-box;
|
||
.paymentMethod_title{
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
margin-bottom: 30rpx;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.method_list{
|
||
padding: 20rpx 30rpx;
|
||
box-sizing: border-box;
|
||
.method_list_top{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.method_list_top_left{
|
||
display: flex;
|
||
.icon{
|
||
width: 54rpx!important;
|
||
margin-right: 22rpx;
|
||
}
|
||
.name{
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
.method_list_bom{
|
||
display: flex;
|
||
.balance{
|
||
margin-right: 20rpx;
|
||
margin-left: 70rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
.topUpNow{
|
||
color: #FF803D;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
.method_list:nth-child(odd){
|
||
border-bottom: 2rpx solid #ccc;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom{
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx -6rpx 14rpx 2rpx rgba(0,0,0,0.1);
|
||
position: fixed;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 32rpx 50rpx 82rpx 50rpx;
|
||
box-sizing: border-box;
|
||
z-index: 9;
|
||
.bottom_left{
|
||
display: flex;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
align-items: flex-end;
|
||
.totalAmount{
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
margin-top: 5rpx;
|
||
}
|
||
}
|
||
.paymentBtnText{
|
||
width: 216rpx;
|
||
height: 76rpx;
|
||
line-height: 76rpx;
|
||
background: #E8AD7B;
|
||
border-radius: 36rpx 36rpx 36rpx 36rpx;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|