|
|
@@ -0,0 +1,242 @@
|
|
|
+<template>
|
|
|
+ <div class="payTheBill">
|
|
|
+ <div class="head card">
|
|
|
+ <div class="p1">{{Merchant.restaurant_name}}</div>
|
|
|
+ <div class="p2">{{Merchant.restaurant_address}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="phone card flex_r flex_jb">
|
|
|
+ <span>联系方式</span>
|
|
|
+ <span>{{ userinfo.mobile }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="commodity card">
|
|
|
+ <div class="li tit">
|
|
|
+ <span class="s1">商品名称</span>
|
|
|
+ <span class="s2">数量</span>
|
|
|
+ <span class="s2">原价</span>
|
|
|
+ </div>
|
|
|
+ <div class="li li2" v-for="(i,s) in cartList" :key="s">
|
|
|
+ <span class="s1 ellipsis">{{ i.product_name }}</span>
|
|
|
+ <span class="s2">{{ i.number }}</span>
|
|
|
+ <span class="s2">{{ $h.Mul($h.Add(i.user_price, i.spec_price),i.number) }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="money card">
|
|
|
+ <div class="li flex_r flex_jb">
|
|
|
+ <span>消费金额</span>
|
|
|
+ <span>￥{{ cartTotal || 0 }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="li flex_r flex_jb">
|
|
|
+ <span>消费积分抵扣<span class="corg">{{Integral}}%</span></span>
|
|
|
+ <span>-￥{{ deduction || 0 }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="li flex_r flex_jb">
|
|
|
+ <span>实付金额</span>
|
|
|
+ <span>￥{{ actuallypaid || 0 }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btnbar">
|
|
|
+ <div class="btn" @click="payBill">确认支付</div>
|
|
|
+ </div>
|
|
|
+ <div class="mag">*核对商品无误后即可付款，然后订单详情页会显示取餐码，将取餐码告知店员即可取餐</div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { ToPayOpre } from "@/utils/reqTools.js";
|
|
|
+let toPayOpre = new ToPayOpre();
|
|
|
+import { post } from "@/request/api.js";
|
|
|
+export default {
|
|
|
+ name: "payTheBill",
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ Merchant: {},
|
|
|
+ cartList: [],
|
|
|
+ cartTotal: 0,
|
|
|
+ userinfo: {},
|
|
|
+ Integral: 0,
|
|
|
+
|
|
|
+ deduction: 0,
|
|
|
+ actuallypaid: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getMerchant(da) {
|
|
|
+ post("local/getMerchantById", da).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.Merchant = res.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getIntegral(){
|
|
|
+ post("local/getIntegral").then(res=>{
|
|
|
+ if (res.code == 0) {
|
|
|
+ let va = res.data
|
|
|
+ this.Integral = this.$h.Mul(va,100);
|
|
|
+ this.deduction = this.$h.Mul(this.cartTotal,va);
|
|
|
+ this.actuallypaid = this.$h.Sub(this.cartTotal,this.deduction);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getCartList(id) {
|
|
|
+ post("local/myCart", {
|
|
|
+ restaurant_id: id,
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ let data = res.data;
|
|
|
+ let totals = 0;
|
|
|
+ data.forEach(itm => {
|
|
|
+ totals = this.$h.Add(totals, this.$h.Mul(this.$h.Add(itm.user_price, itm.spec_price), itm.number));
|
|
|
+ })
|
|
|
+ this.cartList = data;
|
|
|
+ this.cartTotal = totals;
|
|
|
+ this.getIntegral();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async getuserInfo() {
|
|
|
+ this.userinfo = await uni.userfun();
|
|
|
+ },
|
|
|
+ payBill(){
|
|
|
+ let Arr = []
|
|
|
+ for (const it of this.cartList) {
|
|
|
+ let product_details = []
|
|
|
+ let spec = JSON.parse(it.spec)
|
|
|
+ // let ar = [], ar2 = [];
|
|
|
+ // for (const i of spec.selectSpecArr) {
|
|
|
+ // ar.push(i.pid);
|
|
|
+ // ar2.push(i.id);
|
|
|
+ // }
|
|
|
+ for (const i of spec.selectSpecArr) {
|
|
|
+ product_details.push({
|
|
|
+ specification_id: i.pid,
|
|
|
+ sku_id: i.id
|
|
|
+ })
|
|
|
+ }
|
|
|
+ Arr.push({
|
|
|
+ product_id: it.product_id,
|
|
|
+ amount: it.number,
|
|
|
+ // product_details
|
|
|
+ })
|
|
|
+ }
|
|
|
+ let product_detail = JSON.stringify(Arr)
|
|
|
+ let da = {
|
|
|
+ brand_id: this.Merchant.brand_id,
|
|
|
+ restaurant_id: this.Merchant.restaurant_id,
|
|
|
+ phone: this.userinfo.mobile,
|
|
|
+ total_amount: this.actuallypaid,
|
|
|
+ product_detail
|
|
|
+ }
|
|
|
+ post("local/merchantOrder", da).then(res => {
|
|
|
+ if (res.code == 0 && res.data.prepayid) {
|
|
|
+ toPayOpre.toPay(res.data, (rea) => {
|
|
|
+ if (!rea) {
|
|
|
+ // 支付成功
|
|
|
+ uni.showToast({ title: "支付成功", icon: "none" });
|
|
|
+ } else {
|
|
|
+ // 支付失败
|
|
|
+ uni.showToast({ title: "支付已取消", icon: "none" });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ this.getuserInfo();
|
|
|
+ },
|
|
|
+ onLoad(da) {
|
|
|
+ this.getMerchant(da);
|
|
|
+ this.getCartList(da.restaurant_id);
|
|
|
+ },
|
|
|
+ onShow() {},
|
|
|
+ mounted() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang='scss'>
|
|
|
+page {
|
|
|
+ background-color: #ECECEC;
|
|
|
+}
|
|
|
+
|
|
|
+.payTheBill {
|
|
|
+ padding: 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.head{
|
|
|
+ .p2{
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.commodity {
|
|
|
+ .li{
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ &:last-child{
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tit {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 18rpx;
|
|
|
+ .s1, .s2 {
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .s1, .s2 {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .s1 {
|
|
|
+ width: calc(100% - 240rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ .s2 {
|
|
|
+ width: 120rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.money{
|
|
|
+ .li{
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ &:last-child{
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .corg{
|
|
|
+ color: #18bb88;
|
|
|
+ margin-left: 5rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.btnbar{
|
|
|
+ padding: 20rpx 0;
|
|
|
+ .btn{
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background-color: #18bb88;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.card {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 26rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ padding: 28rpx 30rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
DaMowang