|
| xqd
@@ -0,0 +1,561 @@
|
|
|
+<template>
|
|
|
+ <app-layout>
|
|
|
+ <view>
|
|
|
+ <view class="scan-head dir-top-nowrap main-center">
|
|
|
+ <view class="order-name">订单金额</view>
|
|
|
+ <view class="scan-price dir-left-nowrap cross-bottom" @click="openPriceModel">
|
|
|
+ <view class="order-key">￥</view>
|
|
|
+ <view class="order-value">{{list.price}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="scan-line"></view>
|
|
|
+ <!-- 优惠 -->
|
|
|
+ <view class="dir-left-nowrap cross-center scan-offer">
|
|
|
+ <view class="box-grow-1">订单优惠</view>
|
|
|
+ <view class="box-grow-0">
|
|
|
+ <view v-if="list.preferential_money > 0" class="red">
|
|
|
+ -￥{{list.preferential_money}}
|
|
|
+ </view>
|
|
|
+ <view v-else-if="list.price > 0" class="gray">暂无优惠</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 优惠券 -->
|
|
|
+ <view class="dir-left-nowrap cross-center scan-offer">
|
|
|
+ <view class="box-grow-1">优惠劵</view>
|
|
|
+ <view class="box-grow-0 coupon-right">
|
|
|
+ <view v-if="list.coupon_id" @click="setCoupon" class="red">
|
|
|
+ -￥{{list.coupon_preferential_money}}
|
|
|
+ </view>
|
|
|
+ <view v-else-if="list.price > 0 && list.can_coupon_num > 0" class="gray"
|
|
|
+ @click="setCoupon">选择优惠券
|
|
|
+ </view>
|
|
|
+ <view v-else-if="list.price > 0" class="gray">暂无可用优惠券</view>
|
|
|
+ </view>
|
|
|
+ <view class="box-grow-0 cross-center">
|
|
|
+ <icon class="icon-right"></icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 积分抵扣 -->
|
|
|
+ <view v-if="list.price > 0 && activity && integral.user_integral_num >= integral.member_integral && list.integral_deduction > 0"
|
|
|
+ class="dir-left-nowrap cross-center scan-offer">
|
|
|
+ <view class="box-grow-1 cross-center dir-left-nowrap">
|
|
|
+ <view>
|
|
|
+ <text>使用{{list.use_integral_num}}积分抵扣</text>
|
|
|
+ <text class="red">{{list.integral_deduction}}</text>
|
|
|
+ <text>元</text>
|
|
|
+ </view>
|
|
|
+ <view @click="getIntegralInfo" class="main-center cross-center">
|
|
|
+ <icon class="scan-integral-icon"></icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="box-grow-0" @click="handleUseIntegral">
|
|
|
+ <icon v-if="list.use_integral == 1" class="scan-integral-switch check"></icon>
|
|
|
+ <icon v-else class="scan-integral-switch uncheck"></icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 备注 -->
|
|
|
+ <view class="dir-left-nowrap scan-offer">
|
|
|
+ <input @input="bindTextBlur" :value="remark" class="scan-input" placeholder="添加备注"/>
|
|
|
+ </view>
|
|
|
+ <view class="scan-line"></view>
|
|
|
+ <view class="scan-remark cross-center dir-left-nowrap main-center">
|
|
|
+ <view class="key">应付金额</view>
|
|
|
+ <view class="value">￥{{list.pay_price}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="main-center cross-center scan-btn">
|
|
|
+ <app-button @click="submit"
|
|
|
+ color="#ffffff"
|
|
|
+ font-size="32"
|
|
|
+ height="88"
|
|
|
+ width="702"
|
|
|
+ :background="list.price > 0 ? '#ff4544': '#cdcdcd'"
|
|
|
+ :disabled="list.price <= 0"
|
|
|
+ round>已与店员确认，立即买单
|
|
|
+ </app-button>
|
|
|
+ </view>
|
|
|
+ <view class="scan-end" v-if="activity.rules">
|
|
|
+ <view class="dir-left-nowrap cross-center">
|
|
|
+ <view class="icon"></view>
|
|
|
+ <view>规则说明</view>
|
|
|
+ </view>
|
|
|
+ <text space="nbsp">{{activity.rules}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- MODEL -->
|
|
|
+ <view v-if="price_modal" class="scan-modal show bt">
|
|
|
+ <view class="scan-modal-bg"></view>
|
|
|
+ <view class="scan-modal-pic main-center">
|
|
|
+ <view class="info-model cross-center dir-top-nowrap">
|
|
|
+ <view class="order-title">订单金额</view>
|
|
|
+ <view class="info-box dir-left-nowrap cross-center">
|
|
|
+ <input focus class="info-input" @input="setTempInput" :value="tmp_price" type="digit"
|
|
|
+ placeholder-class="place" placeholder="输入支付金额"/>
|
|
|
+ <view>元</view>
|
|
|
+ </view>
|
|
|
+ <view class="info-end dir-left-nowrap cross-center">
|
|
|
+ <view @click="closePriceModel" class="box-grow-1 main-center cross-center">取消</view>
|
|
|
+ <view class="box-grow-0 info-line"></view>
|
|
|
+ <view @click="calcPrice" class="box-grow-1 red main-center cross-center">确认</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </app-layout>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: "index",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ page_loading: true,
|
|
|
+ tmp_price: '',
|
|
|
+ edit_status: true,
|
|
|
+ price_modal: false,
|
|
|
+ activity: null,
|
|
|
+ remark: '',
|
|
|
+ integral: {
|
|
|
+ user_integral_num: '0',
|
|
|
+ },
|
|
|
+ list: {
|
|
|
+ price: '',
|
|
|
+ pay_price: 0.00,
|
|
|
+ use_integral: 0,
|
|
|
+ activity_id: 0,
|
|
|
+ coupon_id: 0,
|
|
|
+ can_coupon_num: 0,
|
|
|
+ integral_explain: [],
|
|
|
+ },
|
|
|
+ clear: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow: function () {
|
|
|
+ const self = this;
|
|
|
+ const userCoupon = self.$store.state.scanCode.userCoupon;
|
|
|
+ if (userCoupon) {
|
|
|
+ self.list.coupon_id = userCoupon.id;
|
|
|
+ self.calcPrice();
|
|
|
+ } else {
|
|
|
+ self.list.coupon_id = 0
|
|
|
+ }
|
|
|
+ if (self.clear) {
|
|
|
+ console.log('onShow => clear');
|
|
|
+ [
|
|
|
+ self.edit_status,
|
|
|
+ self.clear,
|
|
|
+ self.remark,
|
|
|
+ self.tmp_price,
|
|
|
+ self.list,
|
|
|
+ ] = [
|
|
|
+ true,
|
|
|
+ false,
|
|
|
+ '',
|
|
|
+ '',
|
|
|
+ {
|
|
|
+ price: '',
|
|
|
+ pay_price: 0.00,
|
|
|
+ use_integral: 0,
|
|
|
+ activity_id: 0,
|
|
|
+ coupon_id: 0,
|
|
|
+ can_coupon_num: 0,
|
|
|
+ integral_explain: [],
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ onLoad: function (options) {
|
|
|
+ const self = this;
|
|
|
+ if (options.price) {
|
|
|
+ [self.edit_status, self.tmp_price] = [false, options.price];
|
|
|
+ self.calcPrice();
|
|
|
+ }
|
|
|
+ self.$showLoading({text: '加载中'});
|
|
|
+ self.$request({
|
|
|
+ url: self.$api.scan_code_pay.index
|
|
|
+ }).then(info => {
|
|
|
+ self.$hideLoading();
|
|
|
+ if (info.code === 0) {
|
|
|
+ [
|
|
|
+ self.activity,
|
|
|
+ self.goods,
|
|
|
+ self.integral,
|
|
|
+ self.setting
|
|
|
+ ] = [
|
|
|
+ info.data.activity,
|
|
|
+ info.data.goods,
|
|
|
+ info.data.integral,
|
|
|
+ info.data.setting
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ }).catch(info => {
|
|
|
+ self.$hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openPriceModel() {
|
|
|
+ if (!this.edit_status) return;
|
|
|
+ this.price_modal = true;
|
|
|
+ },
|
|
|
+ closePriceModel() {
|
|
|
+ this.price_modal = false;
|
|
|
+ },
|
|
|
+ setTempInput: function (e) {
|
|
|
+ this.tmp_price = e.detail.value;
|
|
|
+ },
|
|
|
+ //总价
|
|
|
+ calcPrice: function () {
|
|
|
+ const self = this;
|
|
|
+ self.price_modal = false;
|
|
|
+ self.$showLoading({text: '加载中'});
|
|
|
+
|
|
|
+ self.$request({
|
|
|
+ url: self.$api.scan_code_pay.preview,
|
|
|
+ data: {
|
|
|
+ price: self.tmp_price,
|
|
|
+ coupon_id: self.list.coupon_id,
|
|
|
+ use_integral: self.list.use_integral,
|
|
|
+ },
|
|
|
+ method: 'POST',
|
|
|
+ }).then(info => {
|
|
|
+ self.$hideLoading();
|
|
|
+ if (info.code === 0) {
|
|
|
+ [self.list, self.tmp_price] = [info.data, info.data.price];
|
|
|
+ } else {
|
|
|
+ uni.showToast({icon: 'none', title: info.msg});
|
|
|
+ }
|
|
|
+ }).catch(info => {
|
|
|
+ self.$hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //UseIntegral
|
|
|
+ handleUseIntegral() {
|
|
|
+ const self = this;
|
|
|
+ let list = self.list;
|
|
|
+ list.use_integral = list.use_integral == 1 ? 0 : 1;
|
|
|
+ self.calcPrice();
|
|
|
+ },
|
|
|
+
|
|
|
+ //Remark
|
|
|
+ bindTextBlur: function (e) {
|
|
|
+ this.remark = e.detail.value;
|
|
|
+ },
|
|
|
+
|
|
|
+ //Integral
|
|
|
+ getIntegralInfo: function (e) {
|
|
|
+ let content = '';
|
|
|
+ this.list.integral_explain.map(v => {
|
|
|
+ content += '消费满' + v.consume_money + '元，';
|
|
|
+ content += '积分最多可抵' + v.integral_deduction + '元';
|
|
|
+ content += '\r\n';
|
|
|
+ });
|
|
|
+ uni.showModal({
|
|
|
+ title: '积分抵扣说明',
|
|
|
+ content: content.trim(),
|
|
|
+ showCancel: false
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //navigate
|
|
|
+ setCoupon: function (e) {
|
|
|
+ this.clear = false;
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/plugins/scan_code/index/coupon?price=' + this.list.price + '&coupon_id=' + this.list.coupon_id,
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ submit: function (e) {
|
|
|
+ const self = this;
|
|
|
+ if (!self.list.price) return
|
|
|
+
|
|
|
+ self.$showLoading({text: '正在提交'});
|
|
|
+ self.$request({
|
|
|
+ url: self.$api.scan_code_pay.submit,
|
|
|
+ method: 'post',
|
|
|
+ data: {
|
|
|
+ price: self.list.price,
|
|
|
+ coupon_id: self.list.coupon_id,
|
|
|
+ use_integral: self.list.use_integral,
|
|
|
+ remark: self.remark,
|
|
|
+ },
|
|
|
+ }).then(e => {
|
|
|
+ self.$hideLoading();
|
|
|
+ if (e.code === 0) {
|
|
|
+ self.$payment.pay(e.data.pay_id).then(payMsg => {
|
|
|
+ // 支付成功
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: "支付成功",
|
|
|
+ showCancel: false,
|
|
|
+ success() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/order-submit/pay-result?payment_order_union_id=' + e.data.pay_id + '&plugin=scan_code_pay'
|
|
|
+ })
|
|
|
+ self.clear = true;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }).catch(payMsg => {
|
|
|
+ // 支付失败
|
|
|
+ self.$showLoading({text: '取消中'});
|
|
|
+ self.$request({
|
|
|
+ url: self.$api.scan_code_pay.cancel,
|
|
|
+ data: {
|
|
|
+ pay_id: e.data.pay_id,
|
|
|
+ },
|
|
|
+ method: 'POST',
|
|
|
+ }).then(info => {
|
|
|
+ self.$hideLoading();
|
|
|
+ }).catch(info => {
|
|
|
+ self.$hideLoading();
|
|
|
+ uni.showModal({title: '提示', content: info.msg});
|
|
|
+ })
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showModal({title: '提示', content: info.msg});
|
|
|
+ }
|
|
|
+ }).catch(e => {
|
|
|
+ self.$hideLoading();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .red {
|
|
|
+ color: #ff4544;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gray {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-head {
|
|
|
+ margin: #{20rpx} #{24rpx} 0 #{24rpx};
|
|
|
+ background: #fff;
|
|
|
+ border-radius: #{16rpx};
|
|
|
+ padding: #{48rpx} #{40rpx} 0 #{40rpx};
|
|
|
+ font-size: #{28rpx};
|
|
|
+ color: #353535;
|
|
|
+
|
|
|
+ .scan-line {
|
|
|
+ height: 1px;
|
|
|
+ margin-top: #{38rpx};
|
|
|
+ background: #e2e2e2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-price {
|
|
|
+ margin-top: #{32rpx};
|
|
|
+
|
|
|
+ .order-key {
|
|
|
+ font-size: #{50rpx};
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-value {
|
|
|
+ font-size: #{80rpx};
|
|
|
+ padding-left: #{28rpx};
|
|
|
+ height: #{98rpx};
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-offer {
|
|
|
+ color: #666666;
|
|
|
+ font-size: #{28rpx};
|
|
|
+ margin-top: #{40rpx};
|
|
|
+
|
|
|
+ .coupon-right {
|
|
|
+ padding-right: #{12rpx};
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-right {
|
|
|
+ background-size: 100% auto;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-image: url("../../../static/image/icon/arrow-right.png");
|
|
|
+ width: #{12rpx};
|
|
|
+ height: #{22rpx};
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-integral-icon {
|
|
|
+ height: #{36rpx};
|
|
|
+ width: #{36rpx};
|
|
|
+ background-image: url("../../../static/image/icon/warning.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% auto;
|
|
|
+ margin-left: #{20rpx};
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-integral-switch {
|
|
|
+ width: #{44rpx};
|
|
|
+ height: #{44rpx};
|
|
|
+ background-size: 100% auto;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ float: left;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-integral-switch.check {
|
|
|
+ margin-left: #{5rpx};
|
|
|
+ background-image: url("../../../static/image/icon/icon-checkbox-checked-a.png");
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-integral-switch.uncheck {
|
|
|
+ margin-left: #{5rpx};
|
|
|
+ background-image: url("../../../static/image/icon/icon-uncheck.png");
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-input {
|
|
|
+ width: 100%;
|
|
|
+ font-size: #{28rpx};
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-remark {
|
|
|
+ height: #{106rpx};
|
|
|
+
|
|
|
+ .key {
|
|
|
+ margin-left: auto;
|
|
|
+ color: #353535;
|
|
|
+ font-size: #{28rpx};
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ margin-left: #{10rpx};
|
|
|
+ color: #ff4544;
|
|
|
+ font-size: #{36rpx};
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-end {
|
|
|
+ color: #666;
|
|
|
+ background: #fff;
|
|
|
+ margin: 0 #{24rpx};
|
|
|
+ font-size: #{28rpx};
|
|
|
+ border-radius: #{16rpx};
|
|
|
+ padding: #{40rpx};
|
|
|
+
|
|
|
+ text {
|
|
|
+ word-break: break-all;
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-end > view {
|
|
|
+ margin-bottom: #{12rpx};
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-end .icon {
|
|
|
+ height: #{26rpx};
|
|
|
+ width: #{8rpx};
|
|
|
+ border-radius: #{4rpx};
|
|
|
+ background: #ff4544;
|
|
|
+ margin-right: #{16rpx};
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-btn {
|
|
|
+ margin: #{40rpx} auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-modal {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 2001;
|
|
|
+ transition: 200ms;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-modal.show {
|
|
|
+ visibility: visible;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-modal.bt {
|
|
|
+ -webkit-animation-name: fadeIn; /*动画名称*/
|
|
|
+ -webkit-animation-duration: 0.25s; /*动画持续时间*/
|
|
|
+ -webkit-animation-iteration-count: 1; /*动画次数*/
|
|
|
+ -webkit-animation-delay: 0s; /*延迟时间*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-modal .scan-modal-bg {
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-modal .scan-modal-pic {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: #{188rpx};
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-modal .scan-modal-close image {
|
|
|
+ width: #{50rpx};
|
|
|
+ height: #{50rpx};
|
|
|
+ margin-top: #{50rpx};
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-modal .info-model {
|
|
|
+ height: #{360rpx};
|
|
|
+ width: #{620rpx};
|
|
|
+ background: #fff;
|
|
|
+ border-radius: #{16rpx};
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-modal .order-title {
|
|
|
+ margin: #{48rpx} 0
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-modal .place {
|
|
|
+ color: #cdcdcd
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-modal .info-box {
|
|
|
+ height: #{88rpx};
|
|
|
+ width: #{400rpx};
|
|
|
+ margin-bottom: #{48rpx};
|
|
|
+ border-radius: #{8rpx};
|
|
|
+ padding: 0 #{24rpx};
|
|
|
+ border: 1px solid #e2e2e2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-modal .info-input {
|
|
|
+ font-size: #{32rpx};
|
|
|
+ color: #353535;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-modal .info-line {
|
|
|
+ height: #{32rpx} !important;
|
|
|
+ width: 1px !important;
|
|
|
+ background: #e2e2e2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-modal .info-end {
|
|
|
+ color: #666666;
|
|
|
+ height: #{88rpx};
|
|
|
+ font-size: #{32rpx};
|
|
|
+ border-top: #{1rpx} solid #e2e2e2;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scan-modal .info-end view {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
