201 lines
6.6 KiB
Vue
201 lines
6.6 KiB
Vue
<template>
|
|
<view class="page">
|
|
<uni-nav-bar @clickLeft="goto(1, 1)" left-icon="back" :border="false" :shadow="false" :fixed="true"
|
|
:title="$t('Select.title')" backgroundColor="#fff" :statusBar="true"></uni-nav-bar>
|
|
<view>
|
|
<view style="background-color: #fff;">
|
|
<uni-search-bar class="uni-mt-10" radius="10" v-model="kw" @clear="clear"
|
|
:placeholder="$t('Select.text1')" clearButton="auto" cancelButton="none" @confirm="search" />
|
|
</view>
|
|
<!-- 内容切换 -->
|
|
<view class="content">
|
|
<view style="width: 94%; margin: 20rpx auto;">
|
|
<view class="v1" :style="index==0 ? '' : 'margin-top: 20rpx'" v-if="list.length > 0" v-for="(item, index) in list" :key="index">
|
|
<uni-row :gutter="10" class="row">
|
|
<uni-col :span="6" style="text-align: center;">
|
|
<image class="i" :src="url" fit="cover"></image>
|
|
</uni-col>
|
|
<uni-col :span="18">
|
|
<view class="title">{{item.title}}</view>
|
|
<view style="font-size: 24rx; font-weight: 400; color: #999; line-height: 40rpx;">
|
|
<view style="width: 40%; float: left;">
|
|
<slider :value="item.used" :disabled="true" style="height: 16rpx;" min="0" :max="item.stock+item.used" step="100" />
|
|
</view>
|
|
<view style="width: 55%; float: left; line-height: 70rpx; margin-left: 5%;">
|
|
{{$t('Questionnaire.text4')}}: <span style="color: #1D61E7;">{{item.used}}</span>/{{item.stock+item.used}}
|
|
</view>
|
|
<view style="text-align: left; clear: both;">{{$t('Questionnaire.text5')}}: {{item.billing_cycle}} {{item.cycle_type}}</view>
|
|
</view>
|
|
<view style="font-size: 24rpx; font-weight: 400; color: #999; line-height: 40rpx;">
|
|
<view style="float: left; color: #333; font-size: 32rpx; font-weight: 500; line-height: 80rpx;">
|
|
{{$t('Questionnaire.text6')}}: <span style="font-size: 40rpx;">${{parseFloat(item.price).toFixed(2)}} </span>
|
|
</view>
|
|
<view style="float: right;">
|
|
<button type="primary" class="b" @click="onTokenJump('/pages/questionnaire/details?id='+item.id)">{{$t('Questionnaire.text7')}}</button>
|
|
</view>
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
</view>
|
|
<view style="text-align: center; padding-bottom: 160rpx;" v-if="list.length <= 0">
|
|
<image style="width: 360rpx; height: 360rpx; margin: 160rpx auto 0rpx auto;" src="/static/images/w5.png" mode="cover"></image>
|
|
<view style="color: #999; font-size: 28rpx; font-weight: 400;">{{$t('nodata')}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import zNavigation from '@/components/module/navigation.vue';
|
|
import {
|
|
mapState,
|
|
mapMutations
|
|
} from 'vuex';
|
|
export default {
|
|
components: {
|
|
zNavigation
|
|
},
|
|
data() {
|
|
return {
|
|
url:"/static/images/q1.png",
|
|
list:[],
|
|
par:{
|
|
page: 1,
|
|
limit: 10
|
|
},
|
|
kw: '',
|
|
lastPage: 0
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(['userInfo'])
|
|
},
|
|
//第一次加载
|
|
onLoad(e) {
|
|
if(e.kw){
|
|
this.kw = e.kw;
|
|
}
|
|
},
|
|
//页面显示
|
|
onShow() {
|
|
uni.showLoading({
|
|
title: this.$t('loading')
|
|
})
|
|
this.getlist();
|
|
},
|
|
//方法
|
|
methods: {
|
|
getlist(){
|
|
let data = {
|
|
page: this.par.page,
|
|
limit: this.par.limit,
|
|
lang: this.$i18n.locale,
|
|
kw: this.kw
|
|
};
|
|
this.$http.post('/api/product/list', data).then(res => {
|
|
if(res.code == 0){
|
|
res.data.data.forEach(item => {
|
|
this.list.push(item);
|
|
});
|
|
this.par.lastPage = res.data.last_page
|
|
uni.hideLoading();
|
|
}
|
|
}).catch(err => {
|
|
uni.hideLoading()
|
|
});
|
|
},
|
|
goto(url, type) {
|
|
if (type == 2) {
|
|
return uni.switchTab({ url: url })
|
|
}
|
|
if (type == 1) {
|
|
return uni.navigateBack({ delta: url });
|
|
}
|
|
uni.navigateTo({
|
|
url: url
|
|
})
|
|
},
|
|
onTokenJump(url) {
|
|
if(this.userInfo.token === typeof(undefined) || this.userInfo.token === undefined){
|
|
uni.showModal({
|
|
title: this.$t('gotoLogin.title'),
|
|
content: this.$t('gotoLogin.content'),
|
|
confirmText: this.$t('gotoLogin.login'),
|
|
cancelText: this.$t('gotoLogin.cancel'),
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.navigateTo({
|
|
url: "/pages/mine/login"
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}else{
|
|
uni.navigateTo({
|
|
url: url
|
|
});
|
|
}
|
|
},
|
|
search(){
|
|
uni.showLoading({
|
|
title: this.$t('loading')
|
|
})
|
|
this.getlist();
|
|
},
|
|
clear(){
|
|
uni.showLoading({
|
|
title: this.$t('loading')
|
|
})
|
|
this.getlist();
|
|
}
|
|
},
|
|
//页面隐藏
|
|
onHide() {},
|
|
//页面卸载
|
|
onUnload() {},
|
|
//页面下来刷新
|
|
onPullDownRefresh() {},
|
|
//页面上拉触底
|
|
onReachBottom() {
|
|
if(this.par.page < fthis.par.lastPage){
|
|
this.par.page = this.par.page + 1;
|
|
this.getlist();
|
|
}
|
|
},
|
|
//用户点击分享
|
|
onShareAppMessage(e) {
|
|
return this.wxShare();
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import '@/style/mixin.scss';
|
|
body{background-color: #F8F8F8;}
|
|
.page{background-color: #F8F8F8; min-height: 100vh;}
|
|
.b{height: 70rpx; width: 200rpx; line-height: 70rpx; font-size: 28rpx;}
|
|
//修改slider高度
|
|
::v-deep .uni-slider-handle-wrapper {height: 14rpx !important;}
|
|
//修改slider选中的背景色
|
|
::v-deep .uni-slider-track {background-image: linear-gradient(to right,#6cd0ca,#133fce) !important;}
|
|
::v-deep .uni-slider-handle{display: none;}
|
|
::v-deep .uni-slider-thumb{display: none;}
|
|
::v-deep uni-slider{margin: 16rpx 0rpx !important;}
|
|
::v-deep uni-slider .uni-slider-tap-area{padding: 4rpx 0rpx !important;}
|
|
::v-deep .uni-slider-handle-wrapper{height: 24rpx;}
|
|
::v-deep uni-slider{padding: 0rpx;margin: 0rpx}
|
|
.v1{border-bottom: 2rpx solid #ddd; background-color: #fff; padding: 20rpx;}
|
|
.v1 .row{margin-top: 30rpx; border-radius: 40rpx;}
|
|
.v1 .row .i{width: 160rpx; height: 160rpx; margin: auto;}
|
|
.v1 .row .title{font-weight: 500; font-size: 32rpx; color: #333;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
|
|
.v2{ border-bottom: 2rpx solid #ddd; background-color: #fff; padding: 20rpx; width: 94%; margin: 0rpx auto; border-radius: 40rpx;}
|
|
.v2 .title{font-weight: 600; font-size: 32rpx; color: #333;}
|
|
.w{background-color: #F8F8F8; border-radius: 20rpx; padding: 40rpx 20rpx;}
|
|
.w .t{text-align: center; margin-top: 20rpx; font-size: 28rpx;}
|
|
.head-nav {display: flex;align-items: center;color: #999;font-size: 36rpx;font-weight: 500;background-color: #fff;}
|
|
.tab{color: #999;font-size: 32rpx;font-weight: 500;float: left;padding: 40rpx;}
|
|
.activite {color: #333;border-bottom: 4rpx solid #1D61E7;}
|
|
.head-nav>view {padding-bottom: 10rpx;}
|
|
.content {height: 100%; padding-bottom: 20rpx;}
|
|
</style> |