hello
This commit is contained in:
parent
683b01ed30
commit
9d3aa0c4c4
|
|
@ -6,17 +6,18 @@
|
|||
<text class="text">请选择优惠券</text>
|
||||
<image
|
||||
class="image pos"
|
||||
src="https://ide.code.fun/api/image?token=67bbe3944ae84d00122703c2&name=2bf89872f72e1782d4d3c087ad6881c0.png"
|
||||
src="../images/cha.png"
|
||||
@click="closeCoupon"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex-col mt-33">
|
||||
<view class="flex-row justify-between group_2">
|
||||
<text class="font">可用</text>
|
||||
<text class="font">不可用</text>
|
||||
<text class="font" style="line-height: 70rpx;" @click="changeStateLeft(isShow)">可用</text>
|
||||
<text class="font" style="line-height: 70rpx;" @click="changeStateRight(isShow)">不可用</text>
|
||||
</view>
|
||||
<view class="relative divider">
|
||||
<view class="section_2 pos_2"></view>
|
||||
<view class="section_2 pos_3"></view>
|
||||
<view class="section_2 pos_2" v-show="isShow"></view>
|
||||
<view class="section_2 pos_3" v-show="!isShow"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -24,53 +25,175 @@
|
|||
<text class="font_2 text_2">优惠券商城</text>
|
||||
<image
|
||||
class="image_2"
|
||||
src="https://ide.code.fun/api/image?token=67bbe3944ae84d00122703c2&name=2829399146af5054fd6e58109f33ddb9.png"
|
||||
src="../images/yjt.png"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col list">
|
||||
|
||||
<radio-group @change="selectedHandler">
|
||||
<view class="flex-col list-item mt-17" v-for="(item, index) in items" :key="index">
|
||||
<view class="flex-row justify-between self-stretch group_3">
|
||||
<radio-group>
|
||||
<view class="flex-col list-item mt-17" v-for="(item, index) in myCouponList" :key="index" @click="selectOne(index)">
|
||||
<view class="flex-row justify-between self-stretch group_3" :style="borderStyle">
|
||||
<view class="flex-row items-baseline self-start group_6">
|
||||
<text class="font_3 text_4">50</text>
|
||||
<text class="font_3 text_4">{{item.couponVO.standardAmount}}</text>
|
||||
<text class="font_4 text_5">￥</text>
|
||||
</view>
|
||||
<view class="flex-row items-center self-center group_4">
|
||||
<view class="flex-col shrink-0 group_5">
|
||||
<text class="self-start font text_3">满200元减50</text>
|
||||
<text class="self-stretch font_5 text_6 mt-11">2025.01.08 00:00至2025.04.07 23:59</text>
|
||||
<text class="self-start font text_3">{{item.couponVO.name}}</text>
|
||||
<text class="self-stretch font_5 text_6 mt-11">{{item.couponVO.startTime.substr(0, 16)}}至{{item.couponVO.endTime.substr(0, 16)}}</text>
|
||||
</view>
|
||||
<!-- <view class="ml-22 shrink-0 section_4"></view> -->
|
||||
<radio class="ml-22 shrink-0 section_4" :value="index"
|
||||
color="#FFB5B8"></radio>
|
||||
<radio class="ml-22 shrink-0 section_4" :value="index" :checked="checkedArr[index]"
|
||||
color="#FFB5B8" v-show="isShow"></radio>
|
||||
<view class="ml-22 shrink-0 section_4" v-show="!isShow"></view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="mt-14 self-start font_2 text_7">未满足使用门槛</text>
|
||||
<text class="mt-14 self-start font_2 text_7" v-show="!isShow">未满足使用门槛</text>
|
||||
</view>
|
||||
</radio-group>
|
||||
|
||||
|
||||
</view>
|
||||
<view class="flex-row section_5">
|
||||
<view class="flex-row section_5" @click="closeCoupon">
|
||||
<view class="flex-col justify-start items-center text-wrapper">
|
||||
<text class="font_6 text_8">不使用优惠券</text>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center text-wrapper_2"><text class="font_6 text_9">确定</text></view>
|
||||
<view class="flex-col justify-start items-center text-wrapper_2"><text class="font_6 text_9" @click="confirm">确定</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
const items = ref([null, null])
|
||||
import {onMounted, ref} from 'vue'
|
||||
import emitter from '../../../utils/emitter';
|
||||
import { baseUrl } from '../../../api/request';
|
||||
const checkedArr = ref([])
|
||||
const idx = ref(0)
|
||||
const selectedHandler = (e:any) => {
|
||||
idx.value = e.detail.value
|
||||
const isShow = ref(true)
|
||||
const borderStyle = ref({})
|
||||
let totalAmount = 0
|
||||
const myCouponList = ref([])
|
||||
const cookie = wx.getStorageSync("cookie") //请求头
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on('getTotalPrice', (val:any) => {
|
||||
totalAmount = val
|
||||
getMyCouponList()
|
||||
})
|
||||
})
|
||||
|
||||
const changeStateLeft = (val:any) => {
|
||||
if (!val) {
|
||||
isShow.value = !isShow.value
|
||||
borderStyle.value.borderBottom = 'solid 0px'
|
||||
getMyCouponList()
|
||||
}
|
||||
}
|
||||
|
||||
const changeStateRight = (val:any) => {
|
||||
if (val) {
|
||||
isShow.value = !isShow.value
|
||||
borderStyle.value.borderBottom = 'solid 1.88rpx #d9d9d9'
|
||||
getMyCouponList()
|
||||
}
|
||||
}
|
||||
|
||||
const closeCoupon = () => {
|
||||
emitter.emit('closeCoupon')
|
||||
}
|
||||
|
||||
const selectOne = (val:any) => {
|
||||
idx.value = val
|
||||
for (var i = 0; i < checkedArr.value.length; i ++ ) {
|
||||
if (i == val) {
|
||||
checkedArr.value[i] = true
|
||||
} else {
|
||||
checkedArr.value[i] = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const confirm = () => {
|
||||
emitter.emit('getCouponObj', myCouponList.value[idx.value])
|
||||
emitter.emit('closeCoupon')
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const getMyCouponList = async () => {
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/coupon/list/use',
|
||||
method: 'POST',
|
||||
header: {
|
||||
cookie
|
||||
},
|
||||
data: {
|
||||
currentAmount: totalAmount,
|
||||
isAvailable: isShow.value
|
||||
}
|
||||
})
|
||||
myCouponList.value = res.data.data
|
||||
checkedArr.value = new Array(myCouponList.value.length).fill(false)
|
||||
console.log(myCouponList.value)
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mt-33 {
|
||||
margin-top: 61.88rpx;
|
||||
|
|
@ -88,7 +211,6 @@
|
|||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
border: 3rpx solid red;
|
||||
}
|
||||
.section {
|
||||
padding-top: 41.25rpx;
|
||||
|
|
@ -99,7 +221,7 @@
|
|||
.group {
|
||||
padding: 0 35.63rpx;
|
||||
}
|
||||
.text {
|
||||
.text {
|
||||
color: #323232;
|
||||
font-size: 33.75rpx;
|
||||
font-family: Inter;
|
||||
|
|
@ -116,7 +238,7 @@
|
|||
transform: translateY(-50%);
|
||||
}
|
||||
.group_2 {
|
||||
padding: 0 138.75rpx 22.5rpx 157.5rpx;
|
||||
padding: 0 138.75rpx 0 157.5rpx;
|
||||
}
|
||||
.font {
|
||||
font-size: 30rpx;
|
||||
|
|
@ -151,8 +273,12 @@
|
|||
height: 22.5rpx;
|
||||
}
|
||||
.list {
|
||||
margin-top: 31.88rpx;
|
||||
padding: 0 22.5rpx;
|
||||
padding: 31.88rpx 22.5rpx 31.88rpx;
|
||||
height: 70%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.list-item {
|
||||
padding-bottom: 18.75rpx;
|
||||
|
|
@ -164,7 +290,6 @@
|
|||
}
|
||||
.group_3 {
|
||||
padding: 33.75rpx 37.5rpx 18.75rpx;
|
||||
border-bottom: solid 1.88rpx #d9d9d9;
|
||||
}
|
||||
.group_6 {
|
||||
margin-top: 26.25rpx;
|
||||
|
|
@ -213,10 +338,6 @@
|
|||
border-radius: 75rpx;
|
||||
width: 33.75rpx;
|
||||
height: 33.75rpx;
|
||||
// border-left: solid 1.88rpx #ff3c3cad;
|
||||
// border-right: solid 1.88rpx #ff3c3cad;
|
||||
// border-top: solid 1.88rpx #ff3c3cad;
|
||||
// border-bottom: solid 1.88rpx #ff3c3cad;
|
||||
}
|
||||
.font_2 {
|
||||
font-size: 26.25rpx;
|
||||
|
|
@ -232,9 +353,14 @@
|
|||
line-height: 24.34rpx;
|
||||
}
|
||||
.section_5 {
|
||||
margin-top: 138.75rpx;
|
||||
margin-top: 50.75rpx;
|
||||
padding: 15rpx 46.88rpx;
|
||||
background-color: #ffffff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.text-wrapper {
|
||||
padding: 26.25rpx 0;
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ const getAddressList = async () =>{
|
|||
}
|
||||
//关闭弹窗
|
||||
const close = () => {
|
||||
emitter.emit('close')
|
||||
emitter.emit('closeAddress')
|
||||
}
|
||||
//当选项发生改变时
|
||||
const radioChange = ( event ) => {
|
||||
|
|
@ -75,7 +75,7 @@ const radioChange = ( event ) => {
|
|||
const temp = addressList.value[index] //通过emitter传入暂时的地址信息
|
||||
// console.log('temp',temp);
|
||||
emitter.emit('addressInfo', temp )
|
||||
emitter.emit('close')
|
||||
emitter.emit('closeAddress')
|
||||
}
|
||||
//跳转到新建地址页面
|
||||
const toNewAddress =()=>{
|
||||
|
|
|
|||
|
|
@ -89,14 +89,14 @@
|
|||
class="shrink-0 image_9"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FjIVFaWXA-rmb.png"
|
||||
/>
|
||||
<text class="font_9">{{ sumprice }}</text>
|
||||
<text class="font_9">{{ sumprice.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col mt-25">
|
||||
<view class="flex-row justify-between group_10">
|
||||
<view class="flex-row justify-between group_10" @click="openCoupon">
|
||||
<text class="font_7">优惠券</text>
|
||||
<view class="flex-row">
|
||||
<text class="font_8">0张优惠券可用</text>
|
||||
<text class="font_8">{{ templateString }}</text>
|
||||
<image
|
||||
class="shrink-0 image_7 ml-3"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FTrywtERT-right.png"
|
||||
|
|
@ -104,8 +104,8 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="flex-col mt-9">
|
||||
<view class="flex-row justify-between items-center group_11">
|
||||
<text class="font_7 text_15">满120减0优惠</text>
|
||||
<!-- <view class="flex-row justify-between items-center group_11" v-if="couponIsShow">
|
||||
<text class="font_7 text_15">{{ couponVO.name }}优惠</text>
|
||||
<view class="flex-row items-center">
|
||||
<image
|
||||
class="shrink-0 image_9 image_10"
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
<text class="font_3 text_16">减</text>
|
||||
<text class="font_9 text_17">0.00</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="flex-row justify-between items-center group_12">
|
||||
<text class="font_7 text_18">合计</text>
|
||||
<view class="flex-row items-center">
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
class="shrink-0 image_9"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FjIVFaWXA-rmb.png"
|
||||
/>
|
||||
<text class="font_9">{{ sumprice }}</text>
|
||||
<text class="font_9">{{ sfAmount.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -143,25 +143,34 @@
|
|||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FJmxvlQvD-rmbpink.png"
|
||||
/>
|
||||
<text class="text_21">应付：</text>
|
||||
<text class="text_22">{{ sumprice }}</text>
|
||||
<text class="text_22">{{ sfAmount.toFixed(2) }}</text>
|
||||
<!-- <text class="text_24">00</text> -->
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center text-wrapper_3" @click="createOrder"><text class="font_7 text_23">微信支付</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="popup" background-color="#fff">
|
||||
<view class="popup-content">
|
||||
<addressComponentVue></addressComponentVue>
|
||||
</view>
|
||||
<view class="popup-content">
|
||||
<addressComponentVue></addressComponentVue>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
|
||||
<uni-popup ref="coupon">
|
||||
<view class="coupon-popup">
|
||||
<couponPopupVue></couponPopupVue>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import {onMounted, ref, toRaw} from 'vue'
|
||||
import emitter from '../../../utils/emitter'
|
||||
import { onLoad , onShow } from "@dcloudio/uni-app";
|
||||
import { baseUrl } from '../../../api/request';
|
||||
import addressComponentVue from '../component/addressComponent.vue';//导入组件
|
||||
import couponPopupVue from '../../coupon/component/couponPopup.vue';
|
||||
import { stateMap } from '../../../common/global';
|
||||
import * as math from 'mathjs'
|
||||
//一些暂时变量
|
||||
|
|
@ -178,33 +187,132 @@ const orderItemList = ref({})
|
|||
const totalInfo = ref([]) //购物车传过来的批量商品
|
||||
const note = ref('')
|
||||
const postCartArr = ref([])
|
||||
const quantity = ref(1) //商品数量
|
||||
onMounted(() => {
|
||||
getFonts()
|
||||
//将关闭弹窗方法传入弹窗页面，绑定弹窗按钮可关闭弹窗
|
||||
emitter.on('close', () => {
|
||||
close()
|
||||
const quantity = ref(1) //商品数量
|
||||
const couponIsShow = ref(false)
|
||||
|
||||
const coupon = ref(null)
|
||||
|
||||
|
||||
|
||||
const couponObj = ref({})
|
||||
const templateString = ref('')
|
||||
const conditionAmount = ref(0)
|
||||
const sfAmount = ref(0)
|
||||
const myCouponList = ref([])
|
||||
const cookie = wx.getStorageSync("cookie") //请求头
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getFonts()
|
||||
// 将关闭弹窗方法传入弹窗页面，绑定弹窗按钮可关闭弹窗
|
||||
console.log('======================================>', popup.value)
|
||||
emitter.on('closeAddress', () => {
|
||||
popup.value.close()
|
||||
})
|
||||
emitter.on('closeCoupon', () => {
|
||||
coupon.value.close()
|
||||
})
|
||||
|
||||
emitter.on('getCouponObj', (val) => {
|
||||
couponObj.value = val
|
||||
templateString.value = "-￥" + val.couponVO.conditionAmount.toFixed(2)
|
||||
conditionAmount.value = val.couponVO.conditionAmount
|
||||
sfAmount.value = sumprice.value - conditionAmount.value
|
||||
console.log(sfAmount.value)
|
||||
})
|
||||
console.log('===============start===============')
|
||||
})
|
||||
//获取地址信息
|
||||
emitter.on('addressInfo', (val) =>{
|
||||
addressRealInfo.value = val
|
||||
|
||||
onLoad( async (options)=>{
|
||||
totalInfo.value = JSON.parse(options.cartInfo)
|
||||
await getProduct()
|
||||
await getMyCouponList()
|
||||
})
|
||||
})
|
||||
onLoad((options)=>{
|
||||
totalInfo.value = JSON.parse(options.cartInfo)
|
||||
console.log('options.cartInfo-->',JSON.parse(options.cartInfo));
|
||||
console.log('totalInfo.value-->',toRaw(totalInfo.value) );
|
||||
getProduct()
|
||||
})
|
||||
onShow(()=>{
|
||||
userInfo.value = wx.getStorageSync('userInfo') //从微信缓存中获取用户信息
|
||||
getDefaultAddress()
|
||||
// computed()
|
||||
})
|
||||
//关闭弹窗
|
||||
const close = () => {
|
||||
popup.value.close()
|
||||
}
|
||||
onShow(()=>{
|
||||
userInfo.value = wx.getStorageSync('userInfo') //从微信缓存中获取用户信息
|
||||
getDefaultAddress()
|
||||
})
|
||||
|
||||
|
||||
|
||||
const openCoupon = () => {
|
||||
emitter.emit('getTotalPrice', sumprice.value)
|
||||
coupon.value.open('bottom')
|
||||
}
|
||||
|
||||
const getMyCouponList = async () => {
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/coupon/list/use',
|
||||
method: 'POST',
|
||||
header: {
|
||||
cookie
|
||||
},
|
||||
data: {
|
||||
currentAmount: sumprice.value,
|
||||
isAvailable: true
|
||||
}
|
||||
})
|
||||
myCouponList.value = res.data.data
|
||||
templateString.value = myCouponList.value.length + '张优惠券可用'
|
||||
console.log('============================>', myCouponList.value)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//加载弹窗。默认从底部弹出
|
||||
const loadPop =() =>{
|
||||
popup.value.open('bottom')
|
||||
|
|
@ -268,6 +376,7 @@ const getProduct = async ()=> {
|
|||
const dealRes =(res)=> { //处理来自后端的数据
|
||||
productObject.value = res.data.data
|
||||
sumprice.value = res.data.data.price
|
||||
sfAmount.value = res.data.data.price
|
||||
console.log('productArr--->',productObject.value);
|
||||
}
|
||||
//减少当前商品数量
|
||||
|
|
@ -359,14 +468,23 @@ const textAssign = (e) => { //文本输入框赋值方法
|
|||
console.log('note--->',note.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.popup-content {
|
||||
height: 392px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
.coupon-popup {
|
||||
height: 1200rpx;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
.ml-17 {
|
||||
margin-left: 31.88rpx;
|
||||
}
|
||||
|
|
@ -572,8 +690,7 @@ const textAssign = (e) => { //文本输入框赋值方法
|
|||
color: #323232;
|
||||
}
|
||||
.group_10 {
|
||||
padding-left: 22.97rpx;
|
||||
padding-right: 3.75rpx;
|
||||
padding: 25rpx 3.75rpx 25rpx 22.97rpx;
|
||||
}
|
||||
.group_11 {
|
||||
padding: 26.25rpx 10.42rpx 28.13rpx 24.62rpx;
|
||||
|
|
@ -594,7 +711,7 @@ const textAssign = (e) => { //文本输入框赋值方法
|
|||
color: #ffaaa5;
|
||||
}
|
||||
.group_12 {
|
||||
padding: 26.25rpx 11.94rpx 28.13rpx 23.44rpx;
|
||||
padding: 26.25rpx 23.94rpx 28.13rpx 23.44rpx;
|
||||
}
|
||||
.text_18 {
|
||||
line-height: 27.77rpx;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user