初始项目
This commit is contained in:
liupopo
180
mallplusui-uniapp-app/pagesU/address/address.vue
Normal file
180
mallplusui-uniapp-app/pagesU/address/address.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<view class="content b-t">
|
||||
<view class="list b-b" v-for="(item, index) in addressList" :key="index">
|
||||
<view class="wrapper" @click="checkAddress(item)">
|
||||
<view class="u-box">
|
||||
<text class="name">{{ item.name }}</text>
|
||||
<text class="mobile">{{ item.phoneNumber }}</text>
|
||||
</view>
|
||||
<view class="address-box">
|
||||
<text v-if="item.defaultStatus == 1" class="tag">默认</text>
|
||||
<text class="address"> {{ item.province }}-{{ item.city }}-{{ item.region }}-{{ item.detailAddress }}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="" style="display: flex;flex-direction: row;width: 100%;justify-content: flex-end;">
|
||||
<view class="" style="width: 20%;display: flex;align-items: center;justify-content: center;" @click="addAddress('edit', item)">
|
||||
<text class="yticon icon-bianji"></text>
|
||||
<text style="font-size: 30upx;margin-left: 10upx;">编辑</text>
|
||||
</view>
|
||||
<view class="" style="width: 20%;display: flex;align-items: center;justify-content: center;" @click="delAddress(item)">
|
||||
<text class="yticon icon-iconfontshanchu1"></text>
|
||||
<text style="font-size: 30upx;">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--<text style="display:block;padding: 16upx 30upx 10upx;lihe-height: 1.6;color: #fa436a;font-size: 24upx;">
|
||||
重要：添加和修改地址回调仅增加了一条数据做演示，实际开发中将回调改为请求后端接口刷新一下列表即可
|
||||
</text>-->
|
||||
|
||||
<button class="add-btn" @click="addAddress('add')">新增地址</button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
|
||||
import Api from '@/common/api';
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
source: 0,
|
||||
addressList: [],
|
||||
};
|
||||
},
|
||||
async onLoad(option) {
|
||||
this.source = option.source;
|
||||
this.getListAddress()
|
||||
},
|
||||
async onShow(){
|
||||
this.getListAddress()
|
||||
},
|
||||
methods: {
|
||||
async getListAddress(){
|
||||
let params = {};
|
||||
this.addressList = await Api.apiCall('get', Api.goods.listAddress, params);
|
||||
},
|
||||
//选择地址
|
||||
checkAddress(item) {
|
||||
if (this.source == 1) {
|
||||
//this.$api.prePage()获取上一页实例，在App.vue定义
|
||||
this.$api.prePage().addressData = item;
|
||||
this.$api.prePage().addressId = item.id;
|
||||
uni.navigateBack();
|
||||
}
|
||||
},
|
||||
addAddress(type, item) {
|
||||
uni.navigateTo({
|
||||
url: `../../pagesU/address/addressManage?type=${type}&data=${JSON.stringify(item)}`
|
||||
});
|
||||
},
|
||||
//添加或修改成功之后回调
|
||||
refreshList(data, type) {
|
||||
//添加或修改后事件，这里直接在最前面添加了一条数据，实际应用中直接刷新地址列表即可
|
||||
this.addressList.unshift(data);
|
||||
|
||||
console.log(data, type);
|
||||
},
|
||||
// 删除地址
|
||||
async delAddress(item){
|
||||
console.log(item)
|
||||
// let params = {
|
||||
// id: item.id
|
||||
// }
|
||||
let data = await Api.apiCall('post', Api.goods.deleteAddress, {id: item.id});
|
||||
if(data){
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
})
|
||||
}else{
|
||||
uni.showToast({
|
||||
title: '删除失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
this.getListAddress();
|
||||
console.log("------删除-------",data)
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
padding-bottom: 120upx;
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
}
|
||||
.list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 20upx;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
}
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
.address-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10upx 0;
|
||||
.tag {
|
||||
font-size: 24upx;
|
||||
color: $base-color;
|
||||
margin-right: 10upx;
|
||||
background: #fffafb;
|
||||
border: 1px solid #ffb4c7;
|
||||
border-radius: 4upx;
|
||||
padding: 4upx 10upx;
|
||||
line-height: 1;
|
||||
}
|
||||
.address {
|
||||
font-size: 28upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
}
|
||||
.u-box {
|
||||
font-size: 32upx;
|
||||
color: $font-color-000;
|
||||
// margin-top: 16upx;
|
||||
.name {
|
||||
margin-right: 30upx;
|
||||
}
|
||||
}
|
||||
.icon-bianji {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// height: 80upx;
|
||||
font-size: 36upx;
|
||||
color: $font-color-light;
|
||||
// padding-left: 30upx;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
position: fixed;
|
||||
left: 30upx;
|
||||
right: 30upx;
|
||||
bottom: 16upx;
|
||||
z-index: 95;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 690upx;
|
||||
height: 80upx;
|
||||
font-size: 32upx;
|
||||
color: #fff;
|
||||
background-color: $base-color;
|
||||
border-radius: 10upx;
|
||||
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
|
||||
}
|
||||
</style>
|
||||
220
mallplusui-uniapp-app/pagesU/address/addressManage.vue
Normal file
220
mallplusui-uniapp-app/pagesU/address/addressManage.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
|
||||
<view class="row b-b">
|
||||
<text class="tit">联系人</text>
|
||||
<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" placeholder-class="placeholder" />
|
||||
</view>
|
||||
<view class="row b-b">
|
||||
<text class="tit">手机号</text>
|
||||
<input class="input" type="number" v-model="addressData.phoneNumber" placeholder="收货人手机号码" placeholder-class="placeholder" />
|
||||
</view>
|
||||
|
||||
<view class="row b-b">
|
||||
<text class="tit">城市</text>
|
||||
<input placeholder="请选择城市" disabled="true" :value="addressData.province + ' ' + addressData.city + ' ' + addressData.region" @click="lotusAddressData.visible = true" class="input">
|
||||
<lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address>
|
||||
</input>
|
||||
<text class="yticon icon-shouhuodizhi"></text>
|
||||
</view>
|
||||
<view class="row b-b">
|
||||
<text class="tit">地图:</text>
|
||||
|
||||
|
||||
<input class="input" @click="openMap()" type="text" value="" v-model="mapAddressName" placeholder="在地图上搜索并选择地址" disabled="true" />
|
||||
<text class="yticon icon-shouhuodizhi"></text>
|
||||
|
||||
</view>
|
||||
<view class="row b-b">
|
||||
<text class="tit">详细</text>
|
||||
<input class="input" type="text" v-model="addressData.detailAddress" placeholder="街道、楼号、门牌" placeholder-class="placeholder" />
|
||||
</view>
|
||||
|
||||
<view class="row default-row">
|
||||
<text class="tit">设为默认</text>
|
||||
<switch :checked="addressData.defaultStatus" color="#fa436a" @change="switchChange" />
|
||||
</view>
|
||||
<button class="add-btn" @click="confirm">提交</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Api from '@/common/api';
|
||||
import lotusAddress from "@/components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mapAddressName: '',
|
||||
addressData: {
|
||||
name: '',
|
||||
phoneNumber: '',
|
||||
province: '',
|
||||
city: '',
|
||||
region: '',
|
||||
detailAddress: '',
|
||||
defaultStatus: 0,
|
||||
def: false
|
||||
},
|
||||
lotusAddressData:{
|
||||
visible:false,
|
||||
provinceName:'',
|
||||
cityName:'',
|
||||
townName:'',
|
||||
},
|
||||
}
|
||||
},
|
||||
onLoad(option){
|
||||
let title = '新增收货地址';
|
||||
if(option.type==='edit'){
|
||||
title = '编辑收货地址'
|
||||
this.addressData = JSON.parse(option.data)
|
||||
}
|
||||
this.manageType = option.type;
|
||||
uni.setNavigationBarTitle({
|
||||
title
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
switchChange(e){
|
||||
this.addressData.defaultStatus = e.detail.value?1:0
|
||||
this.addressData.def = e.detail.value
|
||||
},
|
||||
openMap() {
|
||||
var _this = this;
|
||||
uni.chooseLocation({
|
||||
|
||||
success: function(res) {
|
||||
console.log('res', res);
|
||||
|
||||
_this.addressData.latitude = res.latitude;
|
||||
_this.addressData.longitude = res.longitude;
|
||||
_this.mapAddressName= res.address + res.name;
|
||||
_this.addressData.detailAddress = res.address + res.name;
|
||||
console.log('经度：' + res.longitude);
|
||||
console.log('详细地址：' + res.address);
|
||||
console.log('纬度：' + res.latitude);
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
choseValue(res){
|
||||
//res数据源包括已选省市区与省市区code
|
||||
this.lotusAddressData.visible = false;//visible为显示与关闭组件标识true显示false隐藏
|
||||
if(res.isChose){
|
||||
console.log(res)
|
||||
this.lotusAddressData.provinceName = res.provice;//省
|
||||
this.lotusAddressData.cityName = res.city;//市
|
||||
this.lotusAddressData.townName = res.town;//区
|
||||
|
||||
//赋值到addressData
|
||||
this.addressData.province = res.provice
|
||||
this.addressData.city = res.city
|
||||
this.addressData.region = res.town
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
//提交
|
||||
async confirm(){
|
||||
const that = this
|
||||
let data = this.addressData;
|
||||
if(!data.name){
|
||||
this.$api.msg('请填写收货人姓名');
|
||||
return;
|
||||
}
|
||||
if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.phoneNumber)){
|
||||
that.$api.msg('请输入正确的手机号码');
|
||||
return
|
||||
}
|
||||
if (!data.province) {
|
||||
that.$api.msg('请选择省市区');
|
||||
return
|
||||
}
|
||||
if (!data.city) {
|
||||
that.$api.msg('请选择二级城市')
|
||||
return
|
||||
}
|
||||
if (!data.region) {
|
||||
that.$api.msg('请选择三级区或县')
|
||||
return
|
||||
}
|
||||
if(!data.detailAddress){
|
||||
that.$api.msg('请输入详细地址');
|
||||
return
|
||||
}
|
||||
|
||||
let data1 = await Api.apiCall('post', Api.goods.addressSave, that.addressData);
|
||||
if (data1) {
|
||||
this.$api.msg(`保存成功`);
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta:1
|
||||
})
|
||||
|
||||
}, 800);
|
||||
} else {
|
||||
this.$api.msg(`保存失败`);
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
},
|
||||
components:{
|
||||
"lotus-address":lotusAddress
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
background: $page-color-base;
|
||||
padding-top: 16upx;
|
||||
}
|
||||
|
||||
.row{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding:0 30upx;
|
||||
height: 110upx;
|
||||
background: #fff;
|
||||
|
||||
.tit{
|
||||
flex-shrink: 0;
|
||||
width: 120upx;
|
||||
font-size: 30upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.input{
|
||||
flex: 1;
|
||||
font-size: 30upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.icon-shouhuodizhi{
|
||||
font-size: 36upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
}
|
||||
.default-row{
|
||||
margin-top: 16upx;
|
||||
.tit{
|
||||
flex: 1;
|
||||
}
|
||||
switch{
|
||||
transform: translateX(16upx) scale(.9);
|
||||
}
|
||||
}
|
||||
.add-btn{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 690upx;
|
||||
height: 80upx;
|
||||
margin: 60upx auto;
|
||||
font-size: $font-lg;
|
||||
color: #fff;
|
||||
background-color: $base-color;
|
||||
border-radius: 10upx;
|
||||
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
|
||||
}
|
||||
</style>
|
||||
314
mallplusui-uniapp-app/pagesU/address/addressManage1.vue
Normal file
314
mallplusui-uniapp-app/pagesU/address/addressManage1.vue
Normal file
@@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="box">
|
||||
<view class="box_left">收货人:</view>
|
||||
<view class="box_right"><input type="text" v-model="user.name" placeholder="为确保收货请使用真名" /></view>
|
||||
</view>
|
||||
<view class="box">
|
||||
<view class="box_left">手机号:</view>
|
||||
<view class="box_right"><input type="number" maxlength="11" v-model="user.phoneNumber" placeholder="请确保收货电话真实有效" /></view>
|
||||
</view>
|
||||
<view class="box">
|
||||
<view class="box_left">地区:</view>
|
||||
<view class="box_right">
|
||||
<view class="citybtn" @click="showMulLinkageThreePicker">{{ pickerText }}</view>
|
||||
<!-- <view><image src="../../static/xiala.png" mode=""></image></view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="box">
|
||||
<view class="box_left">地址定位:</view>
|
||||
<view class="box_right_right" @click="openMap()">
|
||||
<input type="text" value="" v-model="mapAddressName" placeholder="在地图上搜索并选择地址" disabled="true" />
|
||||
<!-- <text>{{ mapAddressName }}</text> -->
|
||||
<image src="/static/location.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box">
|
||||
<view class="box_left">详细地址:</view>
|
||||
<view class="box_right_right">
|
||||
<input type="text" value="" v-model="user.detailAddress" placeholder="街道门牌,楼层房间号等信息" />
|
||||
<image src="../../static/address.png" mode="" @click="gosite"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="box">
|
||||
<view class="box_left">
|
||||
身份证号
|
||||
</view>
|
||||
<view class="box_right">
|
||||
<input type="text" value="" v-model="IDcard" placeholder="身份证号码" />
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="box">
|
||||
<view class="box_left_two">设为默认收件地址:</view>
|
||||
<view class="box_right_two"><switch color="#D23535" :checked="user.defaultStatus == 1" style="transform:scale(0.8)" @change="switchBtn" /></view>
|
||||
</view>
|
||||
<button class="btn" @click="submit">提交</button>
|
||||
<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
|
||||
|
||||
import Api from '@/common/api';
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cityPickerValueDefault: [0, 0, 1],
|
||||
themeColor: '#007AFF',
|
||||
pickerText: '选择省/市/区',
|
||||
mode: '',
|
||||
deepLength: 1,
|
||||
pickerValueDefault: [0],
|
||||
pickerValueArray: [],
|
||||
user: {
|
||||
name: '', // [str] [必填] [收货人]
|
||||
phoneNumber: '',
|
||||
province: '', //[str] [必填] [省]
|
||||
city: '', // [str] [必填] [市]
|
||||
region: '', // [str] [必填] [区]
|
||||
detailAddress: '', // [str] [必填] [详址]
|
||||
defaultStatus: '0', // [int] [可选] [默认地址。1是0否]
|
||||
longitude: 0, //经度
|
||||
latitude: 0 //纬度
|
||||
},
|
||||
IDcard: '',
|
||||
id: '',
|
||||
mapAddressName: ''
|
||||
};
|
||||
},
|
||||
components: {
|
||||
mpvueCityPicker
|
||||
},
|
||||
onLoad(option) {
|
||||
console.log(option);
|
||||
let title = '新增收货地址';
|
||||
var that = this;
|
||||
if (option.type === 'edit') {
|
||||
title = '编辑收货地址';
|
||||
this.user = JSON.parse(option.data);
|
||||
console.log('user',this.user);
|
||||
that.id = this.user.id;
|
||||
var province = this.user.province;
|
||||
var city = this.user.city;
|
||||
var region = this.user.region;
|
||||
that.pickerText = province + '-' + city + '-' + region;
|
||||
}
|
||||
uni.setNavigationBarTitle({
|
||||
title
|
||||
});
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 三级联动选择
|
||||
showMulLinkageThreePicker() {
|
||||
this.$refs.mpvueCityPicker.show();
|
||||
},
|
||||
onConfirm(e) {
|
||||
console.log(e);
|
||||
var label = e.label;
|
||||
this.pickerText = label;
|
||||
var labelArr = label.split('-');
|
||||
this.user.province = labelArr[0];
|
||||
this.user.city = labelArr[1];
|
||||
this.user.region = labelArr[2];
|
||||
},
|
||||
gosite() {
|
||||
var that = this;
|
||||
uni.chooseLocation({
|
||||
success: function(res) {
|
||||
console.log('位置名称：' + res.name);
|
||||
console.log('详细地址：' + res.address);
|
||||
that.user.detailAddress = res.address;
|
||||
console.log('纬度：' + res.latitude);
|
||||
console.log('经度：' + res.longitude);
|
||||
}
|
||||
});
|
||||
},
|
||||
openMap() {
|
||||
var _this = this;
|
||||
uni.chooseLocation({
|
||||
keyword: _this.user.detailAddress,
|
||||
success: function(res) {
|
||||
console.log('res', res);
|
||||
|
||||
_this.user.latitude = res.latitude;
|
||||
_this.user.longitude = res.longitude;
|
||||
_this.mapAddressName = res.address + res.name;
|
||||
console.log('经度：' + res.longitude);
|
||||
console.log('详细地址：' + res.address);
|
||||
console.log('纬度：' + res.latitude);
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
async submit() {
|
||||
let params;
|
||||
var info = this.user,
|
||||
_this = this;
|
||||
if (info.name==''||info.phoneNumber==''||info.detailAddress=='') {
|
||||
uni.showToast({
|
||||
title: '请将信息填写完整',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
|
||||
if(!reg.test(info.phoneNumber)){
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机号',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.showLoading({
|
||||
title: '请稍等...'
|
||||
});
|
||||
if (_this.id) {
|
||||
params = {
|
||||
id: _this.id,
|
||||
defaultStatus: info.defaultStatus,
|
||||
|
||||
detailAddress: info.detailAddress,
|
||||
phoneNumber: info.phoneNumber,
|
||||
province: info.province,
|
||||
city: info.city,
|
||||
region: info.region,
|
||||
longitude: info.longitude,
|
||||
latitude: info.latitude,
|
||||
name: info.name
|
||||
};
|
||||
} else {
|
||||
params = {
|
||||
defaultStatus: info.defaultStatus,
|
||||
region: info.region,
|
||||
detailAddress: info.detailAddress,
|
||||
phoneNumber: info.phoneNumber,
|
||||
province: info.province,
|
||||
city: info.city,
|
||||
longitude: info.longitude,
|
||||
latitude: info.latitude,
|
||||
name: info.name
|
||||
};
|
||||
}
|
||||
let data = await Api.apiCall('post', Api.goods.addressSave, params);
|
||||
if (data) {
|
||||
this.$api.msg(`地址${_this.id ? '修改' : '添加'}成功`);
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta:1
|
||||
})
|
||||
// let url = '../../pagesU/address/address';
|
||||
// uni.navigateTo({
|
||||
// url
|
||||
// });
|
||||
}, 800);
|
||||
} else {
|
||||
this.$api.msg(`地址${_this.id ? '修改' : '添加'}失败`);
|
||||
}
|
||||
},
|
||||
switchBtn: function(e) {
|
||||
var that = this;
|
||||
console.log('switch1 发生 change 事件，携带值为', e.target.value);
|
||||
if (e.target.value == true) {
|
||||
that.user.defaultStatus = 1;
|
||||
} else {
|
||||
that.user.defaultStatus = 0;
|
||||
}
|
||||
console.log(that.user.defaultStatus);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: $page-color-base;
|
||||
padding-top: 16upx;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
font-size: 28upx;
|
||||
/* padding-top: 40upx; */
|
||||
color: #676769;
|
||||
}
|
||||
.box {
|
||||
width: 100%;
|
||||
padding: 0 20upx;
|
||||
height: 100upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* margin-bottom: 20upx; */
|
||||
border-bottom: 1upx solid #EEEEEE;
|
||||
}
|
||||
.box_left {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.box_left_two {
|
||||
width: 550upx;
|
||||
}
|
||||
.box_right {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
}
|
||||
.box_right_right {
|
||||
width: 85%;
|
||||
height: 80upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 3%;
|
||||
}
|
||||
.box_right_right input {
|
||||
width: 87%;
|
||||
height: 70upx;
|
||||
line-height: 70upx;
|
||||
}
|
||||
.box_right_right image {
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
}
|
||||
.box_right image {
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
margin-top: 20upx;
|
||||
margin-left: 30upx;
|
||||
}
|
||||
.box_right_two {
|
||||
width: 150upx;
|
||||
}
|
||||
|
||||
.box_right input {
|
||||
width: 97%;
|
||||
height: 80upx;
|
||||
padding-left: 3%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.btn {
|
||||
width: 690upx;
|
||||
height: 90upx;
|
||||
line-height: 90upx;
|
||||
background: #fa436a;
|
||||
/* background-color: rgba(242 155 135); */
|
||||
color: #ffffff;
|
||||
font-size: 32upx;
|
||||
margin-top: 120upx;
|
||||
}
|
||||
.citybtn {
|
||||
width: 80%;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
0
mallplusui-uniapp-app/pagesU/marking/index.vue
Normal file
0
mallplusui-uniapp-app/pagesU/marking/index.vue
Normal file
202
mallplusui-uniapp-app/pagesU/notice/notice.vue
Normal file
202
mallplusui-uniapp-app/pagesU/notice/notice.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="notice-item" v-for="(item, index) in goodsList" :key="index">
|
||||
<text class="time">{{ item.createTime |formatCreateTime}}</text>
|
||||
<view class="content" @click="navToDetailPage(item)">
|
||||
<text class="title">{{ item.title }}</text>
|
||||
<view class="img-wrapper"><image :src="item.pic" mode="aspectFill" class="pic"></image></view>
|
||||
<text class="introduce">{{ item.description }}</text>
|
||||
<view class="bot b-t" @click="navToDetailPage(item)">
|
||||
<text>查看详情</text>
|
||||
<text class="more-icon yticon icon-you"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import { formatDate } from '@/common/date';
|
||||
import Api from '@/common/api';
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageNum: 1,
|
||||
|
||||
goodsList: []
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.loadData();
|
||||
},
|
||||
onPageScroll(e) {
|
||||
//兼容iOS端下拉时顶部漂移
|
||||
if (e.scrollTop >= 0) {
|
||||
this.headerPosition = 'fixed';
|
||||
} else {
|
||||
this.headerPosition = 'absolute';
|
||||
}
|
||||
},
|
||||
//下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.pageNum = this.pageNum + 1;
|
||||
this.loadData('refresh');
|
||||
},
|
||||
//加载更多
|
||||
onReachBottom() {
|
||||
this.pageNum = this.pageNum + 1;
|
||||
this.loadData();
|
||||
},
|
||||
filters: {
|
||||
formatCreateTime(time) {
|
||||
let date = new Date(time);
|
||||
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
//加载商品 ，带下拉刷新和上滑加载
|
||||
async loadData(type = 'add', loading) {
|
||||
//没有更多直接返回
|
||||
if (type === 'add') {
|
||||
if (this.loadingType === 'nomore') {
|
||||
return;
|
||||
}
|
||||
this.loadingType = 'loading';
|
||||
} else {
|
||||
this.loadingType = 'more';
|
||||
}
|
||||
let params;
|
||||
if (this.cateId) {
|
||||
params = { pageNum: this.pageNum, productCategoryId: this.cateId };
|
||||
if (this.keyword) {
|
||||
params = { pageNum: this.pageNum, productCategoryId: this.cateId, keyword: this.keyword };
|
||||
}
|
||||
}
|
||||
if (this.keyword) {
|
||||
params = { pageNum: this.pageNum, keyword: this.keyword };
|
||||
} else {
|
||||
params = { pageNum: this.pageNum };
|
||||
}
|
||||
|
||||
let list = await Api.apiCall('get', Api.cms.subjectList, params);
|
||||
let goodsList = list.records;
|
||||
// let goodsList = await this.$api.json('goodsList');
|
||||
if (type === 'refresh') {
|
||||
this.goodsList = [];
|
||||
}
|
||||
|
||||
this.goodsList = this.goodsList.concat(goodsList);
|
||||
|
||||
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
|
||||
this.loadingType = this.goodsList.length > list.total ? 'nomore' : 'more';
|
||||
if (type === 'refresh') {
|
||||
if (loading == 1) {
|
||||
uni.hideLoading();
|
||||
} else {
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
}
|
||||
},
|
||||
//详情
|
||||
navToDetailPage(item) {
|
||||
//测试数据没有写id，用title代替
|
||||
let id = item.id;
|
||||
uni.navigateTo({
|
||||
url: `../../pagesU/notice/subjectDetail?id=${id}`
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f7f7f7;
|
||||
padding-bottom: 30upx;
|
||||
}
|
||||
|
||||
.notice-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 80upx;
|
||||
padding-top: 10upx;
|
||||
font-size: 26upx;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 710upx;
|
||||
padding: 0 24upx;
|
||||
background-color: #fff;
|
||||
border-radius: 4upx;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 90upx;
|
||||
font-size: 32upx;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.img-wrapper {
|
||||
width: 100%;
|
||||
height: 260upx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pic {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6upx;
|
||||
}
|
||||
|
||||
.cover {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
font-size: 36upx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.introduce {
|
||||
display: inline-block;
|
||||
padding: 16upx 0;
|
||||
font-size: 28upx;
|
||||
color: #606266;
|
||||
line-height: 38upx;
|
||||
}
|
||||
|
||||
.bot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 80upx;
|
||||
font-size: 24upx;
|
||||
color: #707070;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.more-icon {
|
||||
font-size: 32upx;
|
||||
}
|
||||
</style>
|
||||
151
mallplusui-uniapp-app/pagesU/notice/notice1.vue
Normal file
151
mallplusui-uniapp-app/pagesU/notice/notice1.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="notice-item">
|
||||
<text class="time">11:30</text>
|
||||
<view class="content">
|
||||
<text class="title">新品上市，全场满199减50</text>
|
||||
<view class="img-wrapper">
|
||||
<image
|
||||
class="pic"
|
||||
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556465765776&di=57bb5ff70dc4f67dcdb856e5d123c9e7&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01fd015aa4d95fa801206d96069229.jpg%401280w_1l_2o_100sh.jpg"
|
||||
></image>
|
||||
</view>
|
||||
<text class="introduce">虽然做了一件好事，但很有可能因此招来他人的无端猜测，例如被质疑是否藏有其他利己动机等，乃至谴责。即便如此，还是要做好事。</text>
|
||||
<view class="bot b-t">
|
||||
<text>查看详情</text>
|
||||
<text class="more-icon yticon icon-you"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="notice-item">
|
||||
<text class="time">昨天 12:30</text>
|
||||
<view class="content">
|
||||
<text class="title">新品上市，全场满199减50</text>
|
||||
<view class="img-wrapper">
|
||||
<image class="pic" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3761064275,227090144&fm=26&gp=0.jpg"></image>
|
||||
<view class="cover">活动结束</view>
|
||||
</view>
|
||||
<view class="bot b-t">
|
||||
<text>查看详情</text>
|
||||
<text class="more-icon yticon icon-you"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="notice-item">
|
||||
<text class="time">2019-07-26 12:30</text>
|
||||
<view class="content">
|
||||
<text class="title">新品上市，全场满199减50</text>
|
||||
<view class="img-wrapper">
|
||||
<image
|
||||
class="pic"
|
||||
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556465765776&di=57bb5ff70dc4f67dcdb856e5d123c9e7&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01fd015aa4d95fa801206d96069229.jpg%401280w_1l_2o_100sh.jpg"
|
||||
></image>
|
||||
<view class="cover">活动结束</view>
|
||||
</view>
|
||||
<text class="introduce">新品上市全场2折起，新品上市全场2折起，新品上市全场2折起，新品上市全场2折起，新品上市全场2折起</text>
|
||||
<view class="bot b-t">
|
||||
<text>查看详情</text>
|
||||
<text class="more-icon yticon icon-you"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f7f7f7;
|
||||
padding-bottom: 30upx;
|
||||
}
|
||||
|
||||
.notice-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 80upx;
|
||||
padding-top: 10upx;
|
||||
font-size: 26upx;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 710upx;
|
||||
padding: 0 24upx;
|
||||
background-color: #fff;
|
||||
border-radius: 4upx;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 90upx;
|
||||
font-size: 32upx;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.img-wrapper {
|
||||
width: 100%;
|
||||
height: 260upx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pic {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6upx;
|
||||
}
|
||||
|
||||
.cover {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
font-size: 36upx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.introduce {
|
||||
display: inline-block;
|
||||
padding: 16upx 0;
|
||||
font-size: 28upx;
|
||||
color: #606266;
|
||||
line-height: 38upx;
|
||||
}
|
||||
|
||||
.bot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 80upx;
|
||||
font-size: 24upx;
|
||||
color: #707070;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.more-icon {
|
||||
font-size: 32upx;
|
||||
}
|
||||
</style>
|
||||
655
mallplusui-uniapp-app/pagesU/notice/subjectDetail.vue
Normal file
655
mallplusui-uniapp-app/pagesU/notice/subjectDetail.vue
Normal file
@@ -0,0 +1,655 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="carousel">
|
||||
<swiper indicator-dots circular="true" duration="400">
|
||||
<swiper-item class="swiper-item" v-for="(item, index) in detailData.pics" :key="index">
|
||||
<view class="image-wrapper"><image :src="item" class="loaded" mode="aspectFill"></image></view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<view class="introduce-section">
|
||||
<text class="title">{{ detailData.title }}</text>
|
||||
|
||||
<view class="bot-row">
|
||||
<text>收藏量: {{ detailData.collectCount }}</text>
|
||||
<text>评论量: {{ detailData.commentCount }}</text>
|
||||
<text>浏览量: {{ detailData.readCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="c-list">
|
||||
<view class="c-row b-b">
|
||||
<view class="tip">
|
||||
<text>{{ detailData.description }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-desc">
|
||||
<view class="d-header"><text>图文详情</text></view>
|
||||
<rich-text :nodes="desc"></rich-text>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作菜单 -->
|
||||
<view class="page-bottom">
|
||||
<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
|
||||
<text class="yticon icon-xiatubiao--copy"></text>
|
||||
<text>首页</text>
|
||||
</navigator>
|
||||
|
||||
<view class="p-b-btn" :class="{ active: favorite }" @click="toFavorite(detailData)">
|
||||
<text class="yticon icon-shoucang"></text>
|
||||
<text>收藏</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分享 -->
|
||||
<share ref="share" :contentHeight="580" :shareList="shareList"></share>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import share from '@/components/share';
|
||||
import { mapState } from 'vuex';
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright,
|
||||
share
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
specClass: 'none',
|
||||
specSelected: [],
|
||||
small: null,
|
||||
sku: [],
|
||||
detailData: [],
|
||||
favorite: true,
|
||||
shareList: [],
|
||||
|
||||
desc: `
|
||||
|
||||
`,
|
||||
skuList: []
|
||||
};
|
||||
},
|
||||
async onLoad(ops) {
|
||||
//接收传值,id里面放的是标题，因为测试数据并没写id
|
||||
let id = ops.id;
|
||||
|
||||
if (id) {
|
||||
this.logining = true;
|
||||
let params = { id: ops.id };
|
||||
let data = await Api.apiCall('get', Api.cms.subjectDetail, params);
|
||||
this.logining = false;
|
||||
|
||||
if (data) {
|
||||
let detailData = data;
|
||||
this.detailData = detailData;
|
||||
this.desc = data.content;
|
||||
uni.setNavigationBarTitle({
|
||||
title: detailData.name
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this.shareList = await this.$api.json('shareList');
|
||||
},
|
||||
computed: {
|
||||
...mapState(['hasLogin', 'userInfo'])
|
||||
},
|
||||
methods: {
|
||||
//收藏
|
||||
toFavorite(item) {
|
||||
if (!this.hasLogin) {
|
||||
let url = '/pages/public/login';
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
} else {
|
||||
this.favorite = !this.favorite;
|
||||
let params = { objId: item.id, type: 1, name: item.name, meno1: item.pic };
|
||||
Api.apiCall('post', Api.goods.favoriteSave, params);
|
||||
}
|
||||
},
|
||||
//分享
|
||||
share() {
|
||||
this.$refs.share.toggleMask();
|
||||
},
|
||||
//收藏
|
||||
toFavorite(item) {
|
||||
if (!this.hasLogin) {
|
||||
let url = '/pages/public/login';
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
} else {
|
||||
this.favorite = !this.favorite;
|
||||
let params = { objId: item.id, type: 4, name: item.name, meno1: item.pic, meno2: item.price, meno3: item.sale };
|
||||
Api.apiCall('post', Api.goods.favoriteSave, params);
|
||||
}
|
||||
},
|
||||
|
||||
async jifenPay(item) {
|
||||
if (!this.hasLogin) {
|
||||
let url = '/pages/public/login';
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
let id = item.id;
|
||||
let data;
|
||||
|
||||
let params = { goodsId: id };
|
||||
data = await Api.apiCall('post', Api.order.jifenPay, params);
|
||||
|
||||
if (data) {
|
||||
this.$api.msg(data);
|
||||
}
|
||||
},
|
||||
stopPrevent() {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: $page-color-base;
|
||||
padding-bottom: 160upx;
|
||||
}
|
||||
.icon-you {
|
||||
font-size: $font-base + 2upx;
|
||||
color: #888;
|
||||
}
|
||||
.carousel {
|
||||
height: 722upx;
|
||||
position: relative;
|
||||
swiper {
|
||||
height: 100%;
|
||||
}
|
||||
.image-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: 750upx;
|
||||
overflow: hidden;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 标题简介 */
|
||||
.introduce-section {
|
||||
background: #fff;
|
||||
padding: 20upx 30upx;
|
||||
|
||||
.title {
|
||||
font-size: 32upx;
|
||||
color: $font-color-dark;
|
||||
height: 50upx;
|
||||
line-height: 50upx;
|
||||
}
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
height: 64upx;
|
||||
padding: 10upx 0;
|
||||
font-size: 26upx;
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
.price {
|
||||
font-size: $font-lg + 2upx;
|
||||
}
|
||||
.m-price {
|
||||
margin: 0 12upx;
|
||||
color: $font-color-light;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.coupon-tip {
|
||||
align-items: center;
|
||||
padding: 4upx 10upx;
|
||||
background: $uni-color-primary;
|
||||
font-size: $font-sm;
|
||||
color: #fff;
|
||||
border-radius: 6upx;
|
||||
line-height: 1;
|
||||
transform: translateY(-4upx);
|
||||
}
|
||||
.bot-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50upx;
|
||||
font-size: $font-sm;
|
||||
color: $font-color-light;
|
||||
text {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 分享 */
|
||||
.share-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $font-color-base;
|
||||
background: linear-gradient(left, #fdf5f6, #fbebf6);
|
||||
padding: 12upx 30upx;
|
||||
.share-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 70upx;
|
||||
height: 30upx;
|
||||
line-height: 1;
|
||||
border: 1px solid $uni-color-primary;
|
||||
border-radius: 4upx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 22upx;
|
||||
color: $uni-color-primary;
|
||||
&:after {
|
||||
content: '';
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
border-radius: 50%;
|
||||
left: -20upx;
|
||||
top: -12upx;
|
||||
position: absolute;
|
||||
background: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
.icon-xingxing {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 24upx;
|
||||
margin-left: 2upx;
|
||||
margin-right: 10upx;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
}
|
||||
.tit {
|
||||
font-size: $font-base;
|
||||
margin-left: 10upx;
|
||||
}
|
||||
.icon-bangzhu1 {
|
||||
padding: 10upx;
|
||||
font-size: 30upx;
|
||||
line-height: 1;
|
||||
}
|
||||
.share-btn {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: $font-sm;
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
.icon-you {
|
||||
font-size: $font-sm;
|
||||
margin-left: 4upx;
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.c-list {
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-base;
|
||||
background: #fff;
|
||||
.c-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20upx 30upx;
|
||||
position: relative;
|
||||
}
|
||||
.tit {
|
||||
width: 140upx;
|
||||
}
|
||||
.con {
|
||||
flex: 1;
|
||||
color: $font-color-dark;
|
||||
.selected-text {
|
||||
margin-right: 10upx;
|
||||
}
|
||||
}
|
||||
.bz-list {
|
||||
height: 40upx;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-dark;
|
||||
text {
|
||||
display: inline-block;
|
||||
margin-right: 30upx;
|
||||
}
|
||||
}
|
||||
.con-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: $font-color-dark;
|
||||
line-height: 40upx;
|
||||
}
|
||||
.red {
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
/* 评价 */
|
||||
.eva-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20upx 30upx;
|
||||
background: #fff;
|
||||
margin-top: 16upx;
|
||||
.e-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 70upx;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-light;
|
||||
.tit {
|
||||
font-size: $font-base + 2upx;
|
||||
color: $font-color-dark;
|
||||
margin-right: 4upx;
|
||||
}
|
||||
.tip {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
.icon-you {
|
||||
margin-left: 10upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.eva-box {
|
||||
display: flex;
|
||||
padding: 20upx 0;
|
||||
.portrait {
|
||||
flex-shrink: 0;
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $font-base;
|
||||
color: $font-color-base;
|
||||
padding-left: 26upx;
|
||||
.con {
|
||||
font-size: $font-base;
|
||||
color: $font-color-dark;
|
||||
padding: 20upx 0;
|
||||
}
|
||||
.bot {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: $font-sm;
|
||||
color: $font-color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 详情 */
|
||||
.detail-desc {
|
||||
background: #fff;
|
||||
margin-top: 16upx;
|
||||
.d-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 80upx;
|
||||
font-size: $font-base + 2upx;
|
||||
color: $font-color-dark;
|
||||
position: relative;
|
||||
|
||||
text {
|
||||
padding: 0 20upx;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 300upx;
|
||||
height: 0;
|
||||
content: '';
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 规格选择弹窗 */
|
||||
.attr-content {
|
||||
padding: 10upx 30upx;
|
||||
.a-t {
|
||||
display: flex;
|
||||
image {
|
||||
width: 170upx;
|
||||
height: 170upx;
|
||||
flex-shrink: 0;
|
||||
margin-top: -40upx;
|
||||
border-radius: 8upx;
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 24upx;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-base;
|
||||
line-height: 42upx;
|
||||
.price {
|
||||
font-size: $font-lg;
|
||||
color: $uni-color-primary;
|
||||
margin-bottom: 10upx;
|
||||
}
|
||||
.selected-text {
|
||||
margin-right: 10upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.attr-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $font-base + 2upx;
|
||||
color: $font-color-base;
|
||||
padding-top: 30upx;
|
||||
padding-left: 10upx;
|
||||
}
|
||||
.item-list {
|
||||
padding: 20upx 0 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #eee;
|
||||
margin-right: 20upx;
|
||||
margin-bottom: 20upx;
|
||||
border-radius: 100upx;
|
||||
min-width: 60upx;
|
||||
height: 60upx;
|
||||
padding: 0 20upx;
|
||||
font-size: $font-base;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.selected {
|
||||
background: #fbebee;
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 弹出层 */
|
||||
.popup {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
.mask {
|
||||
animation: showPopup 0.2s linear both;
|
||||
}
|
||||
.layer {
|
||||
animation: showLayer 0.2s linear both;
|
||||
}
|
||||
}
|
||||
&.hide {
|
||||
.mask {
|
||||
animation: hidePopup 0.2s linear both;
|
||||
}
|
||||
.layer {
|
||||
animation: hideLayer 0.2s linear both;
|
||||
}
|
||||
}
|
||||
&.none {
|
||||
display: none;
|
||||
}
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.layer {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
min-height: 40vh;
|
||||
border-radius: 10upx 10upx 0 0;
|
||||
background-color: #fff;
|
||||
.btn {
|
||||
height: 66upx;
|
||||
line-height: 66upx;
|
||||
border-radius: 100upx;
|
||||
background: $uni-color-primary;
|
||||
font-size: $font-base + 2upx;
|
||||
color: #fff;
|
||||
margin: 30upx auto 20upx;
|
||||
}
|
||||
}
|
||||
@keyframes showPopup {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes hidePopup {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes showLayer {
|
||||
0% {
|
||||
transform: translateY(120%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
@keyframes hideLayer {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(120%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部操作菜单 */
|
||||
.page-bottom {
|
||||
position: fixed;
|
||||
left: 30upx;
|
||||
bottom: 30upx;
|
||||
z-index: 95;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 690upx;
|
||||
height: 100upx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);
|
||||
border-radius: 16upx;
|
||||
|
||||
.p-b-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $font-sm;
|
||||
color: $font-color-base;
|
||||
width: 96upx;
|
||||
height: 80upx;
|
||||
.yticon {
|
||||
font-size: 40upx;
|
||||
line-height: 48upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
&.active,
|
||||
&.active .yticon {
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
.icon-fenxiang2 {
|
||||
font-size: 42upx;
|
||||
transform: translateY(-2upx);
|
||||
}
|
||||
.icon-shoucang {
|
||||
font-size: 46upx;
|
||||
}
|
||||
}
|
||||
.action-btn-group {
|
||||
display: flex;
|
||||
height: 76upx;
|
||||
border-radius: 100px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20upx 40upx -16upx #fa436a;
|
||||
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
|
||||
background: linear-gradient(to right, #ffac30, #fa436a, #f56c6c);
|
||||
margin-left: 20upx;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 28upx;
|
||||
width: 0;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 180upx;
|
||||
height: 100%;
|
||||
font-size: $font-base;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
371
mallplusui-uniapp-app/pagesU/notice/subjectList.vue
Normal file
371
mallplusui-uniapp-app/pagesU/notice/subjectList.vue
Normal file
@@ -0,0 +1,371 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="navbar" :style="{ position: headerPosition, top: headerTop }">
|
||||
<view class="nav-item" v-for="(item, index) in cateList" :key="index" :class="{ current: filterIndex === item.id }" @click="tabClick(item.id)">{{item.name}}</view>
|
||||
|
||||
</view>
|
||||
<view class="goods-list">
|
||||
<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
|
||||
<view class="image-wrapper"><image :src="item.pic" mode="aspectFill"></image></view>
|
||||
<text class="title clamp">{{ item.title }}</text>
|
||||
<view class="price-box">
|
||||
<text>收藏量 {{ item.collectCount }}</text>
|
||||
<text>浏览量 {{ item.readCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more :status="loadingType"></uni-load-more>
|
||||
|
||||
<view class="cate-mask" :class="cateMaskState === 0 ? 'none' : cateMaskState === 1 ? 'show' : ''" @click="toggleCateMask">
|
||||
<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
|
||||
<scroll-view scroll-y class="cate-list">
|
||||
<view v-for="item in cateList" :key="item.id">
|
||||
<view class="cate-item b-b two">{{ item.name }}</view>
|
||||
<view v-for="tItem in item.child" :key="tItem.id" class="cate-item b-b" :class="{ active: tItem.id == cateId }" @click="changeCate(tItem)">
|
||||
{{ tItem.name }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright,
|
||||
uniLoadMore
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cateMaskState: 0, //分类面板展开状态
|
||||
headerPosition: 'fixed',
|
||||
headerTop: '0px',
|
||||
categoryId: '',
|
||||
loadingType: 'more', //加载更多状态
|
||||
filterIndex: 0,
|
||||
cateId: 0, //已选三级分类id
|
||||
pageNum: 1,
|
||||
cid: null,
|
||||
priceOrder: 0, //1 价格从低到高 2价格从高到低
|
||||
cateList: [],
|
||||
goodsList: []
|
||||
};
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
// #ifdef H5
|
||||
this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
|
||||
// #endif
|
||||
|
||||
this.cateId = options.sid;
|
||||
this.loadCateList(options.fid, options.sid);
|
||||
this.loadData();
|
||||
},
|
||||
onPageScroll(e) {
|
||||
//兼容iOS端下拉时顶部漂移
|
||||
if (e.scrollTop >= 0) {
|
||||
this.headerPosition = 'fixed';
|
||||
} else {
|
||||
this.headerPosition = 'absolute';
|
||||
}
|
||||
},
|
||||
//下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.pageNum = this.pageNum + 1;
|
||||
this.loadData('refresh');
|
||||
},
|
||||
//加载更多
|
||||
onReachBottom() {
|
||||
this.pageNum = this.pageNum + 1;
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
//加载分类
|
||||
async loadCateList() {
|
||||
let params = {'showStatus':1};
|
||||
let list = await Api.apiCall('get', Api.cms.subjectCategoryList, params);
|
||||
|
||||
this.cateList = list.records;
|
||||
},
|
||||
//加载商品 ，带下拉刷新和上滑加载
|
||||
async loadData(type = 'add', loading) {
|
||||
//没有更多直接返回
|
||||
if (type === 'add') {
|
||||
if (this.loadingType === 'nomore') {
|
||||
return;
|
||||
}
|
||||
this.loadingType = 'loading';
|
||||
} else {
|
||||
this.loadingType = 'more';
|
||||
}
|
||||
let params;
|
||||
|
||||
if (this.categoryId) {
|
||||
params = { pageNum: this.pageNum, categoryId: this.categoryId };
|
||||
} else {
|
||||
params = { pageNum: this.pageNum };
|
||||
}
|
||||
|
||||
let list = await Api.apiCall('get', Api.cms.subjectList, params);
|
||||
let goodsList = list.records;
|
||||
// let goodsList = await this.$api.json('goodsList');
|
||||
if (type === 'refresh') {
|
||||
this.goodsList = [];
|
||||
}
|
||||
|
||||
|
||||
this.goodsList = this.goodsList.concat(goodsList);
|
||||
|
||||
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
|
||||
this.loadingType = this.goodsList.length > list.total ? 'nomore' : 'more';
|
||||
if (type === 'refresh') {
|
||||
if (loading == 1) {
|
||||
uni.hideLoading();
|
||||
} else {
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
}
|
||||
},
|
||||
//筛选点击
|
||||
tabClick(index) {
|
||||
console.log('tab='+index);
|
||||
this.pageNum = 1;
|
||||
|
||||
this.categoryId = index;
|
||||
|
||||
uni.pageScrollTo({
|
||||
duration: 300,
|
||||
scrollTop: 0
|
||||
});
|
||||
this.loadData('refresh', 1);
|
||||
|
||||
},
|
||||
//显示分类面板
|
||||
toggleCateMask(type) {
|
||||
let timer = type === 'show' ? 10 : 300;
|
||||
let state = type === 'show' ? 1 : 0;
|
||||
this.cateMaskState = 2;
|
||||
setTimeout(() => {
|
||||
this.cateMaskState = state;
|
||||
}, timer);
|
||||
},
|
||||
//分类点击
|
||||
changeCate(item) {
|
||||
this.pageNum = 1;
|
||||
this.cateId = item.id;
|
||||
this.toggleCateMask();
|
||||
uni.pageScrollTo({
|
||||
duration: 300,
|
||||
scrollTop: 0
|
||||
});
|
||||
this.loadData('refresh', 1);
|
||||
|
||||
},
|
||||
//详情
|
||||
navToDetailPage(item) {
|
||||
//测试数据没有写id，用title代替
|
||||
let id = item.id;
|
||||
let groupId = item.groupId;
|
||||
uni.navigateTo({
|
||||
url: `../../pagesU/notice/subjectDetail?id=${id}`
|
||||
});
|
||||
},
|
||||
stopPrevent() {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page,
|
||||
.content {
|
||||
background: $page-color-base;
|
||||
}
|
||||
.content {
|
||||
padding-top: 96upx;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: var(--window-top);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 80upx;
|
||||
background: #fff;
|
||||
box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.06);
|
||||
z-index: 10;
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-size: 30upx;
|
||||
color: $font-color-dark;
|
||||
position: relative;
|
||||
&.current {
|
||||
color: $base-color;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 120upx;
|
||||
height: 0;
|
||||
border-bottom: 4upx solid $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.p-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.yticon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30upx;
|
||||
height: 14upx;
|
||||
line-height: 1;
|
||||
margin-left: 4upx;
|
||||
font-size: 26upx;
|
||||
color: #888;
|
||||
&.active {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
.xia {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
}
|
||||
.cate-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 80upx;
|
||||
position: relative;
|
||||
font-size: 44upx;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-left: 1px solid #ddd;
|
||||
width: 0;
|
||||
height: 36upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 分类 */
|
||||
.cate-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: var(--window-top);
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
z-index: 95;
|
||||
transition: 0.3s;
|
||||
|
||||
.cate-content {
|
||||
width: 630upx;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
float: right;
|
||||
transform: translateX(100%);
|
||||
transition: 0.3s;
|
||||
}
|
||||
&.none {
|
||||
display: none;
|
||||
}
|
||||
&.show {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
|
||||
.cate-content {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
.cate-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.cate-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 90upx;
|
||||
padding-left: 30upx;
|
||||
font-size: 28upx;
|
||||
color: #555;
|
||||
position: relative;
|
||||
}
|
||||
.two {
|
||||
height: 64upx;
|
||||
color: #303133;
|
||||
font-size: 30upx;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
.active {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* 商品列表 */
|
||||
.goods-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 30upx;
|
||||
background: #fff;
|
||||
.goods-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 48%;
|
||||
padding-bottom: 40upx;
|
||||
&:nth-child(2n + 1) {
|
||||
margin-right: 4%;
|
||||
}
|
||||
}
|
||||
.image-wrapper {
|
||||
width: 100%;
|
||||
height: 330upx;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: $font-lg;
|
||||
color: $font-color-dark;
|
||||
line-height: 80upx;
|
||||
}
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 10upx;
|
||||
font-size: 24upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
.price {
|
||||
font-size: $font-lg;
|
||||
color: $uni-color-primary;
|
||||
line-height: 1;
|
||||
&:before {
|
||||
content: '￥';
|
||||
font-size: 26upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
100
mallplusui-uniapp-app/pagesU/user/README.md
Normal file
100
mallplusui-uniapp-app/pagesU/user/README.md
Normal file
@@ -0,0 +1,100 @@
|
||||
## 使用说明：
|
||||
| 属性名 | 类型 | 说明 |
|
||||
| -------- | -----: | :----: |
|
||||
| date | String | 当前日期，格式支持YYYY-MM |
|
||||
| list | Array | 已经签到的时间列表，格式支持YYYY-MM-DD、MM-DD、DD |
|
||||
| signin_fun | function | 当天签到时调用，返回签到的日期信息 |
|
||||
| repair | Boolean | 是否开启补签 |
|
||||
| rule | Boolean | 补签规则开关，默认false，没有补签规则 |
|
||||
| repair_fun | function | 开启补签后，补签时调用，返回签到的日期信息 |
|
||||
| choose_date | Boolean | 是否可以选择日期 |
|
||||
| date_change | function | 当前日期改变时调用 |
|
||||
|
||||
``` html
|
||||
<fl-signin
|
||||
:date="date"
|
||||
:list="list"
|
||||
@signin_fun="signin_fun"
|
||||
:repair="repair"
|
||||
:rule="rule"
|
||||
@repair_fun="repair_fun"
|
||||
:choose_date="choose_date"
|
||||
@date_change="date_change"
|
||||
></fl-signin>
|
||||
```
|
||||
|
||||
```javascript
|
||||
data() {
|
||||
return {
|
||||
// 是否可以选择日期
|
||||
choose_date: false,
|
||||
// 当前日期
|
||||
date: "2019-03",
|
||||
// 签到成功列表
|
||||
list: ["2019-03-10", "03-15", "20"],
|
||||
// 是否开启补签
|
||||
repair: false,
|
||||
// 是否开启补签规则
|
||||
rule: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 签到时触发
|
||||
signin_fun(res) {
|
||||
console.log(res)
|
||||
this.list.push(res.day)
|
||||
uni.showToast({
|
||||
title: "签到成功",
|
||||
icon: "none"
|
||||
})
|
||||
},
|
||||
// 补签成功时触发
|
||||
repair_fun(res) {
|
||||
console.log(res)
|
||||
this.list.push(res.day)
|
||||
uni.showToast({
|
||||
title: "补签成功",
|
||||
icon: "none"
|
||||
})
|
||||
},
|
||||
// 当月份改变时触发
|
||||
date_change(date) {
|
||||
console.log(date);
|
||||
// 更新当前日期
|
||||
this.date = date;
|
||||
// 更新签到列表
|
||||
this.list = ["01", "02"];
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
Tips:
|
||||
* 有啥问题和建议或者错误不足之处，还望各位大神指出，急的话+QQ：806834390。
|
||||
|
||||
|
||||
### 历史版本
|
||||
----
|
||||
#### V1.0.0 2019/03/22
|
||||
只有最简单的签到和补签功能。
|
||||
#### V1.1.0 2019/03/23
|
||||
经大神指点，新增签到按钮和提示，新增补签规则：只能从补签的第一个日期开始补签。
|
||||
#### V1.2.0 2019/03/24
|
||||
经大神反馈，修改后的新版本已兼容微信小程序。
|
||||
#### V1.3.0 2019/03/25
|
||||
新增补签规则开关rule。
|
||||
#### V1.4.0 2019/04/02
|
||||
修复一个重大BUG(日期的计算有问题)，感谢那位发现问题的大神Ｏ(≧∇≦)Ｏ
|
||||
#### V1.5.0 2019/04/06
|
||||
优化了部分代码，新增日期选择功能，现在可以查看上n月的签到信息了。
|
||||
#### V1.6.0 2019/04/10
|
||||
修复了一个BUG。
|
||||
#### V1.7.0 2019/04/11
|
||||
修复了一个样式上的问题，当窗口正好处于某些宽度时，星期天会因为宽度不够，被挤到下一行。感谢Tonybo通过QQ邮箱告诉我。
|
||||
#### V1.8.0 2019/04/11
|
||||
修复了一个渲染时判断不对的问题，啊——！还以为不会有问题了！！！咳咳，感谢那些告诉我问题的人。
|
||||
#### V1.9.0 2019/05/16
|
||||
我的错，虽然我已经不知道item.index是用来做什么用的了，删掉就行，不然小程序上会出现undefined，感谢安雨忻的反馈。
|
||||
#### V2.0.0 2019/05/27
|
||||
根据同事的反馈，所有事件都阻止了冒泡，防止触发其它的自定义事件。
|
||||
#### V2.1.0 2019/05/31
|
||||
修复了日期不能选择或出错的问题，顺便把代码重新看了一遍，感谢Await的反馈，也在这里向那些下载了插件的人说声“对不起”，是我没有做好。
|
||||
284
mallplusui-uniapp-app/pagesU/user/applyMember.vue
Normal file
284
mallplusui-uniapp-app/pagesU/user/applyMember.vue
Normal file
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="block">
|
||||
|
||||
<view class="content">
|
||||
<view class="my">
|
||||
我的账户余额：{{money}} 元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="block">
|
||||
<view class="title">
|
||||
会员等级
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="amount">
|
||||
<view class="list">
|
||||
<view class="box" v-for="(amount,index) in amountList" :key="index" @tap="select(amount)" :class="{'on':amount.id == inputAmount}">
|
||||
{{amount.price}}元 {{amount.name}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="block">
|
||||
<view class="title">
|
||||
选择支付方式
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="pay-list">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="row" @tap="paytype='alipay'">
|
||||
<view class="left">
|
||||
<image src="../../static/img/alipay.png"></image>
|
||||
</view>
|
||||
<view class="center">
|
||||
支付宝支付
|
||||
</view>
|
||||
<view class="right">
|
||||
<radio :checked="paytype=='alipay'" color="#70b162" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="row" @tap="paytype='wxpay'">
|
||||
<view class="left">
|
||||
<image src="../../static/image/wechatpay.png"></image>
|
||||
</view>
|
||||
<view class="center">
|
||||
微信支付
|
||||
</view>
|
||||
<view class="right">
|
||||
<radio :checked="paytype=='wxpay'" color="#70b162" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="row" @tap="paytype='blancepay'">
|
||||
<view class="left">
|
||||
<image src="../../static/image/balancepay.png"></image>
|
||||
</view>
|
||||
<view class="center">
|
||||
余额支付
|
||||
</view>
|
||||
<view class="right">
|
||||
<radio :checked="paytype=='blancepay'" color="#70b162" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pay">
|
||||
<view class="btn" @tap="pay">立即升级</view>
|
||||
<!-- <view class="tis">
|
||||
点击立即充值，即代表您同意<view class="terms">
|
||||
《条款协议》
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
|
||||
return {
|
||||
money:0,
|
||||
inputAmount:'',//金额
|
||||
amountList:[100,200,500],//预设3个可选快捷金额
|
||||
paytype:'wxpay'//支付类型
|
||||
};
|
||||
},
|
||||
onShow(){
|
||||
this.load()
|
||||
},
|
||||
methods:{
|
||||
async load(){
|
||||
let params = { };
|
||||
let data1 = await Api.apiCall('get', Api.member.currentMember, params);
|
||||
this.money = data1.blance;
|
||||
|
||||
let data2 = await Api.apiCall('get', Api.member.memberLevelList, params);
|
||||
data2 = data2.filter(item => item.id<data1.memberLevelId);
|
||||
this.amountList = data2;
|
||||
},
|
||||
async onload() {
|
||||
let params = { };
|
||||
let data1 = await Api.apiCall('get', Api.index.currentMember, params);
|
||||
this.money = data1.blance;
|
||||
},
|
||||
select(amount){
|
||||
this.inputAmount = amount.id;
|
||||
},
|
||||
|
||||
async pay(){
|
||||
var _this=this
|
||||
|
||||
|
||||
|
||||
let params = {memberLevelId:this.inputAmount };
|
||||
let data1 = await Api.apiCall('post', Api.member.applyMember, params);
|
||||
if(data1.code==200){
|
||||
this.$api.msg('升级成功');
|
||||
uni.switchTab({
|
||||
url: '/pages/index/user'
|
||||
});
|
||||
}
|
||||
console.log(data1)
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.block{
|
||||
width: 94%;
|
||||
padding: 20upx 3%;
|
||||
.title{
|
||||
width: 100%;
|
||||
font-size: 34upx;
|
||||
}
|
||||
.content{
|
||||
.my{
|
||||
width: 100%;
|
||||
height: 120upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 30upx;
|
||||
border-bottom: solid 1upx #eee;
|
||||
}
|
||||
.amount{
|
||||
width: 100%;
|
||||
|
||||
.list{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20upx 0;
|
||||
.box{
|
||||
width: 30%;
|
||||
height: 120upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 10upx;
|
||||
box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.05);
|
||||
font-size: 36upx;
|
||||
background-color: #f1f1f1;
|
||||
color: 333;
|
||||
&.on{
|
||||
background-color: $uni-color-success;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.num{
|
||||
margin-top: 10upx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.text{
|
||||
padding-right: 10upx;
|
||||
font-size: 30upx;
|
||||
}
|
||||
.input{
|
||||
width: 28.2vw;
|
||||
border-bottom: solid 2upx #999;
|
||||
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
input{
|
||||
margin: 0 20upx;
|
||||
height: 60upx;
|
||||
font-size: 30upx;
|
||||
color: $uni-color-success;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pay-list{
|
||||
width: 100%;
|
||||
border-bottom: solid 1upx #eee;
|
||||
.row{
|
||||
width: 100%;
|
||||
height: 120upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.left{
|
||||
width: 100upx;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image{
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
}
|
||||
}
|
||||
.center{
|
||||
width: 100%;
|
||||
font-size: 30upx;
|
||||
}
|
||||
.right{
|
||||
width: 100upx;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pay{
|
||||
margin-top: 20upx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
.btn{
|
||||
width: 70%;
|
||||
height: 80upx;
|
||||
border-radius: 80upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
background-color: $uni-color-success;
|
||||
box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.2);
|
||||
}
|
||||
.btn-tixi{
|
||||
color: $uni-color-success;
|
||||
background: #FFFFFF;
|
||||
border:1upx solid $uni-color-success;
|
||||
}
|
||||
.tis{
|
||||
margin-top: 10upx;
|
||||
width: 100%;
|
||||
font-size: 24upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
color: #999;
|
||||
.terms{
|
||||
color: #5a9ef7;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
102
mallplusui-uniapp-app/pagesU/user/balance.vue
Normal file
102
mallplusui-uniapp-app/pagesU/user/balance.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<view class="content column">
|
||||
<view class="balance bg-green margin-bottom-20 text-while column align-item">
|
||||
<view class="column balance-top">
|
||||
<text class="text-size-max">￥{{totalMoney}}</text>
|
||||
<text class="font-bold">账户余额</text>
|
||||
</view>
|
||||
<view class="balance-title font-bold row">
|
||||
<view class="balance-content">
|
||||
<text>充值</text>
|
||||
</view>
|
||||
<view class="balance-content">
|
||||
<text>提现</text>
|
||||
</view>
|
||||
<view class="balance-content">
|
||||
<text>说明</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content margin-bottom-20 column">
|
||||
<view class="balance-nav bg-white bottom-line">
|
||||
<view class="nav-content margin-width-20 justify-between align-item">
|
||||
<text>充值记录</text>
|
||||
<text class="icon-you yticon"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="balance-nav bg-white bottom-line">
|
||||
<view class="nav-content margin-width-20 justify-between align-item">
|
||||
<text>提现记录</text>
|
||||
<text class="icon-you yticon"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content margin-bottom-20 column">
|
||||
<view class="balance-nav bg-white bottom-line">
|
||||
<view class="nav-content margin-width-20 justify-between align-item">
|
||||
<text>交易流水</text>
|
||||
<text class="icon-you yticon"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
export default{
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
totalMoney:0.00,//总余额
|
||||
codeMoney:0.00,//扫码余额
|
||||
rechargeMoney:0.00,//充值余额
|
||||
userinfo: {},
|
||||
}
|
||||
},
|
||||
async onShow(){
|
||||
let params = { };
|
||||
let data1 = await Api.apiCall('get', Api.member.currentMember, params);
|
||||
this.totalMoney = data1.blance;
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page{background-color: #F3F3F3;}
|
||||
view {font-size: 30upx;line-height: 1.8;display: flex;}
|
||||
.row{flex-direction: row;}
|
||||
.column {flex-direction: column;}
|
||||
.text-size-max{font-size: 80upx;}
|
||||
.justify-center{justify-content: center;}
|
||||
.justify-between{justify-content: space-between;}
|
||||
.align-item{align-items: center;}
|
||||
.bg-white{background: #FFFFFF;}
|
||||
.bg-green {background: #F44142;}
|
||||
.text-size-24 {font-size: 24upx;}
|
||||
.text-size-mim {font-size: 26upx;}
|
||||
.text-grey {color: #9B9B9B;}
|
||||
.text-while{color: #FFFFFF;}
|
||||
.font-bold{font-weight: bold;}
|
||||
.bottom-line{border-bottom: #EEEEEE solid 1upx}
|
||||
.margin-bottom-20{margin-bottom: 20upx;}
|
||||
.margin-top-20{margin-top: 20upx;}
|
||||
.margin-width-20{margin:0 20upx;}
|
||||
|
||||
.content{width: 100%;}
|
||||
.balance{width: 100%;}
|
||||
.balance-top{width: 100%;align-items: center;line-height: 1.5;margin-top: 20upx;}
|
||||
.balance-title{background: rgba(255,255,255,0.12);margin-top: 40upx;width: 100%;height: 100upx;justify-content: center;align-items: center;}
|
||||
.balance-content{width: 33%;height: 100upx;align-items: center;justify-content: center;}
|
||||
.balance-content image{width: 50upx;height: 50upx;margin-right: 10upx;}
|
||||
.balance-nav{width: 100%;height: 100upx;}
|
||||
.nav-content{width: 100%;}
|
||||
</style>
|
||||
557
mallplusui-uniapp-app/pagesU/user/collect.vue
Normal file
557
mallplusui-uniapp-app/pagesU/user/collect.vue
Normal file
@@ -0,0 +1,557 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="navbar">
|
||||
<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
|
||||
</view>
|
||||
|
||||
<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
|
||||
<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
|
||||
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData" >
|
||||
<!-- 空白页 -->
|
||||
<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<view v-for="(item, index) in tabItem.orderList" :key="index" class="order-item">
|
||||
<view class="i-top b-b">
|
||||
<text class="time">{{ item.addTime }}</text>
|
||||
<!--<text class="state" :style="{color: item.stateTipColor}">{{item.stateTip}}</text>-->
|
||||
<text class="del-btn yticon icon-iconfontshanchu1" @click="deleteOrder(index)"></text>
|
||||
</view>
|
||||
|
||||
<view class="goods-box-single">
|
||||
<image class="goods-img" :src="item.meno1" @click="navToDetailPage(item)" mode="aspectFill"></image>
|
||||
<view class="right">
|
||||
<text class="title clamp">{{ item.name }}</text>
|
||||
<text class="attr-box">{{ item.meno3 }}</text>
|
||||
<text class="price">{{ item.meno2 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<uni-load-more :status="tabItem.loadingType"></uni-load-more>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
||||
import empty from '@/components/empty';
|
||||
import { formatDate } from '@/common/date';
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright,
|
||||
uniLoadMore,
|
||||
empty
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabCurrentIndex: 0,
|
||||
navList: [
|
||||
{
|
||||
type: 1,
|
||||
text: '收藏商品',
|
||||
loadingType: 'more',
|
||||
orderList: []
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
text: '收藏文章',
|
||||
loadingType: 'more',
|
||||
orderList: []
|
||||
},
|
||||
{
|
||||
type: 3,
|
||||
text: '收藏店铺',
|
||||
loadingType: 'more',
|
||||
orderList: []
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
/**
|
||||
* 修复app端点击除全部订单外的按钮进入时不加载数据的问题
|
||||
* 替换onLoad下代码即可
|
||||
*/
|
||||
if (options && options.type) {
|
||||
this.tabCurrentIndex = +options.type;
|
||||
}
|
||||
// MP
|
||||
this.loadData();
|
||||
},
|
||||
computed: {
|
||||
...mapState(['hasLogin', 'userInfo'])
|
||||
},
|
||||
methods: {
|
||||
//详情页
|
||||
navToDetailPage(item) {
|
||||
//测试数据没有写id，用title代替
|
||||
let id = item.id;
|
||||
uni.navigateTo({
|
||||
url: `../../pagesA/product/product?id=${id}`
|
||||
});
|
||||
},
|
||||
//获取订单列表
|
||||
async loadData(source) {
|
||||
console.log('=======================')
|
||||
|
||||
//这里是将订单挂载到tab列表下
|
||||
let index = this.tabCurrentIndex;
|
||||
let navItem = this.navList[index];
|
||||
let type = navItem.type;
|
||||
|
||||
if (source === 'tabChange' && navItem.loaded === true) {
|
||||
//tab切换只有第一次需要加载数据
|
||||
return;
|
||||
}
|
||||
if (navItem.loadingType === 'loading') {
|
||||
//防止重复加载
|
||||
return;
|
||||
}
|
||||
|
||||
navItem.loadingType = 'loading';
|
||||
|
||||
if (!this.hasLogin) {
|
||||
url = '/pages/public/login';
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
} else {
|
||||
let params = { };
|
||||
let data = await Api.apiCall('get', Api.goods.listCollect, params);
|
||||
|
||||
let orderList = data.records.filter(item => {
|
||||
//添加不同状态下订单的表现形式
|
||||
if (item.type == 1) {
|
||||
if (item.meno3 == null) {
|
||||
item.meno3 = 0;
|
||||
}
|
||||
item.meno3 = '销量:' + item.meno3;
|
||||
}
|
||||
|
||||
item = Object.assign(item, this.orderStateExp(item.type));
|
||||
item.addTime = this.dateFormat(item.addTime);
|
||||
return item.type === type;
|
||||
});
|
||||
orderList.forEach(item => {
|
||||
navItem.orderList.push(item);
|
||||
});
|
||||
//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
|
||||
this.$set(navItem, 'loaded', true);
|
||||
|
||||
//判断是否还有数据， 有改为 more， 没有改为noMore
|
||||
navItem.loadingType = 'more';
|
||||
}
|
||||
},
|
||||
|
||||
//swiper 切换
|
||||
changeTab(e) {
|
||||
this.tabCurrentIndex = e.target.current;
|
||||
this.loadData('tabChange');
|
||||
},
|
||||
//顶部tab点击
|
||||
tabClick(index) {
|
||||
this.tabCurrentIndex = index;
|
||||
},
|
||||
//删除订单
|
||||
deleteOrder(index) {
|
||||
uni.showLoading({
|
||||
title: '请稍后'
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
|
||||
uni.hideLoading();
|
||||
}, 600);
|
||||
let list = this.navList[this.tabCurrentIndex].orderList;
|
||||
let row = list[index];
|
||||
let id = row.id;
|
||||
let params = { ids: id };
|
||||
let data = Api.apiCall('post', Api.goods.deleteCollect, params);
|
||||
},
|
||||
//取消订单
|
||||
cancelOrder(item) {
|
||||
uni.showLoading({
|
||||
title: '请稍后'
|
||||
});
|
||||
setTimeout(() => {
|
||||
let { stateTip, stateTipColor } = this.orderStateExp(9);
|
||||
item = Object.assign(item, {
|
||||
type: 9,
|
||||
stateTip,
|
||||
stateTipColor
|
||||
});
|
||||
|
||||
//取消订单后删除待付款中该项
|
||||
let list = this.navList[1].orderList;
|
||||
let index = list.findIndex(val => val.id === item.id);
|
||||
index !== -1 && list.splice(index, 1);
|
||||
|
||||
uni.hideLoading();
|
||||
}, 600);
|
||||
},
|
||||
|
||||
//订单状态文字和颜色
|
||||
orderStateExp(type) {
|
||||
let stateTip = '',
|
||||
stateTipColor = '#fa436a';
|
||||
switch (+type) {
|
||||
case 1:
|
||||
stateTip = '收藏商品';
|
||||
break;
|
||||
case 2:
|
||||
stateTip = '收藏文章';
|
||||
break;
|
||||
case 3:
|
||||
stateTip = '收藏店铺';
|
||||
stateTipColor = '#909399';
|
||||
break;
|
||||
|
||||
//更多自定义
|
||||
}
|
||||
return { stateTip, stateTipColor };
|
||||
},
|
||||
dateFormat(time) {
|
||||
if (time == null || time === '') {
|
||||
return 'N/A';
|
||||
}
|
||||
let date = new Date(time);
|
||||
return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page,
|
||||
.content {
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.list-scroll-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
padding: 0 5px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-size: 15px;
|
||||
color: $font-color-dark;
|
||||
position: relative;
|
||||
&.current {
|
||||
color: $base-color;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 44px;
|
||||
height: 0;
|
||||
border-bottom: 2px solid $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uni-swiper-item {
|
||||
height: auto;
|
||||
}
|
||||
.order-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 30upx;
|
||||
background: #fff;
|
||||
margin-top: 16upx;
|
||||
.i-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 80upx;
|
||||
padding-right: 30upx;
|
||||
font-size: $font-base;
|
||||
color: $font-color-dark;
|
||||
position: relative;
|
||||
.time {
|
||||
flex: 1;
|
||||
}
|
||||
.state {
|
||||
color: $base-color;
|
||||
}
|
||||
.del-btn {
|
||||
padding: 10upx 0 10upx 36upx;
|
||||
font-size: $font-lg;
|
||||
color: $font-color-light;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 30upx;
|
||||
border-left: 1px solid $border-color-dark;
|
||||
position: absolute;
|
||||
left: 20upx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 多条商品 */
|
||||
.goods-box {
|
||||
height: 160upx;
|
||||
padding: 20upx 0;
|
||||
white-space: nowrap;
|
||||
.goods-item {
|
||||
width: 120upx;
|
||||
height: 120upx;
|
||||
display: inline-block;
|
||||
margin-right: 24upx;
|
||||
}
|
||||
.goods-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
/* 单条商品 */
|
||||
.goods-box-single {
|
||||
display: flex;
|
||||
padding: 20upx 0;
|
||||
.goods-img {
|
||||
display: block;
|
||||
width: 120upx;
|
||||
height: 120upx;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 30upx 0 24upx;
|
||||
overflow: hidden;
|
||||
.title {
|
||||
font-size: $font-base + 2upx;
|
||||
color: $font-color-dark;
|
||||
line-height: 1;
|
||||
}
|
||||
.attr-box {
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-light;
|
||||
padding: 10upx 12upx;
|
||||
}
|
||||
.price {
|
||||
font-size: $font-base + 2upx;
|
||||
color: $font-color-dark;
|
||||
&:before {
|
||||
content: '￥';
|
||||
font-size: $font-sm;
|
||||
margin: 0 2upx 0 8upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: baseline;
|
||||
padding: 20upx 30upx;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-light;
|
||||
.num {
|
||||
margin: 0 8upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.price {
|
||||
font-size: $font-lg;
|
||||
color: $font-color-dark;
|
||||
&:before {
|
||||
content: '￥';
|
||||
font-size: $font-sm;
|
||||
margin: 0 2upx 0 8upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.action-box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
height: 100upx;
|
||||
position: relative;
|
||||
padding-right: 30upx;
|
||||
}
|
||||
.action-btn {
|
||||
width: 160upx;
|
||||
height: 60upx;
|
||||
margin: 0;
|
||||
margin-left: 24upx;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
line-height: 60upx;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-dark;
|
||||
background: #fff;
|
||||
border-radius: 100px;
|
||||
&:after {
|
||||
border-radius: 100px;
|
||||
}
|
||||
&.recom {
|
||||
background: #fff9f9;
|
||||
color: $base-color;
|
||||
&:after {
|
||||
border-color: #f7bcc8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* load-more */
|
||||
.uni-load-more {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 80upx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.uni-load-more__text {
|
||||
font-size: 28upx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.uni-load-more__img {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.uni-load-more__img > view {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.uni-load-more__img > view view {
|
||||
width: 6px;
|
||||
height: 2px;
|
||||
border-top-left-radius: 1px;
|
||||
border-bottom-left-radius: 1px;
|
||||
background: #999;
|
||||
position: absolute;
|
||||
opacity: 0.2;
|
||||
transform-origin: 50%;
|
||||
animation: load 1.56s ease infinite;
|
||||
}
|
||||
|
||||
.uni-load-more__img > view view:nth-child(1) {
|
||||
transform: rotate(90deg);
|
||||
top: 2px;
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
.uni-load-more__img > view view:nth-child(2) {
|
||||
transform: rotate(180deg);
|
||||
top: 11px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.uni-load-more__img > view view:nth-child(3) {
|
||||
transform: rotate(270deg);
|
||||
bottom: 2px;
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
.uni-load-more__img > view view:nth-child(4) {
|
||||
top: 11px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.load1,
|
||||
.load2,
|
||||
.load3 {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.load2 {
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
|
||||
.load3 {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
|
||||
.load1 view:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.load2 view:nth-child(1) {
|
||||
animation-delay: 0.13s;
|
||||
}
|
||||
|
||||
.load3 view:nth-child(1) {
|
||||
animation-delay: 0.26s;
|
||||
}
|
||||
|
||||
.load1 view:nth-child(2) {
|
||||
animation-delay: 0.39s;
|
||||
}
|
||||
|
||||
.load2 view:nth-child(2) {
|
||||
animation-delay: 0.52s;
|
||||
}
|
||||
|
||||
.load3 view:nth-child(2) {
|
||||
animation-delay: 0.65s;
|
||||
}
|
||||
|
||||
.load1 view:nth-child(3) {
|
||||
animation-delay: 0.78s;
|
||||
}
|
||||
|
||||
.load2 view:nth-child(3) {
|
||||
animation-delay: 0.91s;
|
||||
}
|
||||
|
||||
.load3 view:nth-child(3) {
|
||||
animation-delay: 1.04s;
|
||||
}
|
||||
|
||||
.load1 view:nth-child(4) {
|
||||
animation-delay: 1.17s;
|
||||
}
|
||||
|
||||
.load2 view:nth-child(4) {
|
||||
animation-delay: 1.3s;
|
||||
}
|
||||
|
||||
.load3 view:nth-child(4) {
|
||||
animation-delay: 1.43s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes load {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
513
mallplusui-uniapp-app/pagesU/user/coupon.vue
Normal file
513
mallplusui-uniapp-app/pagesU/user/coupon.vue
Normal file
@@ -0,0 +1,513 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="tabr" :style="{top:headerTop}">
|
||||
<view :class="{on:typeClass=='valid'}" @tap="switchType('valid')">可用({{couponValidList.length}})</view><view :class="{on:typeClass=='invalid'}" @tap="switchType('invalid')">已失效({{couponinvalidList.length}})</view>
|
||||
<view class="border" :class="typeClass"></view>
|
||||
</view>
|
||||
<view class="place" ></view>
|
||||
<view class="list">
|
||||
<!-- 优惠券列表 -->
|
||||
<view class="sub-list valid" :class="subState">
|
||||
<view class="tis" v-if="couponValidList.length==0">没有数据~</view>
|
||||
<view class="row" v-for="(row,index) in couponValidList" :key="index" >
|
||||
<!-- 删除按钮 -->
|
||||
<view class="menu" @tap.stop="deleteCoupon(row.id,couponValidList)">
|
||||
<view class="icon shanchu"></view>
|
||||
</view>
|
||||
<!-- content -->
|
||||
<view class="carrier" :class="[typeClass=='valid'?theIndex==index?'open':oldIndex==index?'close':'':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
|
||||
<view class="left">
|
||||
<view class="title">
|
||||
{{row.note}}
|
||||
</view>
|
||||
<view class="term" v-if="row.terStartime==0 && row.terEndtime==0">
|
||||
永久有效
|
||||
<!-- {{row.termStart}} ~ {{row.termEnd}} -->
|
||||
</view>
|
||||
<view class="term" v-else>
|
||||
{{row.startTime|formatCreateTime}} ~ {{row.endTime |formatCreateTime}}
|
||||
</view>
|
||||
<view class="gap-top"></view>
|
||||
<view class="gap-bottom"></view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="ticket">
|
||||
<view class="num">
|
||||
|
||||
</view>
|
||||
<view class="unit">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="criteria">
|
||||
{{row.amount}} 元
|
||||
</view>
|
||||
<view class="use" @click="goUse">
|
||||
去使用
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sub-list invalid" :class="subState">
|
||||
<view class="tis" v-if="couponinvalidList.length==0">没有数据~</view>
|
||||
<view class="row" v-for="(row,index) in couponinvalidList" :key="index" >
|
||||
<!-- 删除按钮 -->
|
||||
<view class="menu" @tap.stop="deleteCoupon(row.id,couponinvalidList)">
|
||||
<view class="icon shanchu"></view>
|
||||
</view>
|
||||
<!-- content -->
|
||||
<view class="carrier" :class="[typeClass=='invalid'?theIndex==index?'open':oldIndex==index?'close':'':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
|
||||
<view class="left">
|
||||
<view class="title">
|
||||
{{row.note}}
|
||||
</view>
|
||||
<view class="term" v-if="row.terStartime==0 && row.terEndtime==0">
|
||||
已失效
|
||||
<!-- {{row.termStart}} ~ {{row.termEnd}} -->
|
||||
</view>
|
||||
<view class="term" v-else>
|
||||
{{row.startTime |formatCreateTime}} ~ {{row.endTime |formatCreateTime}}
|
||||
</view>
|
||||
<view class="icon shixiao">
|
||||
|
||||
</view>
|
||||
<view class="gap-top"></view>
|
||||
<view class="gap-bottom"></view>
|
||||
</view>
|
||||
<view class="right invalid">
|
||||
<view class="ticket">
|
||||
<view class="num">
|
||||
|
||||
</view>
|
||||
<view class="unit">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="criteria">
|
||||
{{row.amount}}元
|
||||
</view>
|
||||
<!-- <view class="use">
|
||||
去查看
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import eonfox from '@/components/eonfox/eonfox.js';
|
||||
import fns from '@/components/eonfox/fns.js';
|
||||
import { formatDate } from '@/common/date';
|
||||
|
||||
var ef = new eonfox();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
couponValidList:[
|
||||
// {id:1,title:"日常用品立减10元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"10",criteria:"满50使用"},
|
||||
// {id:2,title:"家用电器立减100元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"100",criteria:"满500使用"},
|
||||
// {id:3,title:"全场立减10元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"10",criteria:"无门槛"},
|
||||
// {id:4,title:"全场立减50元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"50",criteria:"满1000使用"}
|
||||
|
||||
],
|
||||
couponinvalidList:[
|
||||
// {id:1,title:"日常用品立减10元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"10",criteria:"满50使用"},
|
||||
// {id:2,title:"家用电器立减100元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"100",criteria:"满500使用"},
|
||||
// {id:3,title:"全场立减10元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"10",criteria:"无门槛"},
|
||||
// {id:4,title:"全场立减50元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"50",criteria:"满1000使用"}
|
||||
],
|
||||
headerTop:0,
|
||||
//控制滑动效果
|
||||
typeClass:'valid',
|
||||
subState:'',
|
||||
theIndex:null,
|
||||
oldIndex:null,
|
||||
isStop:false
|
||||
}
|
||||
},
|
||||
onPageScroll(e){
|
||||
|
||||
},
|
||||
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
|
||||
onPullDownRefresh() {
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
},
|
||||
onLoad() {
|
||||
this.getData()
|
||||
//兼容H5下排序栏位置
|
||||
// #ifdef H5
|
||||
//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
|
||||
let Timer = setInterval(()=>{
|
||||
let uniHead = document.getElementsByTagName('uni-page-head');
|
||||
if(uniHead.length>0){
|
||||
this.headerTop = uniHead[0].offsetHeight+'px';
|
||||
clearInterval(Timer);//清除定时器
|
||||
}
|
||||
},1);
|
||||
// #endif
|
||||
},
|
||||
filters: {
|
||||
formatCreateTime(time) {
|
||||
let date = new Date(time);
|
||||
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
goUse(){
|
||||
uni.switchTab({
|
||||
url:'/pages/index/index'
|
||||
})
|
||||
},
|
||||
async getData(){
|
||||
let params = { };
|
||||
let data = await Api.apiCall('get', Api.index.listMemberCoupon, params);
|
||||
let viewList = data;
|
||||
viewList.forEach(item => {
|
||||
if(item.useStatus==0){
|
||||
this.couponValidList.push(item);
|
||||
}else{
|
||||
this.couponinvalidList.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
switchType(type){
|
||||
// console.log(type)
|
||||
if(this.typeClass==type){
|
||||
return ;
|
||||
}
|
||||
uni.pageScrollTo({
|
||||
scrollTop:0,
|
||||
duration:0
|
||||
})
|
||||
this.typeClass = type;
|
||||
this.subState = this.typeClass==''?'':'show'+type;
|
||||
setTimeout(()=>{
|
||||
this.oldIndex = null;
|
||||
this.theIndex = null;
|
||||
this.subState = this.typeClass=='valid'?'':this.subState;
|
||||
},200)
|
||||
},
|
||||
//控制左滑删除效果-begin
|
||||
touchStart(index,event){
|
||||
//多点触控不触发
|
||||
if(event.touches.length>1){
|
||||
this.isStop = true;
|
||||
return ;
|
||||
}
|
||||
this.oldIndex = this.theIndex;
|
||||
this.theIndex = null;
|
||||
//初始坐标
|
||||
this.initXY = [event.touches[0].pageX,event.touches[0].pageY];
|
||||
},
|
||||
touchMove(index,event){
|
||||
//多点触控不触发
|
||||
if(event.touches.length>1){
|
||||
this.isStop = true;
|
||||
return ;
|
||||
}
|
||||
let moveX = event.touches[0].pageX - this.initXY[0];
|
||||
let moveY = event.touches[0].pageY - this.initXY[1];
|
||||
|
||||
if(this.isStop||Math.abs(moveX)<5){
|
||||
return ;
|
||||
}
|
||||
if (Math.abs(moveY) > Math.abs(moveX)){
|
||||
// 竖向滑动-不触发左滑效果
|
||||
this.isStop = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if(moveX<0){
|
||||
this.theIndex = index;
|
||||
this.isStop = true;
|
||||
}else if(moveX>0){
|
||||
if(this.theIndex!=null&&this.oldIndex==this.theIndex){
|
||||
this.oldIndex = index;
|
||||
this.theIndex = null;
|
||||
this.isStop = true;
|
||||
setTimeout(()=>{
|
||||
this.oldIndex = null;
|
||||
},150)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
touchEnd(index,$event){
|
||||
//解除禁止触发状态
|
||||
this.isStop = false;
|
||||
},
|
||||
|
||||
//删除商品
|
||||
deleteCoupon(id,List){
|
||||
let len = List.length;
|
||||
for(let i=0;i<len;i++){
|
||||
if(id==List[i].id){
|
||||
List.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.oldIndex = null;
|
||||
this.theIndex = null;
|
||||
},
|
||||
|
||||
discard() {
|
||||
//丢弃
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
view{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
page{position: relative;background-color: #f5f5f5;}
|
||||
.hidden{
|
||||
display: none !important;
|
||||
}
|
||||
.place{
|
||||
width: 100%;
|
||||
height: 95upx;
|
||||
}
|
||||
.tabr{
|
||||
background-color: #fff;
|
||||
/* #ifdef H5 || MP-WEIXIN*/
|
||||
width: 100% !important;
|
||||
/* #endif */
|
||||
width: 94%;
|
||||
height: 95upx;
|
||||
padding: 0 3%;
|
||||
border-bottom: solid 1upx #dedede;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
view{
|
||||
width: 50%;
|
||||
height: 90upx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32upx;
|
||||
color: #999;
|
||||
}
|
||||
.on{
|
||||
color: $uni-color-success;
|
||||
}
|
||||
.border{
|
||||
height: 4upx;
|
||||
background-color: $uni-color-success;
|
||||
transition: all .3s ease-out;
|
||||
&.invalid{
|
||||
transform: translate3d(100%,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.list{
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
@keyframes showValid {
|
||||
0% {transform: translateX(-100%);}100% {transform: translateX(0);}
|
||||
}
|
||||
@keyframes showInvalid {
|
||||
0% {transform: translateX(0);}100% {transform: translateX(-100%);}
|
||||
}
|
||||
.sub-list{
|
||||
&.invalid{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left:100%;
|
||||
display: none;
|
||||
}
|
||||
&.showvalid{
|
||||
display: flex;
|
||||
animation: showValid 0.20s linear both;
|
||||
}
|
||||
&.showinvalid{
|
||||
display: flex;
|
||||
animation: showInvalid 0.20s linear both;
|
||||
}
|
||||
width: 100%;
|
||||
padding: 20upx 0 120upx 0;
|
||||
.tis{
|
||||
width: 100%;
|
||||
height: 60upx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32upx;
|
||||
}
|
||||
.row{
|
||||
width: 92%;
|
||||
height: 24vw;
|
||||
margin: 20upx auto 10upx auto;
|
||||
border-radius: 8upx;
|
||||
// box-shadow: 0upx 0 10upx rgba(0,0,0,0.1);
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 4;
|
||||
border: 0;
|
||||
.menu{
|
||||
.icon{
|
||||
color: #fff;
|
||||
font-size:50upx;
|
||||
}
|
||||
position: absolute;
|
||||
width: 28%;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: red;
|
||||
color: #fff;
|
||||
z-index: 2;
|
||||
}
|
||||
.carrier{
|
||||
@keyframes showMenu {
|
||||
0% {transform: translateX(0);}100% {transform: translateX(-28%);}
|
||||
}
|
||||
@keyframes closeMenu {
|
||||
0% {transform: translateX(-28%);}100% {transform: translateX(0);}
|
||||
}
|
||||
&.open{
|
||||
animation: showMenu 0.25s linear both;
|
||||
}
|
||||
&.close{
|
||||
animation: closeMenu 0.15s linear both;
|
||||
}
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 0 0;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
flex-wrap: nowrap;
|
||||
.left{
|
||||
width: 100%;
|
||||
.title{
|
||||
padding-top: 3vw;
|
||||
width: 90%;
|
||||
margin: 0 5%;
|
||||
font-size: 36upx;
|
||||
}
|
||||
.term{
|
||||
width: 90%;
|
||||
margin: 0 5%;
|
||||
font-size: 26upx;
|
||||
color: #999;
|
||||
}
|
||||
position: relative;
|
||||
.gap-top,.gap-bottom{
|
||||
position: absolute;
|
||||
width: 20upx;
|
||||
height: 20upx;
|
||||
right: -10upx;
|
||||
border-radius: 100%;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.gap-top{
|
||||
top: -10upx;
|
||||
}
|
||||
.gap-bottom{
|
||||
bottom: -10upx;
|
||||
}
|
||||
.shixiao{
|
||||
position: absolute;
|
||||
right: 20upx;
|
||||
font-size: 150upx;
|
||||
z-index: 6;
|
||||
color: rgba(153,153,153,0.2)
|
||||
}
|
||||
}
|
||||
.right{
|
||||
flex-shrink: 0;
|
||||
width: 28%;
|
||||
color: #fff;
|
||||
background:linear-gradient(to right,#ec625c,#ee827f);
|
||||
&.invalid{
|
||||
background:linear-gradient(to right,#aaa,#999);
|
||||
.use{
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
justify-content: center;
|
||||
.ticket,.criteria{width: 100%;}
|
||||
.ticket{
|
||||
padding-top: 1vw;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
height: 6vw;
|
||||
.num{
|
||||
font-size: 42upx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.unit{
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
.criteria{
|
||||
justify-content: center;
|
||||
|
||||
font-size: 28upx;
|
||||
}
|
||||
.use{
|
||||
width: 50%;
|
||||
height: 40upx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24upx;
|
||||
background-color: #fff;
|
||||
color: #ee827f;
|
||||
border-radius: 40upx;
|
||||
padding: 0 10upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
<view class="carrier" :class="[theIndex==index?'open':oldIndex==index?'close':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
|
||||
<view class="left">
|
||||
<view class="title">
|
||||
10元日常用品类
|
||||
</view>
|
||||
<view class="term">
|
||||
2019-04-01~2019-05-30
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="ticket">
|
||||
<view class="num">
|
||||
10
|
||||
</view>
|
||||
<view class="unit">
|
||||
元
|
||||
</view>
|
||||
</view>
|
||||
<view class="criteria">
|
||||
满50使用
|
||||
</view>
|
||||
<view class="use">
|
||||
去使用
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
*
|
||||
* */
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
869
mallplusui-uniapp-app/pagesU/user/deposit.vue
Normal file
869
mallplusui-uniapp-app/pagesU/user/deposit.vue
Normal file
@@ -0,0 +1,869 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="block">
|
||||
<view class="title">
|
||||
<text>我的账户</text>
|
||||
<text style="font-size: 28rpx;padding-left: 60rpx;color: #007AFF;" @click="gominxi">交易明细</text>
|
||||
</view>
|
||||
|
||||
<view class="content">
|
||||
<view class="my">
|
||||
我的账户余额：{{money}} 元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="block">
|
||||
<view class="title">
|
||||
充值金额
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="amount">
|
||||
<view class="list">
|
||||
<view class="box" v-for="(amount,index) in amountList" :key="index" @tap="select(amount)" :class="{'on':amount == inputAmount}">
|
||||
{{amount}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="num">
|
||||
<view class="text">
|
||||
自定义充值金额
|
||||
</view>
|
||||
<view class="input">
|
||||
<input type="number" v-model="inputAmount" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="block">
|
||||
<view class="title">
|
||||
选择支付方式
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="pay-list">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="row" @tap="paytype='alipay'">
|
||||
<view class="left">
|
||||
<image src="../../static/img/alipay.png"></image>
|
||||
</view>
|
||||
<view class="center">
|
||||
支付宝支付
|
||||
</view>
|
||||
<view class="right">
|
||||
<radio :checked="paytype=='alipay'" color="#70b162" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="row" @tap="paytype='wxpay'">
|
||||
<view class="left">
|
||||
<image src="../../static/image/wechatpay.png"></image>
|
||||
</view>
|
||||
<view class="center">
|
||||
微信支付
|
||||
</view>
|
||||
<view class="right">
|
||||
<radio :checked="paytype=='wxpay'" color="#70b162" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pay">
|
||||
<view class="btn" @tap="pay">立即充值</view>
|
||||
<!-- <view class="tis">
|
||||
点击立即充值，即代表您同意<view class="terms">
|
||||
《条款协议》
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="pay">
|
||||
<view class="btn btn-tixi" @click="gopage">去提现</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import eonfox from '@/components/eonfox/eonfox.js';
|
||||
import fns from '@/components/eonfox/fns.js';
|
||||
var ef=new eonfox()
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
money:0,
|
||||
inputAmount:'',//金额
|
||||
amountList:[100,200,500],//预设3个可选快捷金额
|
||||
paytype:'wxpay'//支付类型
|
||||
};
|
||||
},
|
||||
onShow(){
|
||||
this.load()
|
||||
},
|
||||
methods:{
|
||||
async load(){
|
||||
let params = { };
|
||||
let data1 = await Api.apiCall('get', Api.member.currentMember, params);
|
||||
this.money = data1.blance;
|
||||
},
|
||||
async onload() {
|
||||
let params = { };
|
||||
let data1 = await Api.apiCall('get', Api.index.currentMember, params);
|
||||
this.money = data1.blance;
|
||||
},
|
||||
select(amount){
|
||||
this.inputAmount = amount;
|
||||
},
|
||||
doDeposit(){
|
||||
if(this.paytype=='alipay'){
|
||||
console.log('支付宝')
|
||||
|
||||
return
|
||||
}else{
|
||||
console.log('微信')
|
||||
return
|
||||
}
|
||||
if (parseFloat(this.inputAmount).toString() == "NaN") {
|
||||
uni.showToast({title:'请输入正确金额',icon:'none'});
|
||||
return ;
|
||||
}
|
||||
if(this.inputAmount<=0){
|
||||
uni.showToast({title:'请输入大于100的金额',icon:'none'});
|
||||
return ;
|
||||
}
|
||||
if(parseFloat(this.inputAmount).toFixed(2)!=parseFloat(this.inputAmount)){
|
||||
uni.showToast({title:'最多只能输入两位小数哦~',icon:'none'});
|
||||
return ;
|
||||
}
|
||||
//模板模拟支付，实际应用请调起微信/支付宝
|
||||
uni.showLoading({
|
||||
title:'支付中...'
|
||||
});
|
||||
setTimeout(()=>{
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title:'支付成功'
|
||||
});
|
||||
setTimeout(()=>{
|
||||
uni.switchTab({
|
||||
url:'../../pages/index/user'
|
||||
});
|
||||
},300);
|
||||
},700)
|
||||
},
|
||||
pay(){
|
||||
var _this=this
|
||||
if(!/^\d+(\.\d+)?$/.test(_this.inputAmount)||_this.inputAmount<=0){
|
||||
uni.showToast({
|
||||
title:'请输入正确金额',
|
||||
icon:'none'
|
||||
})
|
||||
}else{
|
||||
if(_this.paytype!='alipay'){
|
||||
_this.WeChatPay()
|
||||
// // #ifdef MP-WEIXIN
|
||||
// _this.pay_mp_weixin()
|
||||
// // #endif
|
||||
// // #ifdef APP-PLUS || H5
|
||||
// _this.pay_APP_weixin()
|
||||
// // #endif
|
||||
}
|
||||
if(_this.paytype=='alipay'){
|
||||
// #ifdef H5 || MP-WEIXIN
|
||||
uni.showToast({
|
||||
title: '开发中。。。',
|
||||
icon:'none'
|
||||
});
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
_this.payAli();
|
||||
// #endif
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
payAli(){
|
||||
var _this=this;
|
||||
ef.submit({
|
||||
request: {
|
||||
s: ['APPLICATIONORDERSELFBUYUSERMONEY', [{
|
||||
money_fen:_this.inputAmount*100,//必须|要购买余额(人民币，分)
|
||||
pay_method: 'alipay', //支付方式 weixinpay 微信支付、alipay 支付宝支付
|
||||
alipay_trade_type:'APP'
|
||||
} ]]
|
||||
},
|
||||
callback(data){
|
||||
console.log('调起支付宝支付',data)
|
||||
|
||||
fns.checkError(data,'s',function(errno,error){
|
||||
uni.showToast({
|
||||
title:error,
|
||||
icon:'none'
|
||||
})
|
||||
|
||||
})
|
||||
var ali=data.data.s.data.alipay
|
||||
if(ali){
|
||||
uni.requestPayment({
|
||||
provider: 'alipay',
|
||||
orderInfo:ali,
|
||||
success: function (res) {
|
||||
console.log('success:' + JSON.stringify(res));
|
||||
_this.onload()
|
||||
uni.showToast({
|
||||
title:'充值成功',
|
||||
icon:'none'
|
||||
})
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log('fail:' + JSON.stringify(err));
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
error(err){
|
||||
fns.err('提交订单失败',err,1)
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
},
|
||||
// 微信充值
|
||||
WeChatPay(){
|
||||
var _this=this
|
||||
// if (!/^\d+(\.\d+)?$/.test(_this.pay_money) || _this.pay_money <= 0) {
|
||||
// uni.showToast({
|
||||
// title: '请输入正确金额',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// }else{
|
||||
var money_fen=_this.inputAmount*100
|
||||
// if(_this.tabIndex!=0){
|
||||
// money_fen=_this.tabIndex*100
|
||||
// }else{
|
||||
// money_fen=_this.pay_money*100
|
||||
// }
|
||||
// APP充值
|
||||
// #ifdef APP-PLUS
|
||||
ef.submit({
|
||||
request: {
|
||||
s: [
|
||||
'APPLICATIONORDERSELFBUYUSERMONEY',
|
||||
[
|
||||
{
|
||||
money_fen: money_fen, //必须|要购买余额(人民币，分)
|
||||
pay_method: 'weixinpay', //支付方式 weixinpay 微信支付、alipay 支付宝支付
|
||||
weixin_trade_type: 'APP'
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
callback: function(data) {
|
||||
console.log('商家', data);
|
||||
if (
|
||||
fns.checkError(data, 's', function(erron, error) {
|
||||
uni.showToast({
|
||||
title: error,
|
||||
icon: 'none'
|
||||
});
|
||||
_this.pay_switch = false;
|
||||
})
|
||||
) {
|
||||
//7,已支付
|
||||
//发起支付
|
||||
console.log('发起支付', data.data.s.data);
|
||||
_this.requestPayment(data.data.s.data);
|
||||
//获取成功，无错误信息时
|
||||
}
|
||||
},
|
||||
error(err) {
|
||||
fns.err('提交订单失败', err, 1);
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
//#ifdef MP-WEIXIN
|
||||
wx.login({
|
||||
//微信小程序登录获取code
|
||||
success(res) {
|
||||
// #ifdef MP-WEIXIN
|
||||
_this.code = res.code;
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
_this.code = res.authResult.openid;
|
||||
// #endif
|
||||
if (_this.code) {
|
||||
//获取到code生成订单
|
||||
// 发起网络请求
|
||||
console.log('发起网络请求');
|
||||
ef.submit({
|
||||
request: {
|
||||
s: [
|
||||
'APPLICATIONORDERSELFBUYUSERMONEY',
|
||||
[
|
||||
{
|
||||
money_fen: money_fen, //必须|要购买余额(人民币，分)
|
||||
// #ifdef MP-WEIXIN
|
||||
weixin_login_code: _this.code,
|
||||
pay_method: 'weixinpay', //支付方式 weixinpay 微信支付、alipay 支付宝支付
|
||||
weixin_trade_type: 'JSAPI',
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
weixin_login_openid: _this.code,
|
||||
pay_method: 'weixinpay', //支付方式 weixinpay 微信支付、alipay 支付宝支付
|
||||
weixin_trade_type: 'APP'
|
||||
// #endif
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
callback: function(data) {
|
||||
console.log('商家', data);
|
||||
if (
|
||||
fns.checkError(data, 's', function(erron, error) {
|
||||
uni.showToast({
|
||||
title: error,
|
||||
icon: 'none'
|
||||
});
|
||||
_this.pay_switch = false;
|
||||
})
|
||||
) {
|
||||
//7,已支付
|
||||
//发起支付
|
||||
console.log('发起支付', data.data.s.data);
|
||||
_this.requestPayment(data.data.s.data);
|
||||
//获取成功，无错误信息时
|
||||
}
|
||||
},
|
||||
error: function(err) {
|
||||
console.log('出错啦', err);
|
||||
uni.showToast({
|
||||
title: JSON.stringify(err),
|
||||
icon: 'none'
|
||||
});
|
||||
_this.pay_switch = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
_this.pay_switch = false;
|
||||
console.log('登录失败！' + res.errMsg);
|
||||
uni.showToast({
|
||||
title: '登录失败！' + res.errMsg,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
fail() {
|
||||
_this.pay_switch = false;
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
//#ifdef H5
|
||||
ef.submit({
|
||||
request: {
|
||||
s: ['SESSIONWEIXINACCESSTOKEN']
|
||||
},
|
||||
callback(data) {
|
||||
var dataList = fns.checkError(data, 's', function(errno, error) {
|
||||
uni.showToast({
|
||||
title: '请先确认微信授权',
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
console.log(dataList);
|
||||
if (dataList.s) {
|
||||
ef.submit({
|
||||
request: {
|
||||
s: ['APPLICATIONORDERSELFBUYUSERMONEY',
|
||||
[
|
||||
{
|
||||
money_fen: money_fen, //必须|要购买余额(人民币，分)
|
||||
pay_method: 'weixinpay', //支付方式 weixinpay 微信支付、alipay 支付宝支付
|
||||
weixin_trade_type: 'MPJSAPI',
|
||||
weixin_login_openid: dataList.s.openid
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
|
||||
callback(data) {
|
||||
console.log('调起微信支付', data);
|
||||
var dataList = fns.checkError(data, 's', function(errno, error) {
|
||||
uni.showToast({
|
||||
title: error,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
var ress = dataList.s;
|
||||
if (ress) {
|
||||
console.log('ress', ress);
|
||||
|
||||
var getBrandWCPayRequest = {
|
||||
appId: ress.appid,
|
||||
timeStamp: String(ress.time_stamp), // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
|
||||
nonceStr: ress.nonce_str, // 支付签名随机串，不长于 32 位
|
||||
package: 'prepay_id=' + ress.prepay_id, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
|
||||
signType: ress.sign_type, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
|
||||
paySign: ress.pay_sign, // 支付签名
|
||||
};
|
||||
|
||||
console.log('getBrandWCPayRequest', getBrandWCPayRequest);
|
||||
|
||||
function onBridgeReady() {
|
||||
WeixinJSBridge.invoke(
|
||||
'getBrandWCPayRequest', getBrandWCPayRequest,
|
||||
function(res) {
|
||||
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
||||
uni.showToast({
|
||||
title: '支付成功',
|
||||
success() {
|
||||
// setTimeout(function() {
|
||||
// uni.navigateTo({
|
||||
// url: '../../pagesB/my-order/my-order'
|
||||
// });
|
||||
// }, 2000)
|
||||
}
|
||||
})
|
||||
}
|
||||
if (res.err_msg == "get_brand_wcpay_request:fail") {
|
||||
uni.showToast({
|
||||
title: '支付失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
if (res.err_msg == "get_brand_wcpay_request:cancel") {
|
||||
uni.showToast({
|
||||
title: '已取消支付',
|
||||
icon: 'none',
|
||||
success() {
|
||||
setTimeout(function() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}, 1500)
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof WeixinJSBridge == "undefined") {
|
||||
if (document.addEventListener) {
|
||||
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
|
||||
} else if (document.attachEvent) {
|
||||
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
|
||||
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
|
||||
}
|
||||
} else {
|
||||
onBridgeReady();
|
||||
}
|
||||
|
||||
} else {
|
||||
console.log('提交订单失败', ress);
|
||||
_this.payWeChatPMJSAPI();
|
||||
|
||||
}
|
||||
console.log('提交订单', ress);
|
||||
|
||||
},
|
||||
error(err) {
|
||||
console.log('提交订单失败', err, 1);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
console.log('location', location.href);
|
||||
|
||||
//当 ACCESSTOKEN 不存在
|
||||
ef.left_token(function(left_token) {
|
||||
var notify_url = encodeURIComponent(location.href);
|
||||
var url = ef.api_server_url + "?" + encodeURI('data=[["SESSIONWEIXINAUTHORIZE",[{"notify_url":"' +
|
||||
notify_url + '"}]]]') + "&token=" + left_token;
|
||||
console.log(url);
|
||||
location.href = url;
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
error(err) {
|
||||
fns.err('err', err, 1)
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
|
||||
// }
|
||||
},
|
||||
//app微信支付
|
||||
pay_APP_weixin() {
|
||||
var _this = this;
|
||||
ef.submit({
|
||||
request: {
|
||||
s: [
|
||||
'APPLICATIONORDERSELFBUYUSERMONEY',
|
||||
[
|
||||
{
|
||||
money_fen: _this.pay_money * 100, //必须|要购买余额(人民币，分)
|
||||
pay_method: 'weixinpay', //支付方式 weixinpay 微信支付、alipay 支付宝支付
|
||||
weixin_trade_type: 'APP'
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
callback: function(data) {
|
||||
console.log('商家', data);
|
||||
if (
|
||||
fns.checkError(data, 's', function(erron, error) {
|
||||
uni.showToast({
|
||||
title: error,
|
||||
icon: 'none'
|
||||
});
|
||||
_this.pay_switch = false;
|
||||
})
|
||||
) {
|
||||
//7,已支付
|
||||
//发起支付
|
||||
console.log('发起支付', data.data.s.data);
|
||||
_this.requestPayment(data.data.s.data);
|
||||
//获取成功，无错误信息时
|
||||
}
|
||||
},
|
||||
error(err) {
|
||||
fns.err('提交订单失败', err, 1);
|
||||
}
|
||||
});
|
||||
},
|
||||
//微信小程序支付
|
||||
pay_mp_weixin() {
|
||||
var _this = this;
|
||||
wx.login({
|
||||
//微信小程序登录获取code
|
||||
success(res) {
|
||||
// #ifdef MP-WEIXIN
|
||||
_this.code = res.code;
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
_this.code = res.authResult.openid;
|
||||
// #endif
|
||||
if (_this.code) {
|
||||
//获取到code生成订单
|
||||
// 发起网络请求
|
||||
console.log('发起网络请求');
|
||||
ef.submit({
|
||||
request: {
|
||||
s: [
|
||||
'APPLICATIONORDERSELFBUYUSERMONEY',
|
||||
[
|
||||
{
|
||||
money_fen: _this.pay_money * 100, //必须|要购买余额(人民币，分)
|
||||
// #ifdef MP-WEIXIN
|
||||
weixin_login_code: _this.code,
|
||||
pay_method: 'weixinpay', //支付方式 weixinpay 微信支付、alipay 支付宝支付
|
||||
weixin_trade_type: 'JSAPI',
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
weixin_login_openid: _this.code,
|
||||
pay_method: 'weixinpay', //支付方式 weixinpay 微信支付、alipay 支付宝支付
|
||||
weixin_trade_type: 'APP'
|
||||
// #endif
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
callback: function(data) {
|
||||
console.log('商家', data);
|
||||
if (
|
||||
fns.checkError(data, 's', function(erron, error) {
|
||||
uni.showToast({
|
||||
title: error,
|
||||
icon: 'none'
|
||||
});
|
||||
_this.pay_switch = false;
|
||||
})
|
||||
) {
|
||||
//7,已支付
|
||||
//发起支付
|
||||
console.log('发起支付', data.data.s.data);
|
||||
_this.requestPayment(data.data.s.data);
|
||||
//获取成功，无错误信息时
|
||||
}
|
||||
},
|
||||
error: function(err) {
|
||||
console.log('出错啦', err);
|
||||
uni.showToast({
|
||||
title: JSON.stringify(err),
|
||||
icon: 'none'
|
||||
});
|
||||
_this.pay_switch = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
_this.pay_switch = false;
|
||||
console.log('登录失败！' + res.errMsg);
|
||||
uni.showToast({
|
||||
title: '登录失败！' + res.errMsg,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
fail() {
|
||||
_this.pay_switch = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
requestPayment(wxArr) {
|
||||
var _this = this;
|
||||
_this.test = '开始了';
|
||||
var _this = this;
|
||||
console.log('支付参数' + JSON.stringify(wxArr));
|
||||
console.log('调起支付');
|
||||
_this.test = '调起支付';
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
var orderInfo = {
|
||||
appid: wxArr.appid,
|
||||
partnerid: wxArr.mch_id, //商户号
|
||||
prepayid: wxArr.prepay_id, //预支付交易会话ID
|
||||
package: 'Sign=WXPay', //扩展字段,暂填写固定值Sign=WXPay
|
||||
noncestr: wxArr.nonce_str, //随机字符串
|
||||
timestamp: wxArr.time_stamp, //时间戳
|
||||
sign: wxArr.pay_sign //签名
|
||||
};
|
||||
// #endif
|
||||
|
||||
uni.requestPayment({
|
||||
// #ifdef MP-WEIXIN
|
||||
provider: 'wxpay',
|
||||
timeStamp: String(wxArr.time_stamp),
|
||||
nonceStr: wxArr.nonce_str,
|
||||
package: 'prepay_id=' + wxArr.prepay_id,
|
||||
signType: wxArr.sign_type,
|
||||
paySign: wxArr.pay_sign,
|
||||
orderInfo: wxArr,
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
provider: 'wxpay',
|
||||
orderInfo: JSON.stringify(orderInfo),
|
||||
// #endif
|
||||
success: function(res) {
|
||||
console.log('成功success:' + JSON.stringify(res));
|
||||
if (res.errMsg == 'requestPayment:ok') {
|
||||
_this.pay_switch = false;
|
||||
//支付成功是进行订单查询
|
||||
var out_time = 0;
|
||||
var timeTn = setInterval(function() {
|
||||
out_time++;
|
||||
if (out_time <= 30) {
|
||||
_this.pay_result_query(wxArr.order_id, function() {
|
||||
clearInterval(timeTn);
|
||||
_this.onload();
|
||||
uni.showToast({
|
||||
title: '充值成功',
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '业务超时，如已支付，请稍后再个人页面查看是否到账',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '业务超时，如已支付，请稍后再个人页面查看是否到账',
|
||||
icon: 'none'
|
||||
});
|
||||
_this.pay_switch = false;
|
||||
}
|
||||
},
|
||||
fail: function(err) {
|
||||
_this.pay_switch = false;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
//支付结果查询（订单号）
|
||||
pay_result_query(order_id, fun) {
|
||||
console.log('正在查询');
|
||||
ef.submit({
|
||||
request: {
|
||||
s: [
|
||||
'APPLICATIONORDERSELFPAYSTATE',
|
||||
[
|
||||
{
|
||||
order_id: order_id
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
callback: function(data) {
|
||||
// console.log('支付查询回调成功',data.data.s.data) ;return data.data.s.data;
|
||||
if (
|
||||
fns.checkError(data, 's', function(errno, error) {
|
||||
return false;
|
||||
})
|
||||
) {
|
||||
fun();
|
||||
}
|
||||
},
|
||||
error: function(err) {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
gominxi(){
|
||||
uni.navigateTo({
|
||||
url: '../../pagesU/user/balance'
|
||||
})
|
||||
},
|
||||
gopage(){
|
||||
uni.navigateTo({
|
||||
url: '../../pagesU/user/myPurse'
|
||||
})
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.block{
|
||||
width: 94%;
|
||||
padding: 20upx 3%;
|
||||
.title{
|
||||
width: 100%;
|
||||
font-size: 34upx;
|
||||
}
|
||||
.content{
|
||||
.my{
|
||||
width: 100%;
|
||||
height: 120upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 30upx;
|
||||
border-bottom: solid 1upx #eee;
|
||||
}
|
||||
.amount{
|
||||
width: 100%;
|
||||
|
||||
.list{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20upx 0;
|
||||
.box{
|
||||
width: 30%;
|
||||
height: 120upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 10upx;
|
||||
box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.05);
|
||||
font-size: 36upx;
|
||||
background-color: #f1f1f1;
|
||||
color: 333;
|
||||
&.on{
|
||||
background-color: $uni-color-success;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.num{
|
||||
margin-top: 10upx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.text{
|
||||
padding-right: 10upx;
|
||||
font-size: 30upx;
|
||||
}
|
||||
.input{
|
||||
width: 28.2vw;
|
||||
border-bottom: solid 2upx #999;
|
||||
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
input{
|
||||
margin: 0 20upx;
|
||||
height: 60upx;
|
||||
font-size: 30upx;
|
||||
color: $uni-color-success;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pay-list{
|
||||
width: 100%;
|
||||
border-bottom: solid 1upx #eee;
|
||||
.row{
|
||||
width: 100%;
|
||||
height: 120upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.left{
|
||||
width: 100upx;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image{
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
}
|
||||
}
|
||||
.center{
|
||||
width: 100%;
|
||||
font-size: 30upx;
|
||||
}
|
||||
.right{
|
||||
width: 100upx;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pay{
|
||||
margin-top: 20upx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
.btn{
|
||||
width: 70%;
|
||||
height: 80upx;
|
||||
border-radius: 80upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
background-color: $uni-color-success;
|
||||
box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.2);
|
||||
}
|
||||
.btn-tixi{
|
||||
color: $uni-color-success;
|
||||
background: #FFFFFF;
|
||||
border:1upx solid $uni-color-success;
|
||||
}
|
||||
.tis{
|
||||
margin-top: 10upx;
|
||||
width: 100%;
|
||||
font-size: 24upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
color: #999;
|
||||
.terms{
|
||||
color: #5a9ef7;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
488
mallplusui-uniapp-app/pagesU/user/forget.vue
Normal file
488
mallplusui-uniapp-app/pagesU/user/forget.vue
Normal file
@@ -0,0 +1,488 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="left-bottom-sign"></view>
|
||||
<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
|
||||
<view class="right-top-sign"></view>
|
||||
<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
|
||||
<view class="wrapper">
|
||||
<view class="left-top-sign">LOGIN</view>
|
||||
<view class="welcome">
|
||||
忘记密码！
|
||||
</view>
|
||||
<view class="input-content">
|
||||
<view class="input-item">
|
||||
<text class="tit">手机号码</text>
|
||||
<input
|
||||
type="number"
|
||||
:value="phone"
|
||||
placeholder="请输入手机号码"
|
||||
maxlength="11"
|
||||
data-key="phone"
|
||||
@input="onKeyInput"
|
||||
/>
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<text class="tit">密码</text>
|
||||
<input
|
||||
type="mobile"
|
||||
value=""
|
||||
placeholder="8~24位不含特殊字符的数字、字母组合"
|
||||
placeholder-class="input-empty"
|
||||
maxlength="20"
|
||||
password
|
||||
data-key="password"
|
||||
@input="inputChange"
|
||||
/>
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<text class="tit">密码</text>
|
||||
<input
|
||||
type="mobile"
|
||||
value=""
|
||||
placeholder="8~24位不含特殊字符的数字、字母组合"
|
||||
placeholder-class="input-empty"
|
||||
maxlength="20"
|
||||
password
|
||||
data-key="confimpassword"
|
||||
@input="inputChange"
|
||||
/>
|
||||
</view>
|
||||
<view class="verificationBox" >
|
||||
<view class="verificationCon">
|
||||
<text class="verificationLeft">验证码</text>
|
||||
<input type="text" value="" @input="onKeyverification" placeholder="请输入验证码" placeholder-style="font-size:26upx;color:#444444" class="verificationInput" />
|
||||
</view>
|
||||
<button type="primary" :disabled="getverifSwitch" class="button" @click="getverification">{{getConfirms}}</button>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
<button class="confirm-btn" @click="toRegister" :disabled="logining">重置密码</button>
|
||||
|
||||
</view>
|
||||
<view class="register-section">
|
||||
已有账号?
|
||||
<text @click="toLogin">返回登录</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import {
|
||||
mapMutations
|
||||
} from 'vuex';
|
||||
import eonfox from '@/components/eonfox/eonfox.js';
|
||||
import fns from '@/components/eonfox/fns.js';
|
||||
var ef = new eonfox();
|
||||
export default{
|
||||
data(){
|
||||
return {
|
||||
phone: '',
|
||||
password: '',
|
||||
confimpassword:'',//第二次输入密码
|
||||
logining: false,
|
||||
verifTime:0,//验证码时长
|
||||
getConfirms: '获取验证码',
|
||||
confirm:'',
|
||||
getverifSwitch:false,
|
||||
oauthid:''
|
||||
}
|
||||
},
|
||||
onLoad(){
|
||||
this.getStroges();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login']),
|
||||
getStroges(){
|
||||
try {
|
||||
const value = uni.getStorageSync('oauth_id');
|
||||
if (value) {
|
||||
console.log(value);
|
||||
this.oauthid = value
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
inputChange(e){
|
||||
const key = e.currentTarget.dataset.key;
|
||||
this[key] = e.detail.value;
|
||||
},
|
||||
navBack(){
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
},
|
||||
toLogin(){
|
||||
uni.redirectTo({
|
||||
url:'/pages/public/login'
|
||||
})
|
||||
},
|
||||
async toRegister(){
|
||||
var _this=this
|
||||
var phone=this.phone,password=this.password,confimpassword=this.confimpassword;
|
||||
if (!/^1\d{10}$/.test(phone)){
|
||||
uni.showToast({
|
||||
title:'手机号有误',
|
||||
icon:'none'
|
||||
})
|
||||
}else if (password.length < 8 ||password.length > 24||confimpassword.length < 8 ||confimpassword.length > 24) {
|
||||
uni.showToast({
|
||||
title:'密码长度为8~24个字符',
|
||||
icon:'none'
|
||||
})
|
||||
}
|
||||
else if(password!=confimpassword){
|
||||
uni.showToast({
|
||||
title:'两次输入的密码不一致，请检查修改',
|
||||
icon:'none'
|
||||
})
|
||||
}
|
||||
else if(_this.confirm==''){
|
||||
uni.showToast({
|
||||
title: '验证码不能为空',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
else{
|
||||
var req={};
|
||||
req = {
|
||||
phone: this.phone,
|
||||
password:this.password,
|
||||
confimpassword:this.confimpassword,
|
||||
|
||||
authCode: this.confirm,
|
||||
|
||||
};
|
||||
|
||||
let data = await Api.apiCall('post', Api.member.resetPassword, req);
|
||||
uni.showToast({
|
||||
title: '重置成功',
|
||||
success() {
|
||||
_this.bind()
|
||||
setTimeout(function(){
|
||||
uni.reLaunch({
|
||||
url:'/pages/public/login'
|
||||
});
|
||||
},1000)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
onKeyInput: function(e) {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
this[key] = e.detail.value;
|
||||
},
|
||||
|
||||
async getverification(){
|
||||
|
||||
let _this = this;
|
||||
// 验证是否已进行验证码操作
|
||||
if(this.verifTime==0){
|
||||
if (!/^1[1234567890]\d{9}$/.test(this.phone)) {
|
||||
uni.showToast({
|
||||
title: '电话号码有误，请重新输入',
|
||||
icon: 'none'
|
||||
});
|
||||
this.phone = '';
|
||||
return;
|
||||
} else {
|
||||
_this.getverifSwitch=true
|
||||
this.verifTime=60;
|
||||
_this.getConfirms=this.verifTime
|
||||
//倒计时
|
||||
var timeInterval=setInterval(function(){
|
||||
_this.verifTime -- ;
|
||||
if(_this.verifTime<=0){
|
||||
//倒计时结束清除定时器
|
||||
clearInterval(timeInterval)
|
||||
_this.getConfirms='重新发送'
|
||||
_this.getverifSwitch=false
|
||||
return;
|
||||
}
|
||||
_this.getConfirms=_this.verifTime
|
||||
},1000)
|
||||
|
||||
let params = { phone: this.phone};
|
||||
let data = await Api.apiCall('post', Api.index.sendCodes, params);
|
||||
}
|
||||
}else{
|
||||
uni.showToast({
|
||||
title: "请勿重复操作",
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
onKeyverification: function(event) {
|
||||
this.confirm = event.target.value;
|
||||
},
|
||||
//绑定
|
||||
bind(){
|
||||
var _this=this
|
||||
console.log('oauth');
|
||||
uni.getStorage({
|
||||
key:'oauth',
|
||||
success(re) {
|
||||
if(re.data){
|
||||
_this.bind_()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
bind_(){
|
||||
console.log('bind');
|
||||
var _this=this
|
||||
// #ifdef MP-WEIXIN
|
||||
wx.login({
|
||||
success(res) {
|
||||
wx.getUserInfo({
|
||||
success(re) {
|
||||
re.code=res.code;
|
||||
console.log('re:',re);
|
||||
ef.submit({
|
||||
request:{s:['USERSELFBINDWEIXIN',['applet',re]]},
|
||||
callback(data){
|
||||
console.log(data);
|
||||
fns.unionid()
|
||||
return
|
||||
},
|
||||
error(err){
|
||||
fns.err('err',err)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
uni.showToast({
|
||||
title:'正在绑定',
|
||||
icon:'loading'
|
||||
})
|
||||
console.log('oauto star');
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: function (loginRes) {
|
||||
console.log('loginres:',typeof loginRes);
|
||||
if (loginRes.errMsg=='login:ok') {
|
||||
// 获取用户信息
|
||||
uni.showToast({
|
||||
title:'获取信息',
|
||||
icon:'loading'
|
||||
})
|
||||
uni.getUserInfo({
|
||||
provider: 'weixin',
|
||||
success: function (infoRes) {
|
||||
uni.showToast({
|
||||
title:'获取成功',
|
||||
icon:'loading'
|
||||
})
|
||||
ef.submit({
|
||||
request:{s:['USERSELFBINDWEIXIN',['app',infoRes.userInfo]]},
|
||||
callback(data){
|
||||
console.log(data);
|
||||
console.log(JSON.stringify(data));
|
||||
fns.unionid()
|
||||
},
|
||||
error(err){
|
||||
console.log(err);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
fail(err){
|
||||
console.log(err);
|
||||
}
|
||||
});
|
||||
}else{
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
},
|
||||
fail(err) {
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
page{
|
||||
background: #fff;
|
||||
}
|
||||
.container{
|
||||
padding-top: 55px;
|
||||
position:relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
.wrapper{
|
||||
position:relative;
|
||||
z-index: 90;
|
||||
background: #fff;
|
||||
padding-bottom: 40upx;
|
||||
}
|
||||
.back-btn{
|
||||
position:absolute;
|
||||
left: 40upx;
|
||||
z-index: 9999;
|
||||
padding-top: var(--status-bar-height);
|
||||
top: 40upx;
|
||||
font-size: 40upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.left-top-sign{
|
||||
font-size: 120upx;
|
||||
color: $page-color-base;
|
||||
position:relative;
|
||||
left: -16upx;
|
||||
}
|
||||
.right-top-sign{
|
||||
position:absolute;
|
||||
top: 80upx;
|
||||
right: -30upx;
|
||||
z-index: 95;
|
||||
&:before, &:after{
|
||||
display:block;
|
||||
content:"";
|
||||
width: 400upx;
|
||||
height: 80upx;
|
||||
background: #b4f3e2;
|
||||
}
|
||||
&:before{
|
||||
transform: rotate(50deg);
|
||||
border-radius: 0 50px 0 0;
|
||||
}
|
||||
&:after{
|
||||
position: absolute;
|
||||
right: -198upx;
|
||||
top: 0;
|
||||
transform: rotate(-50deg);
|
||||
border-radius: 50px 0 0 0;
|
||||
/* background: pink; */
|
||||
}
|
||||
}
|
||||
.left-bottom-sign{
|
||||
position:absolute;
|
||||
left: -270upx;
|
||||
bottom: -320upx;
|
||||
border: 100upx solid #d0d1fd;
|
||||
border-radius: 50%;
|
||||
padding: 180upx;
|
||||
}
|
||||
.welcome{
|
||||
position:relative;
|
||||
left: 50upx;
|
||||
top: -90upx;
|
||||
font-size: 46upx;
|
||||
color: #555;
|
||||
text-shadow: 1px 0px 1px rgba(0,0,0,.3);
|
||||
}
|
||||
.input-content{
|
||||
padding: 0 60upx;
|
||||
}
|
||||
.input-item{
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items:flex-start;
|
||||
justify-content: center;
|
||||
padding: 0 30upx;
|
||||
background:$page-color-light;
|
||||
height: 120upx;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 50upx;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tit{
|
||||
height: 50upx;
|
||||
line-height: 56upx;
|
||||
font-size: $font-sm+2upx;
|
||||
color: $font-color-base;
|
||||
}
|
||||
input{
|
||||
height: 60upx;
|
||||
font-size: $font-base + 2upx;
|
||||
color: $font-color-dark;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn{
|
||||
width: 630upx;
|
||||
height: 76upx;
|
||||
line-height: 76upx;
|
||||
border-radius: 50px;
|
||||
margin-top: 70upx;
|
||||
background: $uni-color-primary;
|
||||
color: #fff;
|
||||
font-size: $font-lg;
|
||||
&:after{
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
.forget-section{
|
||||
font-size: $font-sm+2upx;
|
||||
color: $font-color-spec;
|
||||
text-align: center;
|
||||
margin-top: 40upx;
|
||||
}
|
||||
.register-section{
|
||||
position:absolute;
|
||||
left: 0;
|
||||
bottom: 50upx;
|
||||
width: 100%;
|
||||
font-size: $font-sm+2upx;
|
||||
color: $font-color-base;
|
||||
text-align: center;
|
||||
text{
|
||||
color: $font-color-spec;
|
||||
margin-left: 10upx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<style lang="stylus" ref="stylesheet/stylus">
|
||||
.verificationBox
|
||||
width 630upx
|
||||
height 80upx
|
||||
margin 20upx auto
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center// 垂直居中
|
||||
flex-direction row
|
||||
.verificationCon
|
||||
height 100%
|
||||
width 65%
|
||||
background #f8f6fc
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center// 垂直居中
|
||||
flex-direction row
|
||||
border-radius 10upx
|
||||
.verificationLeft
|
||||
width 200upx
|
||||
font-size 28upx
|
||||
font-weight 550
|
||||
text-align center
|
||||
.verificationInput
|
||||
display inline-block
|
||||
.button
|
||||
height 100%
|
||||
width 35%
|
||||
background #fa436a
|
||||
font-size 28upx
|
||||
</style>
|
||||
190
mallplusui-uniapp-app/pagesU/user/integral.vue
Normal file
190
mallplusui-uniapp-app/pagesU/user/integral.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="status-contents">
|
||||
<view class="status top-view"></view>
|
||||
</view>
|
||||
<!-- #ifdef APP-PLUS || H5 -->
|
||||
<view class="title-box" @click="back">
|
||||
<uni-icon class="icon" type="arrowleft" size="28" color="#fff"></uni-icon>
|
||||
<text class="title">库存积分</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="integral-box">
|
||||
<view class="toUse">
|
||||
<text class="price" v-if="!integral">0</text>
|
||||
<text class="price" v-else="">{{integral/100}}</text>
|
||||
<text class="text">可支配积分</text>
|
||||
</view>
|
||||
<view class="integral-items">
|
||||
<view class="details-item" @click="billingDetails">
|
||||
<text>账单明细</text>
|
||||
<uni-icon class="icon" type="arrowright" size="24" color="#333"></uni-icon>
|
||||
</view>
|
||||
<view class="buy-item" @click="enterToBuy">
|
||||
<text>购买积分</text>
|
||||
<uni-icon class="icon" type="arrowright" size="24" color="#333"></uni-icon>
|
||||
</view>
|
||||
<view class="given-item" @click="presentIntegral">
|
||||
<text>赠送积分</text>
|
||||
<uni-icon class="icon" type="arrowright" size="24" color="#333"></uni-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniIcon from "@/components/uni-icon/uni-icon.vue"
|
||||
import eonfox from '@/components/eonfox/eonfox.js';
|
||||
import fns from '@/components/eonfox/fns.js';
|
||||
var ef = new eonfox();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
integral:'',
|
||||
shopsId:''
|
||||
};
|
||||
},
|
||||
onShow: function () {
|
||||
this.load();
|
||||
},
|
||||
|
||||
components:{
|
||||
uniIcon
|
||||
},
|
||||
methods: {
|
||||
load(){
|
||||
var that=this;
|
||||
ef.submit({
|
||||
request: {
|
||||
sj: ['MERCHANTSELF'],
|
||||
jf:['MERCHANTCREDITSELF']
|
||||
},
|
||||
callback: function(data){
|
||||
console.log(data);
|
||||
var fns_ = fns.checkError(data,"sj",function(erron, error){
|
||||
uni.showToast({
|
||||
title:error,
|
||||
icon:'none'
|
||||
});
|
||||
|
||||
//没有数据，说明不是商家
|
||||
return;
|
||||
});
|
||||
if( fns_.jf ){
|
||||
that.integral = fns_.jf;
|
||||
}
|
||||
if(fns_.sj){
|
||||
that.shopsId = fns_.sj[0].id;
|
||||
}
|
||||
},
|
||||
error: function(err){
|
||||
console.log("出错啦", err);
|
||||
},
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
back() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
},
|
||||
enterToBuy() {
|
||||
uni.navigateTo({
|
||||
url: '../../pagesA/buyIntegral/buyIntegral'
|
||||
})
|
||||
},
|
||||
presentIntegral() {
|
||||
uni.navigateTo({
|
||||
url: '../presentIntegral/presentIntegral'
|
||||
})
|
||||
},
|
||||
billingDetails:function(){
|
||||
uni.navigateTo({
|
||||
url:'../transactionDetail/transactionDetail?method=merchant_integral&mch_id='+this.shopsId
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.status-contents{
|
||||
height: var(--status-bar-height);
|
||||
background-color: #FF5252;
|
||||
}
|
||||
.top-view{
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
.status{
|
||||
height:var(--status-bar-height);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped lang="stylus" ref="stylesheet/stylus">
|
||||
.content
|
||||
width 100%
|
||||
overflow hidden
|
||||
.title-box
|
||||
width 100%
|
||||
height 60px
|
||||
color #fff
|
||||
font-size 18px
|
||||
line-height 60px
|
||||
background-color #FF5252
|
||||
|
||||
.icon
|
||||
width 40%
|
||||
.integral-box
|
||||
width 100%
|
||||
// height 165px
|
||||
.toUse
|
||||
width 100%
|
||||
height 140px
|
||||
color #fff
|
||||
background-color #FF5252
|
||||
text
|
||||
display block
|
||||
.price
|
||||
font-size 36px
|
||||
text-align center
|
||||
margin 0 auto
|
||||
width 40%
|
||||
background-color #FF5252
|
||||
.text
|
||||
font-size 18px
|
||||
margin 20px auto
|
||||
text-align center
|
||||
width 90%
|
||||
.integral-items
|
||||
width 100%
|
||||
height 170px
|
||||
background-color #f4f3f3
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
flex-direction column
|
||||
.details-item, .buy-item, .given-item
|
||||
width 100%
|
||||
height 45px
|
||||
background-color #fff
|
||||
display flex
|
||||
padding-left 15px
|
||||
justify-content center
|
||||
align-items center
|
||||
border-bottom 1px solid #ccc
|
||||
text
|
||||
width 90%
|
||||
.icon
|
||||
width 10%
|
||||
.details-item
|
||||
margin 15px
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
326
mallplusui-uniapp-app/pagesU/user/invite.vue
Normal file
326
mallplusui-uniapp-app/pagesU/user/invite.vue
Normal file
@@ -0,0 +1,326 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="invite-bg" src="/static/image/invite-bg.png" mode=""></image>
|
||||
<view class="invite-c">
|
||||
<view class="invite-w">
|
||||
<view class='invite-w-t'>我的专属邀请码</view>
|
||||
<text class='invite-w-num'>{{code}}</text>
|
||||
<view class='invite-w-detail'>快去分享您的邀请码吧，让更多的好友加入到【{{appTitle}}】，您也可以获得丰厚的奖励！</view>
|
||||
<view class='invite-w-bot'>
|
||||
<view bindtap='commission' @click="toMoney">
|
||||
<image class='invite-w-bot-ic' src='/static/image/ic-earnings.png'></image>
|
||||
<text class='invite-w-bot-red'>￥{{money}}元</text>
|
||||
<text class='invite-w-bot-gray'>邀请收益</text>
|
||||
</view>
|
||||
<view bindtap='recommendlist' @click="toList">
|
||||
<image class='invite-w-bot-ic' src='/static/image/ic-number.png'></image>
|
||||
<text class='invite-w-bot-red'>{{number}}人</text>
|
||||
<text class='invite-w-bot-gray'>邀请人数</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="invite-w" v-if="!invitecode1">
|
||||
<text class='invite-w-t-blue'>谁推荐你的？</text>
|
||||
<input class='invite-w-input' placeholder='请输入推荐人邀请码' v-model="invitecode"></input>
|
||||
<view class='invite-w-btn' @click="setMyInvite">提交</view>
|
||||
</view>
|
||||
<view class='invite-btn'>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class='share btn' open-type="share">
|
||||
<image src='/static/image/ic-wechat.png'></image>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<button class='share btn' @click="copyUrl()" v-show="!ifwx">
|
||||
<image src='/static/image/ic-link.png'></image>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<button class='share btn' @click="createPoster()">
|
||||
<image src='/static/image/ic-img.png'></image>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import {apiBaseUrl} from '@/config/config.js'
|
||||
// #ifdef MP-TOUTIAO
|
||||
import {ttPlatform} from '@/config/config.js'
|
||||
// #endif
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
myShareCode: '', //分享Code
|
||||
code: '',
|
||||
money: 0,
|
||||
number: 0,
|
||||
appTitle:'',
|
||||
is_superior: false,
|
||||
invitecode: '',
|
||||
invitecode1: '',
|
||||
imageUrl: '/static/image/share_image.png',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.getInviteData();
|
||||
this.getMyShareCode();
|
||||
this.ifwxl()
|
||||
},
|
||||
methods: {
|
||||
// 判断是不是微信浏览器
|
||||
ifwxl(){
|
||||
this.ifwx = this.$common.isWeiXinBrowser()
|
||||
},
|
||||
//获取数据
|
||||
async getInviteData() {
|
||||
let param = {}
|
||||
let data = await Api.apiCall('get', Api.member.getInviteData, param);
|
||||
console.log(data)
|
||||
this.code = data.id;
|
||||
this.money = data.buyMoney;
|
||||
this.number = data.buyCount;
|
||||
this.invitecode1 = data.invitecode;
|
||||
this.appTitle='恬园商城'
|
||||
|
||||
},
|
||||
//去佣金明细
|
||||
toMoney() {
|
||||
this.$common.navigateTo('./inviteMoney?status=5');
|
||||
},
|
||||
//去邀请列表
|
||||
toList() {
|
||||
this.$common.navigateTo('./inviteList');
|
||||
},
|
||||
//填写设置要求
|
||||
setMyInvite() {
|
||||
let data = {
|
||||
invitecode: this.invitecode
|
||||
}
|
||||
Api.apiCall('post', Api.member.updateMember, data);
|
||||
this.$common.successToShow('邀请码填写成功');
|
||||
},
|
||||
// 生成邀请海报
|
||||
createPoster() {
|
||||
let data = {
|
||||
type: 2
|
||||
}
|
||||
|
||||
let page_path = 'pages/share/jump';
|
||||
// #ifdef H5
|
||||
data.source = 1;
|
||||
data.return_url = apiBaseUrl + 'wap/' + page_path;
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
data.source = 2;
|
||||
data.return_url = page_path;
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-ALIPAY
|
||||
data.source = 3;
|
||||
data.return_url = page_path;
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-TOUTIAO
|
||||
data.source = 4;
|
||||
data.return_url = page_path;
|
||||
data.tt_platform = ttPlatform;
|
||||
// #endif
|
||||
|
||||
let userToken = this.$db.get('userToken')
|
||||
|
||||
if (userToken) {
|
||||
data.token = userToken
|
||||
}
|
||||
this.$api.createPoster(data, res => {
|
||||
if (res.status) {
|
||||
this.$common.navigateTo('/pages/share?poster=' + res.data)
|
||||
} else {
|
||||
this.$common.errorToShow(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
//复制URL链接
|
||||
copyUrl() {
|
||||
let userInfo = uni.getStorageSync('userInfo')
|
||||
|
||||
//todo::要复制的内容是 res.data
|
||||
uni.setClipboardData({
|
||||
data:'http://www.yjlive.cn:8082/?invitecode='+userInfo.id,
|
||||
success:function(data){
|
||||
_this.$common.successToShow('复制成功');
|
||||
},
|
||||
fail:function(err){
|
||||
_this.$common.errorToShow('复制分享URL失败');
|
||||
}
|
||||
})
|
||||
},
|
||||
getMyShareCode() {
|
||||
let userToken = this.$db.get("userToken");
|
||||
if (userToken && userToken != '') {
|
||||
// 获取我的分享码
|
||||
this.$api.shareCode({}, res => {
|
||||
if (res.status) {
|
||||
this.myShareCode = res.data ? res.data : '';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
//分享
|
||||
onShareAppMessage() {
|
||||
let myInviteCode = this.myShareCode ? this.myShareCode : '';
|
||||
let ins = this.$common.shareParameterDecode('type=3&invite=' + myInviteCode);
|
||||
let path = '/pages/share/jump?scene=' + ins;
|
||||
return {
|
||||
title: this.$store.state.config.share_title,
|
||||
// #ifdef MP-ALIPAY
|
||||
desc: this.$store.state.config.share_desc,
|
||||
// #endif
|
||||
imageUrl: this.$store.state.config.share_image,
|
||||
path: path
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.invite {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, #4c21d2, #4864f8);
|
||||
}
|
||||
|
||||
.invite-bg {
|
||||
position: absolute;
|
||||
width: 750upx;
|
||||
height: 683upx;
|
||||
z-index: 66;
|
||||
}
|
||||
|
||||
.invite-c {
|
||||
position: relative;
|
||||
z-index: 67;
|
||||
width: 750upx;
|
||||
padding: 0 30upx;
|
||||
top: 488upx;
|
||||
background: linear-gradient(to right, #4c21d2, #4864f8);
|
||||
}
|
||||
|
||||
.invite-w {
|
||||
background-color: #fff;
|
||||
width: 690upx;
|
||||
text-align: center;
|
||||
padding: 40upx 100upx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 30upx;
|
||||
margin-bottom: 70upx;
|
||||
position: relative;
|
||||
top: -148upx;
|
||||
}
|
||||
|
||||
.invite-w-t {
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
color: #fff;
|
||||
border-radius: 50upx;
|
||||
font-size: 30upx;
|
||||
box-sizing: border-box;
|
||||
padding: 10upx;
|
||||
display: block;
|
||||
background: linear-gradient(to right, #5f2ef6, #b945dd);
|
||||
}
|
||||
|
||||
.invite-w-num {
|
||||
color: #5f2ef6;
|
||||
display: block;
|
||||
font-size: 36upx;
|
||||
margin-top: 20upx;
|
||||
}
|
||||
|
||||
.invite-w-detail {
|
||||
color: #666;
|
||||
font-size: 24upx;
|
||||
line-height: 1.5;
|
||||
margin-top: 20upx;
|
||||
}
|
||||
|
||||
.invite-w-bot {
|
||||
margin: 20upx 0 50upx;
|
||||
}
|
||||
|
||||
.invite-w-bot>view {
|
||||
width: 49%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.invite-w-bot-ic {
|
||||
width: 48upx;
|
||||
height: 48upx;
|
||||
}
|
||||
|
||||
.invite-w-bot-red {
|
||||
font-size: 24upx;
|
||||
color: #ca0400;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.invite-w-bot-gray {
|
||||
font-size: 24upx;
|
||||
color: #acacac;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.invite-w-t-blue {
|
||||
color: #348dfc;
|
||||
font-size: 30upx;
|
||||
margin-bottom: 50upx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.invite-w-input {
|
||||
font-size: 30upx;
|
||||
border-bottom: 1px solid #dadada;
|
||||
margin-bottom: 50upx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.invite-w-btn {
|
||||
background: linear-gradient(to right, #4a6af9, #28c4ff);
|
||||
color: #fff;
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
border-radius: 50upx;
|
||||
font-size: 30upx;
|
||||
padding: 10upx 0;
|
||||
}
|
||||
|
||||
.invite-btn {
|
||||
position: relative;
|
||||
top: -150upx;
|
||||
text-align: center;
|
||||
width: 690upx;
|
||||
}
|
||||
|
||||
.share {
|
||||
background-color: none;
|
||||
position: relative;
|
||||
width: 98upx;
|
||||
height: 98upx;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
margin: 0 40rpx 40rpx;
|
||||
}
|
||||
|
||||
.invite-btn image {
|
||||
width: 98upx;
|
||||
height: 98upx;
|
||||
}
|
||||
</style>
|
||||
162
mallplusui-uniapp-app/pagesU/user/inviteList.vue
Normal file
162
mallplusui-uniapp-app/pagesU/user/inviteList.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="collection">
|
||||
<view class="container_of_slide" v-for="(item, index) in lists" :key="index">
|
||||
<view class="slide_list">
|
||||
<view class="now-message-info" hover-class="uni-list-cell-hover">
|
||||
<view class="icon-circle">
|
||||
<image class='goods-img' :src="item.icon" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="list-right">
|
||||
<view class="list-title">昵称: {{ item.nickname }}</view>
|
||||
<view class="list-detail color-6">手机号: {{ item.phone }}</view>
|
||||
<view class="list-detail">推荐时间: {{ item.createTime |formatCreateTime}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="clear:both"></view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more :status="loadStatus"></uni-load-more>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
|
||||
import { formatDate } from '@/common/date';
|
||||
export default {
|
||||
components: {
|
||||
uniLoadMore
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lists: [],
|
||||
page: 1, //当前页
|
||||
limit: 10, //每页显示几条
|
||||
loadStatus: 'more'
|
||||
};
|
||||
},
|
||||
onLoad () {
|
||||
this.getShareCode();
|
||||
this.getDataList();
|
||||
},
|
||||
onReachBottom () {
|
||||
if (this.loadStatus === 'more') {
|
||||
this.getDataList()
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
formatCreateTime(time) {
|
||||
let date = new Date(time);
|
||||
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getDataList() {
|
||||
let params = { };
|
||||
let data = await Api.apiCall('get', Api.member.inviteUser, params);
|
||||
console.log(data)
|
||||
this.lists = data;
|
||||
},
|
||||
//获取邀请码
|
||||
getShareCode(){
|
||||
let userToken = this.$db.get("userToken");
|
||||
if (userToken && userToken != '') {
|
||||
// 获取我的分享码
|
||||
this.$api.shareCode({}, res => {
|
||||
if (res.status) {
|
||||
this.myShareCode = res.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.collection .goods-img{
|
||||
width: 150upx;
|
||||
height: 150upx;
|
||||
}
|
||||
.container_of_slide {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.slide_list {
|
||||
transition: all 100ms;
|
||||
transition-timing-function: ease-out;
|
||||
min-width: 100%;
|
||||
}
|
||||
.now-message-info {
|
||||
box-sizing:border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
clear:both;
|
||||
padding: 20upx 26upx;
|
||||
margin-bottom: 2upx;
|
||||
background: #FFFFFF;
|
||||
width: 100%;
|
||||
}
|
||||
.now-message-info,
|
||||
.group-btn {
|
||||
float: left;
|
||||
}
|
||||
.group-btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 190upx;
|
||||
min-width: 100upx;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.group-btn .btn-div {
|
||||
height: 190upx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 0 50upx;
|
||||
font-size: 34upx;
|
||||
line-height: 190upx;
|
||||
}
|
||||
.group-btn .top {
|
||||
background-color: #FF7159;
|
||||
}
|
||||
.group-btn .removeM {
|
||||
background-color: #999;
|
||||
}
|
||||
.icon-circle{
|
||||
width:150upx;
|
||||
height: 150upx;
|
||||
float: left;
|
||||
}
|
||||
.list-right{
|
||||
float: left;
|
||||
margin-left: 25upx;
|
||||
height: 150upx;
|
||||
}
|
||||
.list-right-1{
|
||||
float: right;
|
||||
color: #A9A9A9;
|
||||
}
|
||||
.list-title{
|
||||
width: 490upx;
|
||||
line-height:1.5;
|
||||
overflow:hidden;
|
||||
color:#333;
|
||||
font-size: 26upx;
|
||||
min-height: 60upx;
|
||||
}
|
||||
.list-detail{
|
||||
width: 460upx;
|
||||
font-size: 24upx;
|
||||
color: #a9a9a9;
|
||||
display:-webkit-box;
|
||||
-webkit-box-orient:vertical;
|
||||
-webkit-line-clamp:1;
|
||||
overflow:hidden;
|
||||
height: 50upx;
|
||||
}
|
||||
</style>
|
||||
416
mallplusui-uniapp-app/pagesU/user/inviteMoney.vue
Normal file
416
mallplusui-uniapp-app/pagesU/user/inviteMoney.vue
Normal file
@@ -0,0 +1,416 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
|
||||
|
||||
|
||||
|
||||
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
|
||||
<!-- 空白页 -->
|
||||
<empty v-if=" list.length === 0"></empty>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<view v-for="(item, index) in list" :key="index" class="order-item" >
|
||||
<view class="i-top b-b">
|
||||
<text class="time">{{ item.createTime }}</text>
|
||||
<text class="time">订单编号：{{ item.orderId }}</text>
|
||||
<text class="state">商品编号：{{ item.goodsId }}</text>
|
||||
<text class="state">佣金：{{ item.money }}</text>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
<uni-load-more :status="loadingType"></uni-load-more>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
||||
import empty from '@/components/empty';
|
||||
export default {
|
||||
components: {
|
||||
uniLoadMore
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
objectType: ['全部', '消费', '退款', '充值', '提现', '佣金', '平台调整'],
|
||||
index: 0, // 默认选中的类型 索引
|
||||
page: 1,
|
||||
limit: 10,
|
||||
list: [],
|
||||
states: [0, 1, 2, 3, 4, 5, 7], // 不同类型的状态
|
||||
loadStatus: 'more'
|
||||
}
|
||||
},
|
||||
onLoad (e) {
|
||||
if(e.status){
|
||||
this.index = this.states.indexOf(parseInt(e.status));
|
||||
}else{
|
||||
this.balances()//修复多次加载问题
|
||||
}
|
||||
},
|
||||
onReachBottom () {
|
||||
if (this.loadStatus === 'more') {
|
||||
this.balances()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 切换类型
|
||||
changeState (e) {
|
||||
if (this.index !== e.target.value) {
|
||||
this.index = e.target.value;
|
||||
this.page = 1
|
||||
this.list = []
|
||||
}
|
||||
},
|
||||
// 获取余额明细
|
||||
async balances () {
|
||||
let params = { };
|
||||
let data = await Api.apiCall('get', Api.member.inviteMoney, params);
|
||||
console.log(data)
|
||||
this.list = data;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
index () {
|
||||
this.balances();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page,
|
||||
.content {
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.list-scroll-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
padding: 0 5px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-size: 15px;
|
||||
color: $font-color-dark;
|
||||
position: relative;
|
||||
&.current {
|
||||
color: $base-color;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 44px;
|
||||
height: 0;
|
||||
border-bottom: 2px solid $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uni-swiper-item {
|
||||
height: auto;
|
||||
}
|
||||
.order-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 30upx;
|
||||
background: #fff;
|
||||
margin-top: 16upx;
|
||||
.i-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 80upx;
|
||||
padding-right: 30upx;
|
||||
font-size: $font-base;
|
||||
color: $font-color-dark;
|
||||
position: relative;
|
||||
.time {
|
||||
flex: 1;
|
||||
}
|
||||
.state {
|
||||
color: $base-color;
|
||||
}
|
||||
.del-btn {
|
||||
padding: 10upx 0 10upx 36upx;
|
||||
font-size: $font-lg;
|
||||
color: $font-color-light;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 30upx;
|
||||
border-left: 1px solid $border-color-dark;
|
||||
position: absolute;
|
||||
left: 20upx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 多条商品 */
|
||||
.goods-box {
|
||||
height: 160upx;
|
||||
padding: 20upx 0;
|
||||
white-space: nowrap;
|
||||
.goods-item {
|
||||
width: 120upx;
|
||||
height: 120upx;
|
||||
display: inline-block;
|
||||
margin-right: 24upx;
|
||||
}
|
||||
.goods-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
/* 单条商品 */
|
||||
.goods-box-single {
|
||||
display: flex;
|
||||
padding: 20upx 0;
|
||||
.goods-img {
|
||||
display: block;
|
||||
width: 120upx;
|
||||
height: 120upx;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 30upx 0 24upx;
|
||||
overflow: hidden;
|
||||
.title {
|
||||
font-size: $font-base + 2upx;
|
||||
color: $font-color-dark;
|
||||
line-height: 1;
|
||||
}
|
||||
.attr-box {
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-light;
|
||||
padding: 10upx 12upx;
|
||||
}
|
||||
.price {
|
||||
font-size: $font-base + 2upx;
|
||||
color: $font-color-dark;
|
||||
&:before {
|
||||
content: '￥';
|
||||
font-size: $font-sm;
|
||||
margin: 0 2upx 0 8upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: baseline;
|
||||
padding: 20upx 30upx;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-light;
|
||||
.num {
|
||||
margin: 0 8upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.price {
|
||||
font-size: $font-lg;
|
||||
color: $font-color-dark;
|
||||
&:before {
|
||||
content: '￥';
|
||||
font-size: $font-sm;
|
||||
margin: 0 2upx 0 8upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.action-box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
height: 100upx;
|
||||
position: relative;
|
||||
padding-right: 30upx;
|
||||
}
|
||||
.action-btn {
|
||||
width: 160upx;
|
||||
height: 60upx;
|
||||
margin: 0;
|
||||
margin-left: 24upx;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
line-height: 60upx;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-dark;
|
||||
background: #fff;
|
||||
border-radius: 100px;
|
||||
&:after {
|
||||
border-radius: 100px;
|
||||
}
|
||||
&.recom {
|
||||
background: #fff9f9;
|
||||
color: $base-color;
|
||||
&:after {
|
||||
border-color: #f7bcc8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* load-more */
|
||||
.uni-load-more {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 80upx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.uni-load-more__text {
|
||||
font-size: 28upx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.uni-load-more__img {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.uni-load-more__img > view {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.uni-load-more__img > view view {
|
||||
width: 6px;
|
||||
height: 2px;
|
||||
border-top-left-radius: 1px;
|
||||
border-bottom-left-radius: 1px;
|
||||
background: #999;
|
||||
position: absolute;
|
||||
opacity: 0.2;
|
||||
transform-origin: 50%;
|
||||
animation: load 1.56s ease infinite;
|
||||
}
|
||||
|
||||
.uni-load-more__img > view view:nth-child(1) {
|
||||
transform: rotate(90deg);
|
||||
top: 2px;
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
.uni-load-more__img > view view:nth-child(2) {
|
||||
transform: rotate(180deg);
|
||||
top: 11px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.uni-load-more__img > view view:nth-child(3) {
|
||||
transform: rotate(270deg);
|
||||
bottom: 2px;
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
.uni-load-more__img > view view:nth-child(4) {
|
||||
top: 11px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.load1,
|
||||
.load2,
|
||||
.load3 {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.load2 {
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
|
||||
.load3 {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
|
||||
.load1 view:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.load2 view:nth-child(1) {
|
||||
animation-delay: 0.13s;
|
||||
}
|
||||
|
||||
.load3 view:nth-child(1) {
|
||||
animation-delay: 0.26s;
|
||||
}
|
||||
|
||||
.load1 view:nth-child(2) {
|
||||
animation-delay: 0.39s;
|
||||
}
|
||||
|
||||
.load2 view:nth-child(2) {
|
||||
animation-delay: 0.52s;
|
||||
}
|
||||
|
||||
.load3 view:nth-child(2) {
|
||||
animation-delay: 0.65s;
|
||||
}
|
||||
|
||||
.load1 view:nth-child(3) {
|
||||
animation-delay: 0.78s;
|
||||
}
|
||||
|
||||
.load2 view:nth-child(3) {
|
||||
animation-delay: 0.91s;
|
||||
}
|
||||
|
||||
.load3 view:nth-child(3) {
|
||||
animation-delay: 1.04s;
|
||||
}
|
||||
|
||||
.load1 view:nth-child(4) {
|
||||
animation-delay: 1.17s;
|
||||
}
|
||||
|
||||
.load2 view:nth-child(4) {
|
||||
animation-delay: 1.3s;
|
||||
}
|
||||
|
||||
.load3 view:nth-child(4) {
|
||||
animation-delay: 1.43s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes load {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
580
mallplusui-uniapp-app/pagesU/user/myPurse.vue
Normal file
580
mallplusui-uniapp-app/pagesU/user/myPurse.vue
Normal file
@@ -0,0 +1,580 @@
|
||||
<template>
|
||||
<view class="conten">
|
||||
<view class="conten-top">
|
||||
<view class="conten-top-title">
|
||||
<text>{{money/100}}</text>
|
||||
</view>
|
||||
<view class="conten-top-text">
|
||||
<text>可提现金额</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail" @click="goDetail">
|
||||
<text>提现明细</text>
|
||||
<view class="detailedRight">
|
||||
<image src="http://rs.eonfox.cc/clzy/static/Arrow_right02.png" class="detailedRightImg"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="withdrawDeposit" v-show="!display">
|
||||
<view class="withdrawDeposit-title">
|
||||
<text>请输入提现金额</text>
|
||||
</view>
|
||||
<text class="abposin">￥</text>
|
||||
<view class="withdrawDeposit-box">
|
||||
<input type="digit" v-model="moneyTx" placeholder="此处金额在100~10000间且每日提现不能超过三次"/>
|
||||
</view>
|
||||
<view class="withdrawDeposit-text">
|
||||
<text>请选择提现账户</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="BopBox" v-show="display">
|
||||
<view class="informationBox">
|
||||
<view class="infor-title">
|
||||
<text>支付宝账号:</text>
|
||||
</view>
|
||||
<view class="infor-input">
|
||||
<input type="text" value="" @input="inpID" :placeholder="ID" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="informationBox">
|
||||
<view class="infor-title">
|
||||
<text>真实姓名:</text>
|
||||
</view>
|
||||
<view class="infor-input">
|
||||
<input type="text" value="" @input="inpName" :placeholder="name"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="affirmBut">
|
||||
<button type="primary" @click="next()">确认</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="payw">
|
||||
<image src="http://rs.eonfox.cc/clzy/static/ali_pay.png" mode=""></image>
|
||||
<text class="txt" @click="payAli">支付宝</text>
|
||||
<text style="float: right; padding-right:40upx;color: #598fc7;" @click="addpayAli">添加支付宝账号信息</text>
|
||||
</view>
|
||||
<view class="pay" @click="payWx">
|
||||
<image src="http://rs.eonfox.cc/clzy/static/wechat.png" mode=""></image>
|
||||
<text class="txt">微信</text>
|
||||
</view> -->
|
||||
<view style="float:left;" v-show="!display">
|
||||
<view class="payw">
|
||||
<image src="http://rs.eonfox.cc/clzy/static/ali_pay.png" mode=""></image>
|
||||
<text class="txt" @click="popBox">支付宝</text> <!-- @click="payAli" -->
|
||||
<label class="radio"><radio value="r1" :checked="choice" @click="xz('z')"/></label>
|
||||
</view>
|
||||
<view class="pay">
|
||||
<image src="http://rs.eonfox.cc/clzy/static/wechat.png" mode="" ></image>
|
||||
<text class="txt">微信</text>
|
||||
<label class="radio"><radio value="r2" :checked="!choice" @click="xz('w')" /></label>
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="WithdrawBut" v-show="!display">
|
||||
提现
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import uniIcon from "@/components/uni-icon/uni-icon.vue"
|
||||
import fns from '@/components/eonfox/fns.js';
|
||||
import eonfox from '@/components/eonfox/eonfox.js';
|
||||
var ef = new eonfox();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
money:'0.00',
|
||||
moneyTx:'',
|
||||
Sofar:'',
|
||||
code:'',
|
||||
openid:'',
|
||||
ID:'', //支付宝账号
|
||||
name:'', //支付宝真实姓名
|
||||
choice:true,
|
||||
display:false,
|
||||
isAuth:false
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#ff5252',
|
||||
animation: {
|
||||
duration: 400,
|
||||
timingFunc: 'easeIn'
|
||||
}
|
||||
})
|
||||
this.moneyQuery();
|
||||
var that=this;
|
||||
|
||||
},
|
||||
methods:{
|
||||
goDetail(){
|
||||
uni.navigateTo({
|
||||
url: '../../pagesA/transactionDetail/transactionDetail?method=user_money_earning'
|
||||
})
|
||||
},
|
||||
payAli(){
|
||||
var _this=this
|
||||
var money=_this.moneyTx*100
|
||||
ef.submit({
|
||||
request:{s:['APPLICATIONORDERSELFUSERMONEYEARNINGWITHDRAW',[{
|
||||
money_fen:money,
|
||||
withdraw_method:"alipay",
|
||||
// // #ifdef MP-WEIXIN
|
||||
// weixin_login_code:_this.code,
|
||||
// weixin_trade_type:"JSAPI",
|
||||
// // #endif
|
||||
// // #ifdef APP-PLUS
|
||||
// weixin_login_openid:"用户OpenID，当weixin_login_code参数不存在时需要",
|
||||
// weixin_trade_type:"APP"
|
||||
// // #endif
|
||||
alipay_account:_this.ID,//支付宝账号
|
||||
alipay_realname:_this.name,//真实姓名
|
||||
}]]},
|
||||
callback(data){
|
||||
console.log(data);
|
||||
var re=fns.checkError(data,'s',function(errno,error){
|
||||
uni.showToast({
|
||||
title:error,
|
||||
icon:'none'
|
||||
})
|
||||
})
|
||||
if(data.data.s.errno==0){
|
||||
uni.showToast({
|
||||
title:'提现成功',
|
||||
|
||||
});
|
||||
setTimeout(function(){
|
||||
uni.navigateBack({
|
||||
url:'../../pages/me/me'
|
||||
})
|
||||
},2000);
|
||||
}
|
||||
|
||||
},error(err){
|
||||
fns.err('调用提现错误',err,1)
|
||||
}
|
||||
})
|
||||
this.moneyQuery();
|
||||
},
|
||||
addpayAli(){
|
||||
uni.navigateTo({
|
||||
url: '../../pagesA/addpayAli/addpayAli'
|
||||
})
|
||||
},
|
||||
payWx(){
|
||||
var _this=this
|
||||
var money=_this.moneyTx*100
|
||||
console.log('提现金额',money);
|
||||
console.log('我的账户',_this.money);
|
||||
console.log(money<=0,money>_this.money);
|
||||
if(money<=0||money>_this.money||!/^\d+(\.\d+)?$/.test(money)){
|
||||
uni.showToast({
|
||||
title:'提现金额错误',
|
||||
icon:'none'
|
||||
})
|
||||
}else{
|
||||
// #ifdef MP-WEIXIN
|
||||
|
||||
_this.wxMp()
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
_this.wxApp()
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
wxMp(){
|
||||
var _this=this
|
||||
wx.login({
|
||||
//微信小程序登录获取code
|
||||
success(res) {
|
||||
_this.code = res.code;
|
||||
if (res.code) {
|
||||
//获取到code生成订单
|
||||
// 发起网络请求
|
||||
console.log('发起网络请求');
|
||||
_this.tiXian()
|
||||
} else {
|
||||
_this.isDisable = false;
|
||||
console.log('登录失败！' + res.errMsg)
|
||||
uni.showToast({
|
||||
title: '登录失败！' + res.errMsg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
wxApp(){
|
||||
var _this=this
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: function (loginRes) {
|
||||
console.log('loginres:',typeof loginRes);
|
||||
if (loginRes.errMsg=='login:ok') {
|
||||
// 获取用户信息
|
||||
uni.getUserInfo({
|
||||
provider: 'weixin',
|
||||
success: function (infoRes) {
|
||||
console.log('info',JSON.stringify(infoRes.userInfo));
|
||||
var openid=infoRes.userInfo.openId
|
||||
_this.tiXian(openid)
|
||||
},
|
||||
fail(err){
|
||||
fns.err('err',err,1)
|
||||
}
|
||||
});
|
||||
|
||||
}else{
|
||||
fns.err('err','err',1)
|
||||
}
|
||||
},
|
||||
fail(err) {
|
||||
fns.err('err','login',1)
|
||||
}
|
||||
});
|
||||
},
|
||||
tiXian(openid){
|
||||
var _this=this
|
||||
var money=_this.moneyTx*100
|
||||
ef.submit({
|
||||
request:{s:['APPLICATIONORDERSELFUSERMONEYEARNINGWITHDRAW',[{
|
||||
money_fen:money,
|
||||
comment:"赠送收益提现",
|
||||
withdraw_method:"weixinpay",
|
||||
// #ifdef MP-WEIXIN
|
||||
weixin_login_code:_this.code,
|
||||
weixin_trade_type:"JSAPI",
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
weixin_login_openid:openid,
|
||||
weixin_trade_type:"APP"
|
||||
// #endif
|
||||
}]]},
|
||||
callback(data){
|
||||
var re=fns.checkError(data,'s',function(errno,error){
|
||||
fns.err('err',error)
|
||||
})
|
||||
if (data.data.s && data.data.s.data ){
|
||||
uni.showToast({
|
||||
title:'提现成功',
|
||||
success() {
|
||||
setTimeout(function(){
|
||||
uni.redirectTo({
|
||||
url:'../../pagesB/profit/profit'
|
||||
})
|
||||
},2000)
|
||||
}
|
||||
})
|
||||
}
|
||||
console.log('tixian',data);
|
||||
},error(err){
|
||||
fns.err('调用提现错误',err,1)
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
async moneyQuery(){
|
||||
var _this=this
|
||||
|
||||
let params = { };
|
||||
let data1 = await Api.apiCall('get', Api.member.currentMember, params);
|
||||
_this.money = data1.blance;
|
||||
|
||||
|
||||
},
|
||||
xz(fun){
|
||||
var that=this;
|
||||
if(fun=='z'){
|
||||
that.choice=true;
|
||||
}else{
|
||||
that.choice=false;
|
||||
}
|
||||
|
||||
},
|
||||
popBox(){
|
||||
var that=this;
|
||||
that.display=!that.display;
|
||||
},
|
||||
inpID:function(event){
|
||||
var that=this;
|
||||
that.ID = event.detail.value;
|
||||
},
|
||||
inpName:function(event){
|
||||
var that=this;
|
||||
that.name = event.detail.value;
|
||||
},
|
||||
next(){
|
||||
var that=this;
|
||||
that.display=!that.display;
|
||||
ef.submit({
|
||||
request: {
|
||||
u:['USERSELFCONFIGALIPAY',[{account:that.ID,realname:that.name}]]
|
||||
},
|
||||
callback: function(data){
|
||||
console.log("用户支付宝信息",data);
|
||||
var ulist=fns.checkError(data,'u',function(errno,error){
|
||||
uni.showToast({
|
||||
title:error,
|
||||
icon:'none'
|
||||
})
|
||||
})
|
||||
if(ulist.u){
|
||||
uni.showToast({
|
||||
title:'保存成功',
|
||||
icon:'none',
|
||||
success() {
|
||||
that.isAuth=true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
error: function(err){
|
||||
console.log("出错啦", err);
|
||||
},
|
||||
});
|
||||
},
|
||||
WithdrawBut(){
|
||||
console.log('点击提现按钮')
|
||||
var that=this;
|
||||
// true支付宝
|
||||
// if(that.choice==true){
|
||||
// that.payAli();
|
||||
// }
|
||||
// // false微信
|
||||
if(that.moneyTx<100){
|
||||
fns.err('提现金额必须大于等于100元');
|
||||
return
|
||||
}
|
||||
//
|
||||
if(that.choice){
|
||||
console.log('提现支付宝',that.isAuth);
|
||||
|
||||
// if(!that.isAuth){
|
||||
// uni.showToast({
|
||||
// title:'请设置支付宝信息',
|
||||
// icon:'none',
|
||||
// success() {
|
||||
// that.display=!that.display;
|
||||
// }
|
||||
// });
|
||||
// return;
|
||||
//
|
||||
// }
|
||||
if(that.ID==""){
|
||||
that.display=!that.display;
|
||||
}
|
||||
else{
|
||||
uni.showModal({
|
||||
title:'提示',
|
||||
content:'你是否要提现'+that.moneyTx+'元到'+that.ID+'账号',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
that.payAli();
|
||||
} else if (res.cancel) {
|
||||
that.display=!that.display;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}else{
|
||||
console.log('提现微信');
|
||||
that.payWx();
|
||||
}
|
||||
}
|
||||
//-----
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.conten{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
.conten-top{
|
||||
width: 100%;
|
||||
height: 250upx;
|
||||
background-color: #FF5252;
|
||||
padding-top: 80upx;
|
||||
color: #ffff;
|
||||
}
|
||||
.conten-top-text{
|
||||
width: 100%;
|
||||
height: 50upx;
|
||||
text-align: center;
|
||||
font-size:32upx;
|
||||
margin-top: 30upx;
|
||||
}
|
||||
.conten-top-text text{
|
||||
font-size:32upx;
|
||||
color:#FFFFFF;
|
||||
}
|
||||
.conten-top-title{
|
||||
width: 100%;
|
||||
height: 50upx;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.conten-top-title text{
|
||||
font-size:56upx;
|
||||
color:#FFFFFF;
|
||||
}
|
||||
.detail{
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 100upx;
|
||||
border-bottom:1px solid #dedbdb;
|
||||
line-height: 100upx;
|
||||
padding-left: 20upx;
|
||||
font-size: 32upx;
|
||||
}
|
||||
.withdrawDeposit{
|
||||
width: 100%;
|
||||
height: 300upx;
|
||||
font-size: 28upx;
|
||||
float: left;
|
||||
}
|
||||
.withdrawDeposit-title{
|
||||
width:90%;
|
||||
color: #666666;
|
||||
margin-left: 10%;
|
||||
line-height: 100upx;
|
||||
height: 100upx;
|
||||
}
|
||||
.withdrawDeposit-box{
|
||||
width: 90%;
|
||||
height: 70upx;
|
||||
background-color: #E8E8E8;
|
||||
margin-left: 10%;
|
||||
margin-top:10upx;
|
||||
line-height: 70upx;
|
||||
}
|
||||
.withdrawDeposit-text{
|
||||
width: 100%;
|
||||
height: 70upx;
|
||||
text-align: center;
|
||||
line-height: 70upx;
|
||||
margin-top: 30upx;
|
||||
}
|
||||
.payw{
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 100upx;
|
||||
border: 1px #DEDBDB solid;
|
||||
line-height: 100upx;
|
||||
font-size: 28upx;
|
||||
padding-left: 30upx;
|
||||
}
|
||||
.pay{
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 100upx;
|
||||
border-bottom: 1px #DEDBDB solid;
|
||||
line-height: 100upx;
|
||||
font-size: 28upx;
|
||||
padding-left: 30upx;
|
||||
margin-bottom: 80upx;
|
||||
}
|
||||
.abposin{
|
||||
position:absolute;
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
margin-left: 15upx;
|
||||
font-size: 48upx;
|
||||
margin-top: 8upx;
|
||||
}
|
||||
image{
|
||||
width: 48upx;
|
||||
height: 48upx;
|
||||
margin: 20upx 20upx;
|
||||
float: left;
|
||||
}
|
||||
.txt{
|
||||
width: 510upx;
|
||||
height: 100upx;
|
||||
line-height: 100upx;
|
||||
float: left;
|
||||
}
|
||||
.radio{
|
||||
float: right;
|
||||
padding-right:50upx;
|
||||
}
|
||||
.confirm-btn{
|
||||
width :95%;
|
||||
height :55px;
|
||||
color: #fff;
|
||||
margin-left: 2.5%;
|
||||
background-color: #F8A0A0;
|
||||
border-radius :4px;
|
||||
}
|
||||
|
||||
/* 弹出框样式 */
|
||||
.BopBox{
|
||||
width:100%;
|
||||
height: 400upx;
|
||||
position: absolute;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.BopBox-title {
|
||||
width: 100%;
|
||||
height: 60upx;
|
||||
font-size: 32upx;
|
||||
text-align: center;
|
||||
}
|
||||
.informationBox{
|
||||
width:100%;
|
||||
padding: 5upx;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
border-bottom: #eee 1px solid;
|
||||
font-size:28upx;
|
||||
}
|
||||
.infor-title{
|
||||
float: left;
|
||||
width: 25%;
|
||||
height: 80upx;
|
||||
text-align: right;
|
||||
}
|
||||
.infor-input{
|
||||
padding-left: 10upx;
|
||||
width: 70%;
|
||||
height: 50upx;
|
||||
float: left;
|
||||
}
|
||||
.infor-input input{
|
||||
width: 100%;
|
||||
float: left;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
}
|
||||
.affirmBut{
|
||||
width: 95%;
|
||||
height: 60upx;
|
||||
margin-top: 80upx;
|
||||
margin-left: 2.5%;
|
||||
}
|
||||
.detailedRight{
|
||||
width :44px;
|
||||
position:relative;
|
||||
right :10px;
|
||||
top: 5px;
|
||||
float: right;
|
||||
text-align :right;
|
||||
}
|
||||
|
||||
.detailedRightImg{
|
||||
width: 20px;
|
||||
height :20px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
190
mallplusui-uniapp-app/pagesU/user/profile.vue
Normal file
190
mallplusui-uniapp-app/pagesU/user/profile.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="list-cell b-b m-t" @click="upImg" :hover-stay-time="50" style="display: flex;align-items: center;">
|
||||
<text class="cell-tit">我的头像</text>
|
||||
<view class="" style="display: flex;align-items: center;justify-content: center;height: 80upx;line-height: 80upx;">
|
||||
<image v-if="userInfos && userInfos.icon" :src="userInfos.icon" style="border-radius: 50%;width: 100upx;height: 100upx;"></image>
|
||||
<text class="cell-more yticon icon-you"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-cell b-b m-t" @click="inputShowModal('nickname')" hover-class="cell-hover" :hover-stay-time="50">
|
||||
<text class="cell-tit" v-if="userInfos && userInfos.nickname">修改昵称:{{userInfos.nickname|| ''}}</text>
|
||||
<text class="cell-more yticon icon-you"></text>
|
||||
</view>
|
||||
<view class="list-cell b-b" @click="genderShowModal" hover-class="cell-hover" :hover-stay-time="50">
|
||||
<text class="cell-tit">修改性别</text>
|
||||
<text class="cell-more yticon icon-you"></text>
|
||||
</view>
|
||||
|
||||
<neil-modal :show="inputShow" @close="cancel" title="编辑" @cancel="cancel" @confirm="confirm">
|
||||
<input v-model="inputContent" style="margin:20upx" placeholder="请输入..." />
|
||||
</neil-modal>
|
||||
<neil-modal :show="genderShow" @close="cancel" title="选择性别" @cancel="cancel" @confirm="confirmGender">
|
||||
<view>
|
||||
<radio-group style="text-align:center" @change="genderRadioChange">
|
||||
<label v-for="(item, index) in genders" :key="item.value">
|
||||
<radio :value="item.value" :checked="index === current" style="margin:10upx" />
|
||||
{{ item.name }}
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</neil-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import neilModal from '@/components/neil-modal.vue';
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
export default {
|
||||
components: {
|
||||
neilModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputShow: false,
|
||||
feild: undefined,
|
||||
inputContent: '',
|
||||
genderShow: false,
|
||||
gender: undefined,
|
||||
genders: [{ name: '保密', value: 0 }, { name: '男', value: 1 }, { name: '女', value: 2 }],
|
||||
|
||||
userInfos: {},
|
||||
sourceTypeIndex: 0,
|
||||
sourceType: ['拍照', '相册', '拍照或相册'],
|
||||
sizeTypeIndex: 0,
|
||||
sizeType: ['压缩', '原图', '压缩或原图'],
|
||||
};
|
||||
},
|
||||
async onShow() {
|
||||
let params = { };
|
||||
let data = await Api.apiCall('get', Api.index.userSampleInfo, params);
|
||||
this.userInfos=data;
|
||||
console.log(this.userInfos);
|
||||
},
|
||||
async onLoad() {
|
||||
let params = { };
|
||||
let data = await Api.apiCall('get', Api.index.userSampleInfo, params);
|
||||
this.userInfos=data;
|
||||
console.log(this.userInfos);
|
||||
},
|
||||
methods: {
|
||||
upImg(){
|
||||
this.$otherApi.uploadFiles(res => {
|
||||
if (res.code == 200) {
|
||||
this.userInfos.icon = res.data;
|
||||
let obj = {
|
||||
id:1,
|
||||
icon: res.data
|
||||
};
|
||||
Api.apiCall('post', Api.member.updateMember, obj);
|
||||
that.$api.msg('修改成功');
|
||||
} else {
|
||||
this.$common.errorToShow(res.msg)
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
cancel() {
|
||||
this.inputShow = false;
|
||||
this.genderShow = false;
|
||||
},
|
||||
inputShowModal(feild) {
|
||||
this.feild = feild;
|
||||
this.inputShow = true;
|
||||
this.inputContent = '';
|
||||
},
|
||||
genderShowModal() {
|
||||
this.genderShow = true;
|
||||
this.gender = undefined;
|
||||
},
|
||||
confirm() {
|
||||
const that = this;
|
||||
if (!that.inputContent) {
|
||||
that.$api.msg('输入不能为空');
|
||||
return;
|
||||
}
|
||||
let obj = { id:1};
|
||||
obj[that.feild] = that.inputContent;
|
||||
Api.apiCall('post', Api.member.updateMember, obj);
|
||||
that.$api.msg('修改成功');
|
||||
that.userInfos[that.feild] = that.inputContent
|
||||
|
||||
},
|
||||
genderRadioChange(e) {
|
||||
this.gender = parseInt(e.detail.value);
|
||||
},
|
||||
confirmGender() {
|
||||
const that = this;
|
||||
if (that.gender === undefined) {
|
||||
that.$api.msg('请选择性别');
|
||||
return;
|
||||
}
|
||||
let obj = {
|
||||
id:1,
|
||||
gender: that.gender
|
||||
};
|
||||
Api.apiCall('post', Api.member.updateMember, obj);
|
||||
that.$api.msg('修改成功');
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: $page-color-base;
|
||||
}
|
||||
|
||||
page {
|
||||
background: $page-color-base;
|
||||
}
|
||||
.list-cell {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
padding: 20upx;
|
||||
line-height: 60upx;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
justify-content: center;
|
||||
&.log-out-btn {
|
||||
margin-top: 40upx;
|
||||
.cell-tit {
|
||||
color: $uni-color-primary;
|
||||
text-align: center;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&.cell-hover {
|
||||
background: #fafafa;
|
||||
}
|
||||
&.b-b:after {
|
||||
left: 30upx;
|
||||
}
|
||||
&.m-t {
|
||||
margin-top: 16upx;
|
||||
}
|
||||
.cell-more {
|
||||
align-self: baseline;
|
||||
font-size: $font-lg;
|
||||
color: $font-color-light;
|
||||
margin-left: 10upx;
|
||||
}
|
||||
.cell-tit {
|
||||
flex: 1;
|
||||
font-size: $font-base + 2upx;
|
||||
color: $font-color-dark;
|
||||
margin-right: 10upx;
|
||||
}
|
||||
.cell-tip {
|
||||
font-size: $font-base;
|
||||
color: $font-color-light;
|
||||
}
|
||||
switch {
|
||||
transform: translateX(16upx) scale(0.84);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
127
mallplusui-uniapp-app/pagesU/user/reset_password.vue
Normal file
127
mallplusui-uniapp-app/pagesU/user/reset_password.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- <form @submit="formSubmit"> -->
|
||||
<view class="section">
|
||||
<input name="account" v-model="password" password="true" maxlength="32" placeholder="请新输入密码" placeholder-style="font-size:15px" class="password"/>
|
||||
<view class="eyesBox">
|
||||
<image src="http://rs.eonfox.cc/clzy/static/eyes.png" class="eyes"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="section">
|
||||
<input name="password" password="true" v-model="confirm_password" maxlength="32" placeholder="请确认密码" placeholder-style="font-size:26upx" class="password"/>
|
||||
<view class="eyesBox" >
|
||||
<image src="http://rs.eonfox.cc/clzy/static/eyes.png" mode="" class="eyes"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="remind">
|
||||
<text class="remindText">密码长度8~24位,必须包含数字/字母/符号至少2种以上元素</text>
|
||||
</view>
|
||||
<view class="btn-area" >
|
||||
<button formType="submit" @click="formSubmit()" class="buttons" >确认提交</button>
|
||||
</view>
|
||||
<!-- </form> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import eonfox from '@/components/eonfox/eonfox.js';
|
||||
import fns from '@/components/eonfox/fns.js';
|
||||
var ef = new eonfox();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phone:'',
|
||||
code:'',
|
||||
password:'',
|
||||
confirm_password:'',
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.phone=e.phone;
|
||||
this.code=e.code;
|
||||
console.log("电话号码",this.phone);
|
||||
console.log("验证码",this.code);
|
||||
},
|
||||
methods: {
|
||||
formSubmit:function(){
|
||||
var _this = this;
|
||||
ef.submit({
|
||||
request: {
|
||||
s: ['USERRESETPASSWORD',[{phone:_this.phone,password:_this.password,confirm_password:_this.confirm_password,phone_verify_key:"reset_password",phone_verify_code:_this.code,log_out:true}]
|
||||
]
|
||||
},
|
||||
callback: function(data) {
|
||||
if (fns.checkError(data,'s',function(errno,error){
|
||||
_this.getverifSwitch=false;
|
||||
uni.showToast({
|
||||
title:error,
|
||||
icon:'none'
|
||||
})
|
||||
})) {
|
||||
uni.showToast({
|
||||
title:'密码修改成功',
|
||||
icon:'success',
|
||||
success() {
|
||||
setTimeout(function(){
|
||||
uni.reLaunch({
|
||||
url:
|
||||
'../../pagesA/login/login'
|
||||
})
|
||||
},1000)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
console.log(data)
|
||||
},
|
||||
error: function(err) {
|
||||
console.log('出错啦', err);
|
||||
uni.showToast({
|
||||
title:JSON.stringify(err),
|
||||
icon:'none'
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="stylus" ref="stylesheet/stylus">
|
||||
.section
|
||||
width 90%
|
||||
// height 80upx
|
||||
margin 20upx auto
|
||||
padding 18upx 0
|
||||
background #F2F2F2
|
||||
border-radius 10upx
|
||||
position relative
|
||||
top 5px
|
||||
.eyesBox
|
||||
position absolute
|
||||
right 10upx
|
||||
top 5upx
|
||||
height 100%
|
||||
width 60upx
|
||||
.eyes
|
||||
width 40upx
|
||||
height 40upx
|
||||
position absolute
|
||||
right 10upx
|
||||
top 25upx
|
||||
.remind
|
||||
width 90%
|
||||
height 80upx
|
||||
margin 20upx auto
|
||||
font-size 26upx
|
||||
color #A9A9A9
|
||||
.remindText
|
||||
height 80upx
|
||||
line-height 80upx
|
||||
.btn-area
|
||||
width 90%
|
||||
margin 10upx auto
|
||||
.buttons
|
||||
color #fff
|
||||
background #F76968
|
||||
</style>
|
||||
Reference in New Issue
Block a user