cosmetics_shop_wxapp/indexPages/pay/index.vue

<template>
	<view class="pay">
		<!-- header -->
		<cu-custom isBack bgColor="bg-gradual-blue"><view slot="content">确认订单</view></cu-custom>
		<view @click="addressListFunc" class="padding bg-white flex align-center">
			<view v-if="Object.keys(addressValue).length>0" style="flex: auto;">
				<view class="margin-bottom-sm  flex align-center">
					<text class="cu-tag text-white round sm margin-right-xs" style="background-color:#ee0a24;">默认</text>
					{{addressValue.province}}{{addressValue.city}}{{addressValue.area}}
				</view>
				<view class="margin-bottom-sm text-bold text-black text-lg">{{addressValue.address}}</view>
				<view class=" text-black text-lg">{{addressValue.name}} {{addressValue.tel}}</view>
			</view>
			<view v-else class="text-grey text-center">
				请挑选收货地址
			</view>
			<text style="min-width: 40upx;" class="cuIcon-right lg text-gray text-center"></text>
		</view>
		<view class="padding bg-white margin-tb-sm">
			<view class="padding-bottom-sm flex justify-between">
				<view class="text-black text-bold">商品清单</view>
				<view @click="show = true" class="text-gray flex align-center">
					查看详情
					<text class="cuIcon-right lg "></text>
				</view>
			</view>
			<scroll-view style="width: 100%;flex-wrap: nowrap;height: 180upx;" class="flex  " enable-flex scroll-x="true">
				<image
					@click="show = true"
					class="margin-right"
					v-for="(item, index) in list"
					:key="index"
					style="min-width: 180upx; width: 180upx;height: 180upx;"
					:src="item.img | lazyImage"
					mode="aspectFit"
				></image>
			</scroll-view>
		</view>
		<view class="cu-form-group align-start">
			<view class="title">买家留言</view>
			<textarea placeholder-style="z-index:1;" :value="notes" @input="e=>notes=e.detail.value"  maxlength="100" placeholder="请输入买家留言(可选)" cols="30" rows="10"></textarea>
		</view>
		<!-- footer -->
		<view class="footer">
			<view class="footer-content flex padding justify-between align-center bg-white">
				<view class="flex align-end">
					<view class="margin-right-xs text-black">实付款</view>
					<view style="transform: translateY(10upx);" class="text-price text-red"><cu-price :value="price" size="52" /></view>
					<view class="margin-left">
						{{point_price}}积分
					</view>
				</view>
				<button @click="handler" :disabled="!status" class="bg-red  cu-btn round "> 提交订单</button>
			</view>
		</view>
		<!-- 工具 -->
		<cu-modalC :show.sync="show" custom="2">
			<view class="padding text-center text-lg text-black text-bold border">
				商品清单
				<text class="text-sm" style="color:#999">（共{{list.length}}件）</text>
			</view>
			<cu-scrollView height="50vh">
				<view v-for="(item,index) in list" class="flex padding">
					<image
						class="radius margin-right-sm"
						style="width: 160upx;height: 160upx;min-width: 160upx;"
						lazy-load="true"
						:src="item.img | lazyImage"
						mode="aspectFit"
					></image>
					<view style="flex:auto;position: relative;" class="content margin-right-sm">
						<view class="text-black">{{item.name}}</view>
                        <view class="flex align-center">
							<view v-if="item.type==1" class="text-red">
								￥
								<cu-price :value="item.price" size="32" />
							</view>
							<view v-else>
								{{item.point_price}}积分
							</view>
							<view v-if="item.vip_price" class="bg-orange light text-xs padding-lr-xs">
								<text class="cuIcon-vip lg">会员价</text>
								<text class="text-price margin-left-xs">{{ item.vip_price }}</text>
							</view>
						</view>
					    <view style="position: absolute;bottom: 0;right: 0;">
					    	x{{item.count}}
					    </view>
					</view>
				</view>
			</cu-scrollView>
		</cu-modalC>
		<!-- 工具 -->
		<cu-modalA title="警告" :show.sync="showModal" content="请填写收货地址" />
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import {requestPayment} from "@/common/device/index.js";
import api from "./api.js";
export default {
	data() {
		return {
			show: false,
			list:[],//商品列表
			showModal:false,
			price:0,
			notes:"",
			point_price:0,
			status:true,
		};
	},
	computed: {
		...mapState(['openid','appId']),
		...mapState('addressDefault', ['addressValue']),
	},
	 onLoad(options) {
		let {list}=options;
		this.list=JSON.parse(list);
		let price=0,point_price=0;
		this.list.forEach(item=>(item.type==1 ?  price+=item.price*1*item.count : point_price+=item.point_price*1*item.count));
		this.price=price;
		this.point_price=point_price;
	},
	async onShow(){
		await this.requestFunc();
	},
	methods:{
		...mapActions('addressDefault', ['requestFunc']),
		addressListFunc(){
			uni.navigateTo({
				url:"/loginPages/addressList/index"
			})
		},
		async handler(){
			try{
				this.status=false;
				if(!this.addressValue.id){
					 this.showModal=false;
					 return false;
				}
				let list=this.list.map(item=>({id:item.id,count:item.count}));
				var result =await api.submit({details:JSON.stringify(list),notes:this.notes,openid:this.openid,appid:this.appId,address_id:this.addressValue.id});
				if(result.code!=0) return false;
				if(result.data===""){
					uni.navigateTo({
						url:"/pages/order/index?key=2"
					})
					return false;
				}
				result=await requestPayment(result.data);
				if(result){
					uni.showToast({
						title:"支付成功",
						icon:"success",
						success() {
							setTimeout(()=>uni.navigateTo({
								url:"/pages/order/index?key=2"
							}),3000)
						}
					})
				}else{
					uni.showToast({
						title:"未支付",
						icon:"error",
						success() {
							setTimeout(()=>uni.navigateTo({
								url:"/pages/order/index?key=1"
							}),3000)
						}
					})
				}
			}catch(err){
				uni.showToast({
					title:"支付失败",
					icon:"error"
				})
			}finally{
				this.status=true;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.pay {
	.border {
		position: relative;
		&::after {
			content: '';
			border-top: 1upx solid #ccc;
			position: absolute;
			left: 0;
			bottom: 0;
			transform: scale(1, 0.5);
			width: 100%;
		}
	}
	.footer {
		height: calc(120rpx + env(safe-area-inset-bottom));
		.footer-content {
			width: 100vw;
			padding-bottom: calc(30upx + env(safe-area-inset-bottom)) !important;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 999;
		}
	}
}
</style>