<template> <view class="pages"> <div class="shop_info"> <h3>门店确认</h3> <div class="address"> <div class="address_1">{{ shopData.name }}</div> <div class="address_2">距您{{ shopData.distance }},请确定门店后下单</div> </div> <div class="take_order"> <div class="title">取单时间</div> <div class="time">现在下单,预计 <span class="min">{{ duration }}</span> 分钟后取餐</div> </div> </div> <div class="goods_info"> <h3>商品详情</h3> <div class="goods" v-for="item in goods" :key="item.goodsId"> <div class="goods_item"> <image mode="aspectFit" v-if="item.pics.thumbnailApplet" class="goods_img" :src="item.pics.thumbnailApplet"></image> <image v-else class="goods_img" :src="item.pics.thumbnail"></image> <div class="goods_text"> <div class="goods_name"> <div class="name">{{ item.name }}</div> <div class="price">¥{{ setPrice(item.sku.discount) }}</div> </div> <div class="goods_psce"> <div class="psce_name"> <span v-for="rule in item.sku.rules" :key="rule.ruleId">{{ rule.ruleName }}/</span> </div> <div class="size">x {{ item.num }}</div> </div> </div> </div> <!-- <div class="discount"> <div class="discount_1"> <div class="name">优惠免减</div> <div class="price">- ¥{{ itemReduction(item.sku.discount, item.sku.price, item.num) }}</div> </div> <div class="concessional_rate"> <div class="name">特惠价</div> <div class="price">¥{{ setPrice(item.sku.discount * item.num) }}</div> </div> </div> --> </div> <div class="total"> <div class="size">共{{ totalNum }}件商品</div> <div> <span class="paid_in">实付</span> <span class="money">¥{{ totalPrice }}</span> </div> </div> </div> <div class="Payment_method"> <div>支付方式</div> <div class="type"> <image mode="aspectFit" src="../../../static/imgs/weixin-3.png" class="icon"></image> <span>微信支付</span> </div> </div> <div style="height:150rpx"></div> <div class="footer"> <div class="total"> <div class="the_sum"> <span class="name">合计</span> <span class="price">¥{{ totalPrice }}</span> </div> <!-- <div class="sun"> <div class="price">总优惠¥{{ reduction }}</div> </div> --> </div> <view class="payment" @click="messageAndSave" v-if="userms"> 付款 </view> <button v-if="!userms" class="payment" style="border-radius: 0;" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"> 付款 </button> </div> </view> </template> <script> import { $EventBus } from "@/utils/EventBus"; import Utils from '@/utils/utils' import Menu from '@/request/menu' import User from '@/request/user' import Order from '@/request/order' export default { onShow() { if (this.goods) { Order.getWaitTine({ shopId: uni.getStorageSync('shopData').id, goods: this.goods }).then(({ data }) => { this.duration = data.data }) } }, onLoad(option) { // 商品详情页点击立即支付进入 if (option.goodsList) { const shopData = uni.getStorageSync('shopData'); this.shopData = shopData this.buyType = 3; console.log(uni.getStorageSync('goodsList')); this.goods = uni.getStorageSync('goodsList') || []; this.payType = '2' return } // 微信扫码进入 this.option = JSON.stringify(option) const { q } = option; if (q) { User.getLocation((location) => { uni.removeStorageSync('shopCarInfo'); $EventBus.$emit('updateCar'); // this.buyType = '1'; let id = decodeURIComponent(q).split('?')[1].split('=')[1]; Menu.getScreenShopCar(id, location).then(res => { const data = JSON.parse(res.data.data); console.log(data); this.shopData = data.shop; this.buyType = data.screenNo; this.goods = data.goods.map(item => { const data = { ...item, skuId: item.sku.skuId, flag: true } Utils.getallNum(data) return data }) }) }) return } // 购物车点击进入 const shopData = uni.getStorageSync('shopData'); this.shopData = shopData this.buyType = 3; const shopCarInfo = uni.getStorageSync('shopCarInfo') || [] this.goods = shopCarInfo.filter(item => item.flag); Order.getWaitTine({ shopId: uni.getStorageSync('shopData').id, goods: this.goods }).then(({ data }) => { this.duration = data.data }) if(!this.userms){ User.wxLoginAndGetOpenid(true).then(loginInfo=>{ this.loginInfo = loginInfo }) } }, data() { return { goods: [], buyType: '', shopData: {}, option: '', payType: '1', duration: '', loginInfo: '' } }, computed: { userms() { return this.$store.getters.Authorization; }, totalNum() { let totalNum = 0; this.goods.map(item => { item.flag ? totalNum += item.num : totalNum += 0 }) return totalNum }, reduction() { let price = 0; let discountNum = 0; this.goods.forEach(item => { const sku = item.sku; if (item.flag) { discountNum += item.num * sku.discount price += item.num * sku.price } else { discountNum += 0 price += 0 } }) return (price - discountNum).toFixed(2) }, totalPrice() { let totalPrice = 0; this.goods.forEach(item => { const sku = item.sku; item.flag ? totalPrice += (item.num * sku.discount) : (totalPrice += 0) }) return totalPrice.toFixed(2) } }, methods: { itemReduction(discount, price, num) { return ((price - discount) * num).toFixed(2) }, // 手机号授权登录 getPhoneNumber(e) { if (e.detail.errMsg == 'getPhoneNumber:ok') { e.loginInfo = this.loginInfo User.getPhoneNumber(e); } else if (e.detail.errMsg == "getPhoneNumber:fail user deny") { uni.showToast({ title: '已拒绝手机号授权', icon: 'error' }) } }, messageAndSave() { wx.requestSubscribeMessage({ tmplIds: ['1uErx-15S-3vuopXSvvsxCeM_Jd-1iZC-nXzd2yW3QU', 'Q4HDwBEvpTXpwtZktqWm4SZOTEuQK1x48xjqjD2GqyM', 'Fu_CPIXa0cnJ4EDdVKqFQ3qqKJccMqt2oorI5mfNq74'], success: () => { uni.setStorageSync('isMessage', 'true') User.setAllow(1) this.saveReserve() }, fail: () => { User.setAllow(2) this.saveReserve() } }) }, //结算组装数据发起订单 async saveReserve() { // 组装购物车数据或者立即支付数据 let list = []; if (this.payType == '1') { list = uni.getStorageSync('shopCarInfo').filter((v) => v.flag == true); } else { list = uni.getStorageSync('goodsList').filter((v) => v.flag == true); } let res = await Utils.AssemblyOrder(this.totalPrice, this.totalNum, this.buyType, list); if (res) { // 发起订单 let orderInfo = await Menu.saveReserve(res); if (orderInfo && orderInfo.data.code == 200) { await Menu.requestPayment(orderInfo.data.data, res, this.buyType); } } } } } </script> <style lang="scss" scoped> .pages { padding-top: 1rpx; } .shop_info { width: 686rpx; height: 306rpx; background: #FFFFFF; border-radius: 10rpx; margin: 0 auto; margin-top: 32rpx; padding: 24rpx 32rpx; box-sizing: border-box; h3 { font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 600; color: #000000; } .address { margin-top: 16rpx; .address_1 { font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #333333; } .address_2 { margin-top: 5rpx; font-size: 20rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #666666; } } .take_order { margin-top: 28rpx; padding-top: 28rpx; border-top: 1rpx solid #CCCCCC; .title { font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #000000; } .time { font-size: 20rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #333333; .min { color: #006ECF; font-size: 28rpx; font-weight: 700; margin: 0 5rpx; display: inline-block; } } } } .goods_info { width: 686rpx; background: #FFFFFF; border-radius: 10rpx; margin: 0 auto; margin-top: 32rpx; padding: 24rpx 32rpx; box-sizing: border-box; h3 { font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 600; color: #000000; } .goods { margin-top: 42rpx; border-bottom: 1rpx solid #CCCCCC; padding-bottom: 20rpx; .goods_item { display: flex; align-items: center; } .goods_img { height: 80rpx; width: 80rpx; background-color: #eee; margin-right: 50rpx; } .goods_text { flex: 1; .goods_psce, .goods_name { display: flex; justify-content: space-between; align-items: center; .name { font-size: 24rpx; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #333333; } .price { font-size: 28rpx; font-family: Arial-BoldMT, Arial; font-weight: normal; color: #000000; } .psce_name { font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #666666; } .size { font-size: 24rpx; font-family: ArialMT; color: #666666; } } .goods_psce { margin-top: 10rpx; } } } .discount { margin-top: 15rpx; padding-top: 15rpx; .discount_1 { display: flex; justify-content: space-between; align-items: center; font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 600; color: #333333; .price { font-family: Arial-BoldMT, Arial; font-weight: normal; color: #EB5F17; } } .concessional_rate { display: flex; justify-content: space-between; align-items: center; font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #666666; margin-top: 18rpx; .price { font-family: Arial-BoldMT, Arial; font-weight: 700; color: #000; } } } .total { display: flex; align-items: center; display: flex; justify-content: space-between; margin-top: 52rpx; .size { font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #666666; } .paid_in { font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 600; color: #000000; } .money { font-weight: 600; font-size: 32rpx; color: #000000; vertical-align: middle; } } } .Payment_method { width: 686rpx; height: 86rpx; margin: 32rpx auto 0; padding: 0 32rpx; background: #FFFFFF; border-radius: 10rpx; font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #333333; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; .type { display: flex; align-items: center; font-weight: 600; .icon { width: 32rpx; height: 32rpx; margin-right: 10rpx; } } } .footer { height: 92rpx; background: #fff; position: fixed; bottom: 0; display: flex; width: 100%; .total { flex: 1; padding-left: 32rpx; .the_sum { line-height: 92rpx; .name { font-size: 24rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #000000; } .price { font-size: 28rpx; font-family: Arial-BoldMT, Arial; font-weight: normal; color: #000000; } } .sun { font-size: 20rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #FF0E00; margin-top: 10rpx; } } .payment { width: 170rpx; height: 100%; background: #006ECF; text-align: center; line-height: 92rpx; font-size: 32rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #FFFFFF; } } </style>