160 lines
3.3 KiB
Vue
160 lines
3.3 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="card">
|
||
<view class="item">
|
||
<view class="lable">商品兑换券名称</view>
|
||
<view class="value">
|
||
<up-input placeholder="填写名称" border="none" clearable ></up-input>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="lable">使用门槛</view>
|
||
<view class="value">
|
||
<view>满</view><input placeholder="填写金额" border="none"></input><view>元，可用</view>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="lable">总发放数量</view>
|
||
<view class="value">
|
||
<up-input v-model="saveData.num" placeholder="填写数量" border="none" clearable ></up-input>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card">
|
||
|
||
<view class="item">
|
||
<view class="lable">指定抵扣商品</view>
|
||
<view class="value">
|
||
<view class="selectGoods" @tap="selectGoodsOpen">
|
||
<view>
|
||
<view class="title">选择商品</view>
|
||
<view class="goodsName">选择指定商品</view>
|
||
</view>
|
||
<up-icon name="arrow-right" color="#9F9F9F" size="22"></up-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
<view class="bottomPop">
|
||
<button @click="save">保存</button>
|
||
</view>
|
||
|
||
<select-goods ref="goods" @affirm="affirm"></select-goods>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import myActionSheet from '@/components/my-components/my-action-sheet';
|
||
import selectGoods from './components/select-goods';
|
||
import {
|
||
reactive,
|
||
ref,
|
||
toRef,
|
||
watch
|
||
} from 'vue';
|
||
const pageData = reactive({
|
||
|
||
title: "",
|
||
show: false,
|
||
})
|
||
const saveData = reactive({
|
||
type: '1',
|
||
timeType: '1',
|
||
num: '',
|
||
})
|
||
|
||
let goods = ref(null)
|
||
let selectGoodsOpen = () => {
|
||
goods.value.open();
|
||
}
|
||
|
||
/**
|
||
* 保存
|
||
*/
|
||
let save = () => {
|
||
console.log(saveData.type)
|
||
console.log(saveData.timeType)
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
.content {
|
||
background: #F9F9F9;
|
||
padding: 32rpx 28rpx 150rpx 28rpx;
|
||
|
||
.card{
|
||
padding: 32rpx 24rpx;
|
||
background-color: #fff;
|
||
margin-bottom: 32rpx;
|
||
.item{
|
||
padding-bottom: 24rpx;
|
||
border-bottom: 2rpx solid #E5E5E5;
|
||
margin-bottom: 24rpx;
|
||
.lable{
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
margin-bottom: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.value{
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
input{
|
||
width: 150rpx;
|
||
text-align: center;
|
||
}
|
||
.selectGoods{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 32rpx 16rpx;
|
||
background: #F9F9F9;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
.title{
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.goodsName{
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.item:last-child{
|
||
border-bottom: none;
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
.bottomPop{
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 150rpx;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
>button {
|
||
width: 530rpx;
|
||
margin: 30rpx 0;
|
||
margin-left: 50%;
|
||
transform: translateX(-50%);
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
color: #fff;
|
||
background: #318AFE;
|
||
border-radius: 56rpx 56rpx 56rpx 56rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |