front/pages/order/create.vue

<template>
	<view v-if="fetch && fetch.order" @click="Dever.close()">
		<use-tabbar :tabbar="false"></use-tabbar>

		<!--
		<view class="use-area dflex-b fwb ft-base margin-t0" style="background: #f5e7e6;">
			<view>￥1元开通年VIP会员，尊享5大权益</view>
			<view class="iconfont iconjiantou-01 fs-sm ft-dark"></view>
		</view>-->

		<!-- 配送方式选择-->
		<view v-if="fetch.order.deliver_type && fetch.order.deliver_type == 1">
			<view class="dflex-b bg-white padding-sm"
				v-if="fetch.order.method_list && fetch.order.method_list.length > 0">
				<u-subsection :list="fetch.order.method_list" shape="circle" mode="subsection"
					:current="fetch.order.method" @change="setMethod" activeColor="#f56c6c"></u-subsection>
			</view>

			<!-- 地址区域 -->
			<view class="use-area dflex-b" @click="goAddress" v-if="fetch.order.is_address == 1">
				<view class="dflex" v-if="fetch.user.address.area_string">
					<view class="iconfont icondizhi- margin-right ft-main"></view>
					<view class="w-full dflex-wrap-w">
						<view class="margin-bottom-xs clamp-2">
							<text>{{fetch.user.address.area_string}} {{fetch.user.address.address}}</text>
						</view>
						<view>
							<text>{{fetch.user.address.name}}</text>
							<text class="margin-left">{{fetch.user.address.phone}}</text>
						</view>
					</view>
				</view>
				<view class="dflex" v-else>
					<view class="iconfont icondizhi- margin-right ft-main"></view>
					<view class="w-full dflex-wrap-w">
						<view>
							<text>请先添加收货地址</text>
						</view>
					</view>
				</view>
				<view class="iconfont iconjiantou-01 fs-sm"></view>
			</view>

			<!-- 自提点区域 -->
			<view class="use-area dflex-b" v-else-if="fetch.order && fetch.order.sales_address">
				<view class="dflex">
					<view class="iconfont icondizhi- margin-right ft-main"></view>
					<view class="w-full dflex-wrap-w">
						<view class="margin-bottom-xs clamp-2">
							<text>门店地址：{{fetch.order.sales_address.area_string}}
								{{fetch.order.sales_address.address}}</text>
						</view>
						<view>
							<text>{{fetch.order.sales_address.name}}</text>
							<text class="margin-left">{{fetch.order.sales_address.mobile}}</text>
						</view>
					</view>
				</view>
			</view>

		</view>

		<!-- 商品列表 -->
		<view class="goods-area use-area">
			<view class="goods-item" v-for="(item, index) in fetch.detail" :key="index">
				<view class="pos-r" v-if="item.pic">
					<image class="dflex-c border-radius-sm" :src="item.pic" mode="aspectFill"
						@click="Dever.pic.preview([item.pic], item.pic)" />
				</view>
				<view class="flex1 padding-left-sm">
					<view class="dflex">
						<text class="title clamp-2">{{item.name}}</text>
					</view>
					<view class="ft-dark fs-xs padding-top-xs clamp-2" v-if="item.sku_name">{{item.sku_name}} <span
							v-if="item.stock.num >= 0" style="margin-left:10rpx">库存：{{item.stock.num}}</span></view>
					<view class="pos-r dflex-b padding-top">

						<u-popover position="bottom" width="200px">
							<view class="dflex">
								<view class="price flex1">{{item.cash_text}}</view>
								<view style="margin-left:5px;display: inline-block;">
								<u-icon v-if="item.promotion_text" name="question-circle"></u-icon></view>
							</view>
							<template v-slot:content>
								<view style="color: white;">
									<u-parse :content="item.promotion_text"></u-parse>
								</view>

							</template>
						</u-popover>
						<u-number-box :integer="true" :step="1" :min="item.stock.num == 0 ? 0 : 1"
							:disabled="item.stock.num == 0" :max="item.stock.num >= 0 ? item.stock.num : 9999"
							v-model="item.num" @change="(e)=>operNumber(index, e)"></u-number-box>
					</view>
				</view>
			</view>
		</view>

		<!-- 优惠券区域 -->
		<view class="use-area dflex-b" @click="open('coupon')" v-if="fetch.user.coupon.length > 0">
			<view class="dflex">
				<view class="iconfont __left margin-right-sm iconyouhui" style="color: #333;"></view>
				<text class="flex1 ws-np"
					style="font-size: 13px; font-weight: normal;">优惠券({{fetch.user.coupon.length}})</text>
			</view>
			<view class="dflex margin-left-xl">
				<text class="tip line-height-1 margin-right-xs"
					v-if="fetch.order.coupon_name">{{fetch.order.coupon_name}}</text>
				<text class="tip line-height-1 margin-right-xs ft-base"
					v-if="fetch.order.coupon_cash > 0">{{fetch.order.coupon_cash_text}}</text>
				<text class="tip line-height-1 margin-right-xs" v-else>选择优惠券</text>
				<view class="iconfont fs-sm iconjiantou-01" style="color: #c0c0c0;"></view>
			</view>
		</view>

		<u-popup :show="show.coupon" @close="close('coupon')" round="25">
			<!-- 优惠券区 -->
			<scroll-view class="popup-area border-radius-top30 coupon-area padding bg-drak"
				v-if="fetch && fetch.user.coupon && fetch.user.coupon.length > 0" scroll-y="true">
				<view class="coupon-item bg-main pos-r fs-xs" v-for="(item, index) in fetch.user.coupon" :key="index">
					<view class="content pos-r padding dflex-b">
						<view class="">
							<view class="margin-bottom-xs fs">{{ item.name }}</view>
							<view class="ft-dark">{{item.date_name}}</view>

						</view>
						<view class="tar">
							<view class="margin-bottom-xs price">{{ item.title }}</view>
							<view class="ft-dark" v-if="item.type == 3">抵扣：{{item.yue_text}}</view>
							<view class="ft-dark" v-else-if="item.yue_text">余额：{{item.yue_text}}</view>
						</view>

						<view class="circle l"></view>
						<view class="circle r"></view>
					</view>
					<view class="dflex-b">
						<text class="ft-dark padding-lr">{{ item.type_name }}</text>
						<text class="submit dflex-c border-radius-big padding-lr animated-all bg-base"
							@click="noUseCoupon(item)" v-if="fetch.order.user_coupon_id == item.id"
							style="background-color:burlywood">取消使用</text>
						<text class="submit dflex-c border-radius-big padding-lr animated-all bg-base"
							@click="useCoupon(item)" v-else>使用</text>
					</view>
				</view>
			</scroll-view>
			<view v-else class="coupon-area dflex-c">暂无优惠券</view>
		</u-popup>

		<!-- 礼品卡区域 -->
		<view class="use-area dflex-b" @click="open('gift')" v-if="fetch.user.gift.length > 0">
			<view class="dflex">
				<view class="iconfont __left margin-right-sm iconaixin" style="color: #333;"></view>
				<text class="flex1 ws-np"
					style="font-size: 13px; font-weight: normal;">礼品卡({{fetch.user.gift.length}})</text>
			</view>
			<view class="dflex margin-left-xl">
				<text class="tip line-height-1 margin-right-xs"
					v-if="fetch.order.gift_name">{{fetch.order.gift_name}}</text>
				<text class="tip line-height-1 margin-right-xs ft-base"
					v-if="fetch.order.gift_cash > 0">{{fetch.order.gift_cash_text}}</text>
				<text class="tip line-height-1 margin-right-xs" v-else>选择礼品卡</text>
				<view class="iconfont fs-sm iconjiantou-01" style="color: #c0c0c0;"></view>
			</view>
		</view>

		<u-popup :show="show.gift" @close="close('gift')" round="25">
			<!-- 礼品卡 -->
			<scroll-view class="popup-area border-radius-top30 coupon-area padding bg-drak"
				v-if="fetch && fetch.user.gift && fetch.user.gift.length > 0" scroll-y="true">
				<view class="coupon-item bg-main pos-r fs-xs" v-for="(item, index) in fetch.user.gift" :key="index">
					<view class="content pos-r padding dflex-b">
						<view class="">
							<view class="margin-bottom-xs fs">{{ item.name }}</view>
							<view class="ft-dark">{{item.date_name}}</view>

						</view>
						<view class="tar">
							<view class="margin-bottom-xs price">{{ item.title }}</view>
							<view class="ft-dark">余额：{{item.yue_text}}</view>
						</view>

						<view class="circle l"></view>
						<view class="circle r"></view>
					</view>
					<view class="dflex-b">
						<text class="ft-dark padding-lr">{{ item.type_name }}</text>
						<text class="submit dflex-c border-radius-big padding-lr animated-all bg-base"
							@click="noUseGift(item)" v-if="fetch.order.user_gift_id == item.id"
							style="background-color:burlywood">取消使用</text>
						<text class="submit dflex-c border-radius-big padding-lr animated-all bg-base"
							@click="useGift(item)" v-else>使用</text>
					</view>
				</view>
			</scroll-view>
			<view v-else class="coupon-area dflex-c">暂无礼品卡</view>
		</u-popup>

		<!-- 钱包 -->
		<view class="use-area dflex-b" @click="open('wallet')" v-if="fetch.user.wallet.yue > 0">
			<view class="dflex">
				<view class="iconfont __left margin-right-sm iconquanbudingdan-" style="color: #333;"></view>
				<text class="flex1 ws-np"
					style="font-size: 13px; font-weight: normal;">{{fetch.user.wallet.name}}({{fetch.user.wallet.yue_text}})</text>
			</view>
			<view class="dflex margin-left-xl">
				<text class="tip margin-right-xs ft-base"
					v-if="fetch.order.wallet_cash > 0">{{fetch.order.wallet_cash_text}}</text>
				<text class="tip margin-right-xs" v-else>选择{{fetch.user.wallet.name}}</text>
				<view class="iconfont fs-sm iconjiantou-01" style="color: #c0c0c0;"></view>
			</view>
		</view>
		<!--
		<u-modal :show="show.wallet" :showCancelButton="true" :closeOnClickOverlay="true"
			:title="fetch.user.wallet.name+` ：`+fetch.user.wallet.yue_text" @confirm="useWallet" @cancel="close('wallet')"
			@close="close('wallet')">
			<view class="slot-content" style="width: 100%;">
				<u--input :placeholder="'请输入要抵扣的'+fetch.user.wallet.name" v-model="fetch.order.wallet_cash"
					type="number" border="bottom" :focus="true" clearable></u--input>
			</view>
		</u-modal>-->

		<u-popup mode="center" @close="close('wallet')" :show="show.wallet" round="14" :closeable="true">
			<view class="alert-area border-radius bg-main pos-r">
				<view class="dflex-b ft-dark margin-bottom-sm margin-lr-xs">
					<view>{{fetch.user.wallet.name}} ：{{fetch.user.wallet.yue_text}}</view>
				</view>

				<view class="dflex border-radius-sm field" style="padding: 8px 7px;">
					<u--input :placeholder="'请输入要抵扣的'+fetch.user.wallet.name" v-model="fetch.order.wallet_cash"
						class="fwb fs-sm" type="number" border="none" :focus="true" clearable
						style="max-height: 76px; min-height: 19px; height: auto; font: initial;"></u--input>
				</view>

				<!-- 提交按钮 -->
				<view class="bg-base margin-top-xl tac w-full border-radius-lg padding-tb-sm" @click="useWallet">
					提交
				</view>
			</view>
		</u-popup>

		<!-- 金额信息 -->
		<view class="use-area cash-area">
			<view class="dflex-b line-height-item">
				<view class="flex1">总价</view>
				<view>{{fetch.order.cash_text}}</view>
			</view>
			<view class="dflex-b line-height-item" v-if="fetch.order.coupon_cash > 0">
				<view class="flex1">优惠券抵扣</view>
				<view class="ft-base">-{{fetch.order.coupon_cash_text}}</view>
			</view>
			<view class="dflex-b line-height-item" v-if="fetch.order.gift_cash > 0">
				<view class="flex1">礼品卡抵扣</view>
				<view class="ft-base">-{{fetch.order.gift_cash_text}}</view>
			</view>
			<view class="dflex-b line-height-item" v-if="fetch.order.wallet_cash > 0">
				<view class="flex1">{{fetch.user.wallet.name}}抵扣</view>
				<view class="ft-base">-{{fetch.order.wallet_cash_text}}</view>
			</view>
			<view class="dflex-b line-height-item" v-if="fetch.rebate && fetch.rebate.buy && fetch.rebate.buy.desc">
				<view class="flex1">{{ fetch.rebate.buy.name }}</view>
				<view class="ft-base">{{ fetch.rebate.buy.desc }}</view>
			</view>
			<view class="dflex-b line-height-item" v-if="fetch.rebate && fetch.rebate.buy && fetch.rebate.share.desc">
				<view class="flex1">{{ fetch.rebate.share.name }}</view>
				<view class="ft-base">{{ fetch.rebate.share.desc }}</view>
			</view>
			<!--
			<view class="dflex-b line-height-item" v-if="fetch.rebate && fetch.rebate.rule.length <= 0">
				<view class="flex1">购买立返</view>
				<view class="ft-base">无</view>
			</view>
			-->

		</view>

		<!-- 积分信息 -->
		<!--
		<view class="use-area">
			<view class="rebate-line" v-if="fetch.rebate && fetch.rebate.buy && fetch.rebate.buy.desc">
				<text class="icon icon-jifen">🎁</text>
				<text class="label">{{ fetch.rebate.buy.name }}：</text>
				<text class="value">{{ fetch.rebate.buy.desc }}</text>
			</view>
			
			<view class="rebate-line" v-if="fetch.rebate && fetch.rebate.share && fetch.rebate.share.desc">
				<text class="icon icon-yongjin">💰</text>
				<text class="label">{{ fetch.rebate.share.name }}：</text>
				<text class="value">{{ fetch.rebate.share.desc }}</text>
			</view>
		</view>
		-->

		<!-- 备注 -->
		<view class="use-area">
			<view class="margin-right-xl">备注</view>
			<textarea class="bg-drak w-full border-radius-sm margin-top-sm padding fs-sm" placeholder="请填写备注"
				maxlength="200" style="    min-height: 70px;
    height: auto;" :value="data.remark" />
		</view>

		<!-- 底部安全距离占位 -->
		<view class="w-full safe-area-inset-bottom" style="height: 57px;"></view>

		<!-- 提交区域 -->
		<view class="oper-area pos-f pos-b-full w-full dflex-b bg-main safe-area-inset-bottom padding-lr-sm">
			<u-popover position="right" width="200px">
				<text class="fs-sm">实付款</text>
				<text class="price margin-left-sm fs-xl">{{fetch.order.pay_cash_text}}</text>
				<view style="display:inline-block; margin-left:5px;">
					<u-icon name="question-circle"></u-icon>
				</view>


				<template v-slot:content>
					<view style="color: white;">
						<u-parse :content="fetch.order.score_tip"></u-parse>
					</view>

				</template>
			</u-popover>

			<view>
				<u-button class="submit dflex-c border-radius-big padding-lr animated-all bg-base fs-30" type="error" shape="circle" @click="act" :disabled="data.submit" :loading="data.submit" text="提交订单"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import Pay from '@/lib/dever/pay.js'
	export default {
		data() {
			return {
				fetch: {},
				// 类型
				type: 'source',
				// 弹窗展示
				show: {
					coupon: false,
					gift: false,
					wallet: false,
				},
				// 请求数据
				data: {
					type_id: 0,
					detail: '',
					coupon_id: 0,
					gift_id: 0,
					wallet: 0,
					remark: '',
					submit: false,
				},
			};
		},
		onShow() {
			var options = this.Dever.data('detail');
			if (options && options.detail && options.type && options.type_id) {
				this.type = options.type;
				this.data.type_id = options.type_id;
				this.data.detail = JSON.stringify(options.detail);
				this.data.jump = options.jump;
				if (options.address_id) {
					this.data.address_id = options.address_id;
				}
			} else {
				this.Dever.alert('参数错误');
				return this.Dever.goHome();
			}
			this.loadData();
		},
		methods: {
			loadData() {
				this.DeverApi.get(this, this.type + '.payConfirm', this.data, res => {
					if (this.fetch.order.wallet_cash <= 0) {
						this.fetch.order.wallet_cash = '';
					}
				});
			},

			// 设置配送方式
			setMethod(e) {
				this.data.method = e
				this.loadData();
			},

			noUseCoupon(item) {
				this.data.coupon_id = -1;
				this.loadData();
				this.close('coupon');
			},

			useCoupon(item) {
				this.data.coupon_id = item.id;
				this.loadData();
				this.close('coupon');
			},

			noUseGift(item) {
				this.data.gift_id = -1;
				this.loadData();
				this.close('gift');
			},

			useGift(item) {
				this.data.gift_id = item.id;
				this.loadData();
				this.close('gift');
			},

			useWallet() {
				if (this.fetch.order.wallet_cash >= 0) {
					this.data.wallet = this.fetch.order.wallet_cash;
					this.loadData();
				}
				this.close('wallet');
			},

			operNumber(index, e) {
				var detail = JSON.parse(this.data.detail);
				if (detail[index].num != e.value) {
					detail[index].num = e.value
					this.data.detail = JSON.stringify(detail);
					var options = this.Dever.data('detail');
					options.detail = JSON.parse(this.data.detail);
					this.Dever.data('detail', options);
					this.loadData();
				}
			},

			async act() {
				if (this.fetch.order.deliver_type && this.fetch.order.deliver_type == 1 && this.fetch.order.is_address ==
					1) {
					if (!this.fetch.user.address.area_string) {
						return this.Dever.alert('请先添加收货地址');
					}
				}
				
				if (this.Dever.env == 5) {
					const loginRes = await new Promise((resolve, reject) => {
						uni.login({
							provider: this.Dever.platform,
							success: resolve,
							fail: reject
						})
					})
					this.data.applet_code = loginRes.code
				}
				this.DeverApi.post(this.type + '.pay', this.data, r => {
					if (typeof r.pay == 'boolean') {
						if (r.pay) {
							this.yes(r)
						} else {
							this.Dever.alert('下单失败');
						}
					} else {
						Pay.payment(r.order_num, r.pay, res => {
							this.Dever.success('支付成功', () => {
								this.yes(r)
							})
						}, err => {
							this.Dever.alert('支付失败', () => {
								this.yes(r)
							})
						})
					}
				});
			},
			
			yes(r) {
				var jump = this.data.jump;
				this.Dever.data('detail', 'del');
				if (jump.indexOf('order/info') != -1) {
					this.Dever.location(jump + '?id=' + r.order_id, 'go')
				} else {
					this.Dever.location(jump, 'go')
				}
			},

			open(key) {
				this.show[key] = true;
			},
			close(key) {
				this.show[key] = false;
			},
			goAddress() {
				var id = 0;
				if (this.fetch.order.address_id) {
					id = this.fetch.order.address_id;
				}
				this.Dever.location('user/address/list?id=' + id + '&refer=order/create');
			}
		}
	};
</script>

<style lang="scss">
	.score {
		margin-right: 10rpx;
	}

	.use-area {
		padding: 28rpx;
	}

	.goods-area {
		.goods-item {
			display: flex;

			.title {
				height: 68rpx;
			}

			image {
				flex-shrink: 0;
				width: 86px;
				height: 86px;
			}
		}
	}

	.oper-area {
		padding: 28rpx;

		.submit {
			height: 66rpx;
		}
	}

	.cash-area {
		.dflex-b:not(:first-child) {
			padding-top: 20rpx;
		}
	}

	/* 全局样式或加 ::v-deep，如果是 scoped 样式 */
	::v-deep .rich-table th,
	::v-deep .rich-table td {
		text-align: left;
		/* 左对齐 */
	}

	.rebate-info {
		margin-top: 8rpx;
		font-size: 24rpx;
		color: #555;
	}

	.rebate-line {
		display: flex;
		align-items: center;
		margin-bottom: 4rpx;
	}

	.rebate-line .icon {
		margin-right: 6rpx;
	}

	.rebate-line .label {
		color: #999;
		margin-right: 4rpx;
	}

	.rebate-line .value {
		color: #e64340;
		font-weight: bold;
	}
</style>