206 lines
4.6 KiB
Vue
206 lines
4.6 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="card">
|
||
<view class="item">
|
||
<view class="lable">商品兑换券名称</view>
|
||
<view class="value">
|
||
<up-input v-model="formData.title" placeholder="填写名称" border="none" clearable ></up-input>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="lable">使用门槛</view>
|
||
<view class="value">
|
||
<view>满</view><input v-model="formData.fullAmount" placeholder="填写金额" border="none"></input><view>元，可用</view>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="lable">总发放数量</view>
|
||
<view class="value">
|
||
<up-input v-model="formData.number" 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" v-if='formData.products.length <= 0'>选择指定商品</view>
|
||
<view class="goodsName" v-else>
|
||
<view class="goodsItem" v-for="(item,index) in formData.products" :key="index">
|
||
<view class="productName">{{item.name}}</view><up-input @tap.stop="stop" style="border-bottom: 1rpx solid #666;" v-model="item.num" placeholder="填写数量" border="none" ></up-input>
|
||
</view>
|
||
</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 go from '@/commons/utils/go.js'
|
||
import myActionSheet from '@/components/my-components/my-action-sheet';
|
||
import selectGoods from './components/select-goods';
|
||
import { getTbShopCouponInfo, addTbShopCoupon } from '@/http/yskApi/coupon.js'
|
||
import { reactive, ref } from 'vue';
|
||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||
const pageData = reactive({
|
||
id: null,
|
||
goodsData: null,
|
||
title: "",
|
||
show: false,
|
||
})
|
||
let formData = reactive({
|
||
title: "",
|
||
type: '2',
|
||
fullAmount: null,
|
||
number: null,
|
||
products: []
|
||
})
|
||
|
||
onLoad((options) => {
|
||
if ( options.type == 'info' ) {
|
||
pageData.id = options.id;
|
||
getConponInfo();
|
||
}
|
||
})
|
||
|
||
let goods = ref(null)
|
||
let selectGoodsOpen = () => {
|
||
goods.value.open();
|
||
}
|
||
|
||
let getConponInfo = () => {
|
||
getTbShopCouponInfo(pageData.id).then((res) => {
|
||
// formData = res;
|
||
for (let item in res) {
|
||
formData[item] = res[item]
|
||
}
|
||
console.log(formData)
|
||
})
|
||
}
|
||
|
||
let stop = () => { }
|
||
|
||
let affirm = (item) => {
|
||
pageData.goodsData = item;
|
||
formData.products = [];
|
||
formData.products.push({
|
||
productId: item.id,
|
||
name: item.name,
|
||
num: null
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 保存
|
||
*/
|
||
let save = () => {
|
||
let params = {
|
||
...formData
|
||
}
|
||
addTbShopCoupon(params).then((res) => {
|
||
go.back(1)
|
||
})
|
||
}
|
||
|
||
</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;
|
||
}
|
||
.goodsItem{
|
||
display: flex;
|
||
align-items: center;
|
||
.productName{
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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> |