duantuihe/pages/my/charge/index.vue

<template>
	<view class="container">
		<navBar title="充值次数" :back="true" color="#333333" background="#FFFFFF" />

		<view class="addBg">
			<view class="topBox">
				<view class="userBox">
					<image class="avatar" :src="picBase+'edit.png'" mode=""></image>

					<view class="right">
						<view class="nickname">
							刘晓艺
						</view>
						<view class="bot">
							<image class="icon" :src="picBase+'edit.png'" mode=""></image>
							绘画次数：3
						</view>
					</view>
				</view>

				<view class="btn">
					记录
				</view>
			</view>



			<view class="mainBox">
				<view class="tagLine">

				</view>
				<view class="carItem " :class="[index==curIndex?'bor':'']" v-for="(item,index) in 8"
					@click="selTaocan(index)">
					<view class="left">
						<view class="name">
							新用户专享套餐
						</view>
						<view class="count">
							次数：1
						</view>
					</view>
					<view class="right">
						￥1
					</view>
				</view>
			</view>

		</view>
		<view class="btnBox">
			<view class="btn">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	// import navBar from '@/components/navBar/index.vue'
	export default {
		// components: {
		// 	navBar
		// },
		data() {
			return {
				picBase: this.$picBase2,
				curIndex: 0,
			}
		},
		onLoad() {

		},
		methods: {
			selTaocan(i) {
				this.curIndex = i
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>