819 lines
18 KiB
Vue
819 lines
18 KiB
Vue
|
<template>
|
|||
|
|
<view class="page">
|
|||
|
|
<u-navbar :title="isEdit ? '编辑推广' : '新增推广'" :border-bottom="false" :background="bgc" back-icon-color="#111827" title-color='#111827'
|
|||
|
|
title-size='34' title-bold height='44'>
|
|||
|
|
</u-navbar>
|
|||
|
|
|
|||
|
|
<!-- 表单区域 -->
|
|||
|
|
<view class="form-container">
|
|||
|
|
<!-- 用户手机号 -->
|
|||
|
|
<view class="form-item">
|
|||
|
|
<view class="form-label">
|
|||
|
|
<text class="label-text">用户手机号</text>
|
|||
|
|
<text class="label-hint"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="form-input">
|
|||
|
|
<input type="text" v-model="formData.userPhone" placeholder="请输入用户手机号" maxlength="11" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 分成比例 -->
|
|||
|
|
<view class="form-item">
|
|||
|
|
<view class="form-label">
|
|||
|
|
<text class="label-text">分成比例</text>
|
|||
|
|
<text class="label-hint">0-100%</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="form-input with-suffix">
|
|||
|
|
<input type="number" :value="pointPercent" placeholder="请输入分成比例" @input="onPointInput" />
|
|||
|
|
<text class="suffix">%</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 状态 -->
|
|||
|
|
<view class="form-item">
|
|||
|
|
<view class="form-label">
|
|||
|
|
<text class="label-text">状态</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="form-select" @click="showStatusPicker = true">
|
|||
|
|
<text :class="[formData.status ? '' : 'placeholder']">{{ statusText || '请选择状态' }}</text>
|
|||
|
|
<u-icon name="arrow-right" size="28" color="#999"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 关联卡券 -->
|
|||
|
|
<view class="form-item">
|
|||
|
|
<view class="form-label">
|
|||
|
|
<text class="label-text">关联卡券</text>
|
|||
|
|
<text class="label-hint">可多选</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="form-select" @click="openCouponPicker">
|
|||
|
|
<text :class="[selectedCoupons.length === 0 ? 'placeholder' : '']">
|
|||
|
|
{{ selectedCoupons.length > 0 ? '已选择' + selectedCoupons.length + '张卡券' : '请选择卡券' }}
|
|||
|
|
</text>
|
|||
|
|
<u-icon name="arrow-right" size="28" color="#999"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 已选卡券展示 -->
|
|||
|
|
<view class="selected-coupons" v-if="selectedCoupons.length > 0">
|
|||
|
|
<view class="coupon-tag" v-for="(coupon, index) in selectedCoupons" :key="coupon.id" @click="removeCoupon(index)">
|
|||
|
|
<text>{{ coupon.name }}</text>
|
|||
|
|
<u-icon name="close" size="24" color="#999"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 备注 -->
|
|||
|
|
<view class="form-item textarea-item">
|
|||
|
|
<view class="form-label">
|
|||
|
|
<text class="label-text">备注</text>
|
|||
|
|
<text class="label-hint">选填</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="form-textarea">
|
|||
|
|
<textarea v-model="formData.remark" placeholder="请输入备注信息" maxlength="200" />
|
|||
|
|
<text class="word-count">{{ remarkLength }}/200</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 底部占位 -->
|
|||
|
|
<view class="footer-placeholder"></view>
|
|||
|
|
|
|||
|
|
<!-- 底部按钮 -->
|
|||
|
|
<view class="footer-container">
|
|||
|
|
<view class="btn-group" v-if="isEdit">
|
|||
|
|
<view class="delete-btn" @click="handleDelete">
|
|||
|
|
<text>删除</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="save-btn" @click="handleSave">
|
|||
|
|
<text>保存修改</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="add-btn-wrap" v-else @click="handleSave">
|
|||
|
|
<view class="btn-shadow"></view>
|
|||
|
|
<view class="btn-content">
|
|||
|
|
<text>确认新增</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 状态选择器 -->
|
|||
|
|
<u-select v-model="showStatusPicker" :list="statusList" @confirm="onStatusConfirm"></u-select>
|
|||
|
|
|
|||
|
|
<!-- 卡券选择弹窗 -->
|
|||
|
|
<view class="coupon-popup" v-if="showCouponPicker">
|
|||
|
|
<view class="popup-mask" @click="closeCouponPicker"></view>
|
|||
|
|
<view class="popup-content">
|
|||
|
|
<view class="popup-header">
|
|||
|
|
<text class="popup-title">选择卡券</text>
|
|||
|
|
<text class="popup-close" @click="closeCouponPicker">×</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 搜索框 -->
|
|||
|
|
<view class="search-box">
|
|||
|
|
<u-icon name="search" size="28" color="#999"></u-icon>
|
|||
|
|
<input type="text" v-model="couponSearchKey" placeholder="搜索卡券名称" @input="filterCoupons" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 卡券列表 -->
|
|||
|
|
<scroll-view scroll-y class="coupon-list">
|
|||
|
|
<view class="coupon-item"
|
|||
|
|
v-for="coupon in filteredCouponList"
|
|||
|
|
:key="coupon.id"
|
|||
|
|
@click="toggleCoupon(coupon)"
|
|||
|
|
:class="[coupon.isSelected ? 'selected' : '']">
|
|||
|
|
<view class="coupon-info">
|
|||
|
|
<text class="coupon-name">{{ coupon.name }}</text>
|
|||
|
|
<text class="coupon-desc">有效期：{{ coupon.validDays }}天 | ¥{{ coupon.price }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="check-box" :class="[coupon.isSelected ? 'checked' : '']">
|
|||
|
|
<u-icon v-if="coupon.isSelected" name="checkmark" size="24" color="#fff"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<u-empty v-if="filteredCouponList.length === 0" mode="search" text="暂无卡券" margin-top="60"></u-empty>
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
<!-- 确认按钮 -->
|
|||
|
|
<view class="popup-footer">
|
|||
|
|
<view class="confirm-btn" @click="confirmCouponSelect">
|
|||
|
|
<text>确认选择 ({{ tempSelectedCount }})</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
bgc: {
|
|||
|
|
backgroundColor: "#F7F8FA",
|
|||
|
|
},
|
|||
|
|
isEdit: false,
|
|||
|
|
id: '',
|
|||
|
|
areaId: '',
|
|||
|
|
formData: {
|
|||
|
|
areaId: '',
|
|||
|
|
userPhone: '',
|
|||
|
|
point: null,
|
|||
|
|
status: '1',
|
|||
|
|
couponIds: [],
|
|||
|
|
remark: ''
|
|||
|
|
},
|
|||
|
|
pointPercent: '', // 用于显示的百分比值
|
|||
|
|
showStatusPicker: false,
|
|||
|
|
statusList: [
|
|||
|
|
{ value: '1', label: '启用' },
|
|||
|
|
{ value: '2', label: '禁用' }
|
|||
|
|
],
|
|||
|
|
showCouponPicker: false,
|
|||
|
|
couponList: [], // 所有卡券列表
|
|||
|
|
filteredCouponList: [], // 过滤后的卡券列表
|
|||
|
|
selectedCoupons: [], // 已选择的卡券
|
|||
|
|
tempSelectedIds: [], // 临时选择的卡券ID（弹窗中）
|
|||
|
|
couponSearchKey: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 状态文本
|
|||
|
|
statusText() {
|
|||
|
|
if (this.formData.status === '1') return '启用'
|
|||
|
|
if (this.formData.status === '2') return '禁用'
|
|||
|
|
return ''
|
|||
|
|
},
|
|||
|
|
// 备注长度
|
|||
|
|
remarkLength() {
|
|||
|
|
return (this.formData.remark || '').length
|
|||
|
|
},
|
|||
|
|
// 临时选择数量
|
|||
|
|
tempSelectedCount() {
|
|||
|
|
return this.tempSelectedIds.length
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.areaId = option.areaId || ''
|
|||
|
|
this.formData.areaId = this.areaId
|
|||
|
|
|
|||
|
|
if (option.id) {
|
|||
|
|
this.id = option.id
|
|||
|
|
this.isEdit = true
|
|||
|
|
this.getDetail()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.getCouponList()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 分成比例输入（只允许整数 0-100）
|
|||
|
|
onPointInput(e) {
|
|||
|
|
let v = (e && e.detail && e.detail.value) ? String(e.detail.value) : ''
|
|||
|
|
// 只保留数字
|
|||
|
|
v = v.replace(/\\D/g, '')
|
|||
|
|
if (v === '') {
|
|||
|
|
this.pointPercent = ''
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
let num = parseInt(v, 10)
|
|||
|
|
if (isNaN(num)) {
|
|||
|
|
this.pointPercent = ''
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (num > 100) num = 100
|
|||
|
|
if (num < 0) num = 0
|
|||
|
|
this.pointPercent = String(num)
|
|||
|
|
},
|
|||
|
|
// 获取详情
|
|||
|
|
getDetail() {
|
|||
|
|
this.$u.get('/bst/areaPromotion/' + this.id).then(res => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
const data = res.data || {}
|
|||
|
|
this.formData = {
|
|||
|
|
areaId: data.areaId || this.areaId,
|
|||
|
|
userPhone: data.userPhone || '',
|
|||
|
|
point: data.point,
|
|||
|
|
status: data.status || '1',
|
|||
|
|
couponIds: data.couponIds || [],
|
|||
|
|
remark: data.remark || ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 转换分成比例为百分比显示
|
|||
|
|
if (data.point !== null && data.point !== undefined) {
|
|||
|
|
this.pointPercent = String(Math.round(data.point * 100))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置已选卡券
|
|||
|
|
if (data.couponIds && data.couponIds.length > 0) {
|
|||
|
|
this.setSelectedCoupons(data.couponIds)
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg || '获取详情失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 获取卡券列表
|
|||
|
|
getCouponList() {
|
|||
|
|
this.$u.get('/bst/vip/list', {
|
|||
|
|
areaId: this.areaId,
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 999
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
const rows = res.rows || []
|
|||
|
|
// 给每个卡券添加isSelected属性
|
|||
|
|
this.couponList = rows.map(item => {
|
|||
|
|
return {
|
|||
|
|
...item,
|
|||
|
|
isSelected: false
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.filteredCouponList = JSON.parse(JSON.stringify(this.couponList))
|
|||
|
|
|
|||
|
|
// 如果已有选中的卡券，更新选中状态
|
|||
|
|
if (this.formData.couponIds && this.formData.couponIds.length > 0) {
|
|||
|
|
this.setSelectedCoupons(this.formData.couponIds)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 根据ID设置已选卡券
|
|||
|
|
setSelectedCoupons(ids) {
|
|||
|
|
this.selectedCoupons = this.couponList.filter(item => ids.indexOf(item.id) > -1)
|
|||
|
|
},
|
|||
|
|
// 打开卡券选择器
|
|||
|
|
openCouponPicker() {
|
|||
|
|
// 初始化临时选择ID
|
|||
|
|
this.tempSelectedIds = this.selectedCoupons.map(item => item.id)
|
|||
|
|
this.couponSearchKey = ''
|
|||
|
|
// 更新列表的选中状态
|
|||
|
|
this.filteredCouponList = this.couponList.map(item => {
|
|||
|
|
return {
|
|||
|
|
...item,
|
|||
|
|
isSelected: this.tempSelectedIds.indexOf(item.id) > -1
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.showCouponPicker = true
|
|||
|
|
},
|
|||
|
|
// 关闭卡券选择器
|
|||
|
|
closeCouponPicker() {
|
|||
|
|
this.showCouponPicker = false
|
|||
|
|
},
|
|||
|
|
// 过滤卡券
|
|||
|
|
filterCoupons() {
|
|||
|
|
let list = []
|
|||
|
|
if (!this.couponSearchKey) {
|
|||
|
|
list = JSON.parse(JSON.stringify(this.couponList))
|
|||
|
|
} else {
|
|||
|
|
const key = this.couponSearchKey.toLowerCase()
|
|||
|
|
list = this.couponList.filter(item => item.name.toLowerCase().indexOf(key) > -1)
|
|||
|
|
}
|
|||
|
|
// 更新选中状态
|
|||
|
|
this.filteredCouponList = list.map(item => {
|
|||
|
|
return {
|
|||
|
|
...item,
|
|||
|
|
isSelected: this.tempSelectedIds.indexOf(item.id) > -1
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 切换卡券选择
|
|||
|
|
toggleCoupon(coupon) {
|
|||
|
|
const index = this.tempSelectedIds.indexOf(coupon.id)
|
|||
|
|
if (index > -1) {
|
|||
|
|
this.tempSelectedIds.splice(index, 1)
|
|||
|
|
} else {
|
|||
|
|
this.tempSelectedIds.push(coupon.id)
|
|||
|
|
}
|
|||
|
|
// 更新列表选中状态
|
|||
|
|
this.filteredCouponList = this.filteredCouponList.map(item => {
|
|||
|
|
return {
|
|||
|
|
...item,
|
|||
|
|
isSelected: this.tempSelectedIds.indexOf(item.id) > -1
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 确认卡券选择
|
|||
|
|
confirmCouponSelect() {
|
|||
|
|
this.selectedCoupons = this.couponList.filter(item => this.tempSelectedIds.indexOf(item.id) > -1)
|
|||
|
|
this.formData.couponIds = this.tempSelectedIds.slice()
|
|||
|
|
this.showCouponPicker = false
|
|||
|
|
},
|
|||
|
|
// 移除已选卡券
|
|||
|
|
removeCoupon(index) {
|
|||
|
|
this.selectedCoupons.splice(index, 1)
|
|||
|
|
this.formData.couponIds = this.selectedCoupons.map(item => item.id)
|
|||
|
|
},
|
|||
|
|
// 状态选择确认
|
|||
|
|
onStatusConfirm(e) {
|
|||
|
|
this.formData.status = e[0].value
|
|||
|
|
},
|
|||
|
|
// 保存
|
|||
|
|
handleSave() {
|
|||
|
|
// 转换分成比例
|
|||
|
|
if (this.pointPercent) {
|
|||
|
|
const percent = parseInt(this.pointPercent, 10)
|
|||
|
|
if (isNaN(percent) || percent < 0 || percent > 100) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '分成比例需在0-100之间',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.formData.point = percent / 100
|
|||
|
|
} else {
|
|||
|
|
this.formData.point = null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 验证手机号格式
|
|||
|
|
if (this.formData.userPhone && !/^1[3-9]\d{9}$/.test(this.formData.userPhone)) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入正确的手机号',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const submitData = JSON.parse(JSON.stringify(this.formData))
|
|||
|
|
|
|||
|
|
if (this.isEdit) {
|
|||
|
|
submitData.id = this.id
|
|||
|
|
// 修改
|
|||
|
|
this.$u.put('/bst/areaPromotion', submitData).then(res => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '修改成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}, 1500)
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg || '修改失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
// 新增
|
|||
|
|
this.$u.post('/bst/areaPromotion', submitData).then(res => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '新增成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}, 1500)
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg || '新增失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 删除
|
|||
|
|
handleDelete() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确定要删除该推广吗？',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
this.$u.delete('/bst/areaPromotion/' + this.id).then(res => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '删除成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}, 1500)
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg || '删除失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
background-color: #F7F8FA;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page {
|
|||
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-container {
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-item {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
|
|||
|
|
.form-label {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.label-text {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label-hint {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
margin-left: 12rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-input {
|
|||
|
|
background: #F7F8FA;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
|
|||
|
|
input {
|
|||
|
|
width: 100%;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.with-suffix {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
input {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.suffix {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666;
|
|||
|
|
margin-left: 12rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-select {
|
|||
|
|
background: #F7F8FA;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.placeholder {
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.textarea-item {
|
|||
|
|
.form-textarea {
|
|||
|
|
background: #F7F8FA;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
textarea {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 200rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.word-count {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 24rpx;
|
|||
|
|
bottom: 16rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selected-coupons {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
|
|||
|
|
.coupon-tag {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: baseline;
|
|||
|
|
background: linear-gradient(135deg, #E8F4FD 0%, #D4ECFD 100%);
|
|||
|
|
padding: 12rpx 20rpx;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
margin-right: 16rpx;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #4297F3;
|
|||
|
|
margin-right: 12rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-placeholder {
|
|||
|
|
height: 200rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-container {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 60rpx;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
z-index: 100;
|
|||
|
|
padding: 0 32rpx;
|
|||
|
|
|
|||
|
|
.btn-group {
|
|||
|
|
display: flex;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.delete-btn {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 100rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border: 2rpx solid #FF4D4F;
|
|||
|
|
border-radius: 100rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-right: 24rpx;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #FF4D4F;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.save-btn {
|
|||
|
|
flex: 2;
|
|||
|
|
height: 100rpx;
|
|||
|
|
background: linear-gradient(135deg, #4297F3 0%, #2B76E5 100%);
|
|||
|
|
border-radius: 100rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-shadow: 0 10rpx 20rpx rgba(66, 151, 243, 0.3);
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-btn-wrap {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100rpx;
|
|||
|
|
|
|||
|
|
.btn-content {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(135deg, #4297F3 0%, #2B76E5 100%);
|
|||
|
|
border-radius: 100rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
z-index: 2;
|
|||
|
|
box-shadow: 0 10rpx 20rpx rgba(66, 151, 243, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-shadow {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20rpx;
|
|||
|
|
left: 10%;
|
|||
|
|
width: 80%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: #4297F3;
|
|||
|
|
filter: blur(20rpx);
|
|||
|
|
opacity: 0.4;
|
|||
|
|
border-radius: 100rpx;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 卡券选择弹窗
|
|||
|
|
.coupon-popup {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
z-index: 1000;
|
|||
|
|
|
|||
|
|
.popup-mask {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: rgba(0, 0, 0, 0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-content {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 40rpx 40rpx 0 0;
|
|||
|
|
max-height: 70vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
|
|||
|
|
.popup-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
border-bottom: 1rpx solid #F0F0F0;
|
|||
|
|
|
|||
|
|
.popup-title {
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-close {
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
color: #999;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-box {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 24rpx 32rpx;
|
|||
|
|
padding: 20rpx 24rpx;
|
|||
|
|
background: #F7F8FA;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
|
|||
|
|
input {
|
|||
|
|
flex: 1;
|
|||
|
|
margin-left: 16rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.coupon-list {
|
|||
|
|
flex: 1;
|
|||
|
|
width: 720rpx;
|
|||
|
|
margin: auto;
|
|||
|
|
max-height: 44vh;
|
|||
|
|
|
|||
|
|
.coupon-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 28rpx 24rpx;
|
|||
|
|
background: #F9FAFB;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
|
|||
|
|
.coupon-info {
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.coupon-name {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333;
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.coupon-desc {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.check-box {
|
|||
|
|
width: 44rpx;
|
|||
|
|
height: 44rpx;
|
|||
|
|
border: 2rpx solid #D9D9D9;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.checked {
|
|||
|
|
background: #4297F3;
|
|||
|
|
border-color: #4297F3;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selected {
|
|||
|
|
background: linear-gradient(135deg, #E8F4FD 0%, #D4ECFD 100%);
|
|||
|
|
border: 2rpx solid #4297F3;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-footer {
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
|
|||
|
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
|||
|
|
border-top: 1rpx solid #F0F0F0;
|
|||
|
|
|
|||
|
|
.confirm-btn {
|
|||
|
|
height: 96rpx;
|
|||
|
|
background: linear-gradient(135deg, #4297F3 0%, #2B76E5 100%);
|
|||
|
|
border-radius: 100rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|