You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<template> <view class="main"> <view class="searchBox"> <searchRow placeholder="请输入模版名称/模版内容" /> </view> <view class="ul"> <view class="total" v-if="total">共{{total}}条</view> <view class="card" v-for="(item,index) in list" @click="chooseTemplate(item)" :class="{active: chooseTemp.id==item.id}"> <view class="row"> <view class="lab">模版名称</view> <view class="val">{{item.name}}</view> </view> <view class="row"> <view class="lab">模版内容</view> <view class="val">{{item.value}}</view> </view> <view class="row" v-if="item.description"> <view class="lab">模版描述</view> <view class="val">{{item.description}}</view> </view> </view> </view> <view class="btn_poz"> <view class="btnBg" @click="pickTemplate">确 定</view> </view> </view> </template>
<script> import { templateList } from '@/config/api.js' export default { data() { return { list: [], params: { name: '', value: '', // page: 1,
// size: 2
}, list: [], total: 0, chooseTemp: {} } }, onLoad() { this.templateListFn() }, onPullDownRefresh() { this.templateListFn(()=>{ uni.stopPullDownRefresh() }) }, methods: { async templateListFn(callback) { const {data: res} = await templateList(this.params) this.list = res.rows this.total = res.total console.log(res) callback&&callback() }, chooseTemplate(item) { this.chooseTemp = item }, pickTemplate() { uni.$emit('pickTemplate',this.chooseTemp) uni.navigateBack() } } } </script>
<style lang="scss" scoped> .searchBox { padding: 14rpx 30rpx; background-color: #fff; } .btn_poz { position: fixed; bottom: 0; left: 0; width: 100%; height: 100rpx; display: flex; justify-content: center; padding: 0 30px; background: #f5f5f5; align-items: center; .btnBg{ width: 100%; } } .ul { padding: 0rpx 30rpx 140rpx 30rpx; .total { height: 66rpx; line-height: 66rpx; font-size: 24rpx; color: #999; text-align: right; } } .card { padding: 20rpx; margin-bottom: 20rpx; background-color: #fff; &.active { border: 1px solid $themC; background-color: #dfeaf5; .row { color: $themC; } } .row { display: flex; font-size: 24rpx; color: #333; padding: 20rpx 0; .lab { width: 140rpx; } .val { flex: 1; width: 0; text-align: right; } } } </style>
|