LI-CCONG\李聪聪
1 year ago
parent
63b1b48d73
commit
c85b50b5ef
@ -0,0 +1,9 @@
|
||||
/unpackage/dist/*
|
||||
/unpackage/cache/*
|
||||
/unpackage/release/*
|
||||
/node_modules/*
|
||||
/.idea/*
|
||||
/.hbuilderx/
|
||||
/.vscode/
|
||||
/.hbuilderx
|
||||
yarn.lock
|
||||
@ -0,0 +1,34 @@
|
||||
<script>
|
||||
export default {
|
||||
onLaunch: function () {
|
||||
console.log('App Launch')
|
||||
// #ifdef H5
|
||||
//在页面加载时读取sessionStorage里的状态信息
|
||||
if (sessionStorage.getItem('store')) {
|
||||
this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
|
||||
}
|
||||
//在页面刷新时将vuex里的信息保存到sessionStorage里
|
||||
window.addEventListener('beforeunload', () => {
|
||||
sessionStorage.setItem('store', JSON.stringify(this.$store.state))
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
onShow: function () {
|
||||
console.log('App Show')
|
||||
},
|
||||
onHide: function () {
|
||||
console.log('App Hide')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/** 引入全局基本样式 */
|
||||
@import 'styles/base.scss';
|
||||
|
||||
/* 引入 uView 基础样式 */
|
||||
@import '@/uni_modules/uview-ui/index.scss';
|
||||
|
||||
/*每个页面公共scss */
|
||||
@import 'app.scss';
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
//请求工具参考https://ext.dcloud.net.cn/plugin?id=392
|
||||
const { http } = uni.$u
|
||||
|
||||
//获得用户收件地址列表
|
||||
export const getAddressList = params => http.get('/member/address/list', params)
|
||||
//创建用户收件地址
|
||||
export const createAddress = data => http.post('/member/address/create', data)
|
||||
//通过ID获得用户收件地址
|
||||
export const getAddressById = params => http.get('/member/address/get', { params })
|
||||
//获得默认的用户收件地址
|
||||
export const getDefaultUserAddress = params => http.get('/member/address/get-default', { params })
|
||||
//更新用户收件地址
|
||||
export const updateAddress = params => http.put('/member/address/update', params)
|
||||
//删除用户收件地址
|
||||
export const deleteAddress = params => http.delete('/member/address/delete', {}, { params })
|
||||
@ -0,0 +1,15 @@
|
||||
//请求工具参考https://ext.dcloud.net.cn/plugin?id=392
|
||||
const { http } = uni.$u
|
||||
|
||||
//使用手机 + 密码登录
|
||||
export const passwordLogin = data => http.post('/member/auth/login', data)
|
||||
//发送手机验证码
|
||||
export const sendSmsCode = data => http.post('/member/auth/send-sms-code', data)
|
||||
//使用手机 + 验证码登录
|
||||
export const smsLogin = data => http.post('/member/auth/sms-login', data)
|
||||
//微信小程序的一键登录
|
||||
export const weixinMiniAppLogin = data => http.post('/member/auth/weixin-mini-app-login', data)
|
||||
//刷新令牌
|
||||
export const refreshToken = data => http.post('/member/auth/refresh-token', {data})
|
||||
//退出登录
|
||||
export const logout = data => http.post('/member/auth/logout', data)
|
||||
@ -0,0 +1,5 @@
|
||||
const { http } = uni.$u
|
||||
|
||||
//获取购物车数据
|
||||
export const getCartProductDetail = () => http.get('/trade/cart/get-detail')
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
//请求工具参考https://ext.dcloud.net.cn/plugin?id=392
|
||||
const { http } = uni.$u
|
||||
|
||||
// 查询分类列表
|
||||
export const categoryListData = params => http.get('product/category/list', { params })
|
||||
@ -0,0 +1,7 @@
|
||||
//请求工具参考https://ext.dcloud.net.cn/plugin?id=392
|
||||
const { http } = uni.$u
|
||||
|
||||
// 获取滚动图数据
|
||||
export const getBannerData = params => http.get('/index', { params })
|
||||
// 获取滚动通知数据
|
||||
export const getNoticeData = params => http.get('/notice', { params })
|
||||
@ -0,0 +1,6 @@
|
||||
const { http } = uni.$u
|
||||
|
||||
// 获得订单交易分页
|
||||
export const getOrderPage = params => http.get('/trade/order/page', { params })
|
||||
// 获得交易订单详情
|
||||
export const getOrderDetail = params => http.get('/trade/order/get-detail', { params })
|
||||
@ -0,0 +1,8 @@
|
||||
//请求工具参考https://ext.dcloud.net.cn/plugin?id=392
|
||||
const { http } = uni.$u
|
||||
|
||||
// 查询商品spu列表
|
||||
export const productSpuPage = params => http.get('product/spu/page', { params })
|
||||
|
||||
// 查询商品
|
||||
export const getSpuDetail = id => http.get('product/spu/get-detail?id=' + id, { })
|
||||
@ -0,0 +1,14 @@
|
||||
//请求工具参考https://ext.dcloud.net.cn/plugin?id=392
|
||||
const { http } = uni.$u
|
||||
|
||||
//获取用户信息
|
||||
export const getUserInfo = params => http.get('/member/user/get', params)
|
||||
//修改用户头像
|
||||
export const updateAvatar = filePath =>
|
||||
http.upload('/member/user/update-avatar', {
|
||||
name: 'avatarFile',
|
||||
fileType: 'image',
|
||||
filePath: filePath
|
||||
})
|
||||
//修改用户昵称
|
||||
export const updateNickname = params => http.put('/member/user/update-nickname', {}, { params })
|
||||
@ -0,0 +1,8 @@
|
||||
/* 页面公共scss */
|
||||
.container {
|
||||
background-color: $custom-bg-color;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
module.exports = {
|
||||
//后端接口地址
|
||||
// baseUrl: 'http://127.0.0.1:48080/app-api',
|
||||
baseUrl: 'http://127.0.0.1:8091/app-api',
|
||||
// baseUrl: 'http://api-dashboard.yunxi.iocoder.cn/app-api',
|
||||
// 超时
|
||||
timeout: 30000,
|
||||
// 禁用 Cookie 等信息
|
||||
withCredentials: false,
|
||||
header: {
|
||||
//租户ID
|
||||
'tenant-id': 1
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
export default {
|
||||
'0': { name: '待付款', icon: 'red-packet'},
|
||||
'10': { name: '待发货', icon: 'car'},
|
||||
'20': { name: '待收货', icon: 'order'},
|
||||
'30': { name: '已完成', icon: 'integral'},
|
||||
'40': { name: '已取消', icon: 'close-circle'}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
/* uView组件全局属性 */
|
||||
uni.$u.props.gap.bgColor = '#ffffff'
|
||||
uni.$u.props.gap.height = '10'
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<view class="w-picker-view">
|
||||
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item,index) in range.provinces" :key="index">{{item.label}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item,index) in range.citys" :key="index">{{item.label}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!hideArea">
|
||||
<view class="w-picker-item" v-for="(item,index) in range.areas" :key="index">{{item.label}}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import areaData from "./areadata/areadata.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickVal:[],
|
||||
range:{
|
||||
provinces:[],
|
||||
citys:[],
|
||||
areas:[]
|
||||
},
|
||||
checkObj:{}
|
||||
};
|
||||
},
|
||||
props:{
|
||||
itemHeight:{
|
||||
type:String,
|
||||
default:"44px"
|
||||
},
|
||||
value:{
|
||||
type:[Array,String],
|
||||
default:""
|
||||
},
|
||||
defaultType:{
|
||||
type:String,
|
||||
default:"label"
|
||||
},
|
||||
hideArea:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
value(val){
|
||||
this.initData();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods:{
|
||||
getData(){
|
||||
//用来处理初始化数据
|
||||
let provinces=areaData;
|
||||
let dVal=[];
|
||||
let value=this.value;
|
||||
let a1=value[0];//默认值省
|
||||
let a2=value[1];//默认值市
|
||||
let a3=value[2];//默认值区、县
|
||||
let province,city,area;
|
||||
let provinceIndex=provinces.findIndex((v)=>{
|
||||
return v[this.defaultType]==a1
|
||||
});
|
||||
provinceIndex=value?(provinceIndex!=-1?provinceIndex:0):0;
|
||||
let citys=provinces[provinceIndex].children;
|
||||
let cityIndex=citys.findIndex((v)=>{
|
||||
return v[this.defaultType]==a2
|
||||
});
|
||||
cityIndex=value?(cityIndex!=-1?cityIndex:0):0;
|
||||
let areas=citys[cityIndex].children;
|
||||
let areaIndex=areas.findIndex((v)=>{
|
||||
return v[this.defaultType]==a3;
|
||||
});
|
||||
areaIndex=value?(areaIndex!=-1?areaIndex:0):0;
|
||||
dVal=this.hideArea?[provinceIndex,cityIndex]:[provinceIndex,cityIndex,areaIndex];
|
||||
province=provinces[provinceIndex];
|
||||
city=citys[cityIndex];
|
||||
area=areas[areaIndex];
|
||||
let obj=this.hideArea?{
|
||||
province,
|
||||
city
|
||||
}:{
|
||||
province,
|
||||
city,
|
||||
area
|
||||
}
|
||||
return this.hideArea?{
|
||||
provinces,
|
||||
citys,
|
||||
dVal,
|
||||
obj
|
||||
}:{
|
||||
provinces,
|
||||
citys,
|
||||
areas,
|
||||
dVal,
|
||||
obj
|
||||
}
|
||||
},
|
||||
initData(){
|
||||
let dataData=this.getData();
|
||||
let provinces=dataData.provinces;
|
||||
let citys=dataData.citys;
|
||||
let areas=this.hideArea?[]:dataData.areas;
|
||||
let obj=dataData.obj;
|
||||
let province=obj.province,city=obj.city,area=this.hideArea?{}:obj.area;
|
||||
let value=this.hideArea?[province.value,city.value]:[province.value,city.value,area.value];
|
||||
let result=this.hideArea?`${province.label+city.label}`:`${province.label+city.label+area.label}`;
|
||||
this.range=this.hideArea?{
|
||||
provinces,
|
||||
citys,
|
||||
}:{
|
||||
provinces,
|
||||
citys,
|
||||
areas
|
||||
};
|
||||
this.checkObj=obj;
|
||||
this.$nextTick(()=>{
|
||||
this.pickVal=dataData.dVal;
|
||||
});
|
||||
this.$emit("change",{
|
||||
result:result,
|
||||
value:value,
|
||||
obj:obj
|
||||
})
|
||||
},
|
||||
handlerChange(e){
|
||||
let arr=[...e.detail.value];
|
||||
let provinceIndex=arr[0],cityIndex=arr[1],areaIndex=this.hideArea?0:arr[2];
|
||||
let provinces=areaData;
|
||||
let citys=(provinces[provinceIndex]&&provinces[provinceIndex].children)||provinces[provinces.length-1].children||[];
|
||||
let areas=this.hideArea?[]:((citys[cityIndex]&&citys[cityIndex].children)||citys[citys.length-1].children||[]);
|
||||
let province=provinces[provinceIndex]||provinces[provinces.length-1],
|
||||
city=citys[cityIndex]||[citys.length-1],
|
||||
area=this.hideArea?{}:(areas[areaIndex]||[areas.length-1]);
|
||||
let obj=this.hideArea?{
|
||||
province,
|
||||
city
|
||||
}:{
|
||||
province,
|
||||
city,
|
||||
area
|
||||
}
|
||||
if(this.checkObj.province.label!=province.label){
|
||||
//当省更新的时候需要刷新市、区县的数据;
|
||||
this.range.citys=citys;
|
||||
if(!this.hideArea){
|
||||
this.range.areas=areas;
|
||||
}
|
||||
|
||||
}
|
||||
if(this.checkObj.city.label!=city.label){
|
||||
//当市更新的时候需要刷新区县的数据;
|
||||
if(!this.hideArea){
|
||||
this.range.areas=areas;
|
||||
}
|
||||
}
|
||||
this.checkObj=obj;
|
||||
this.$nextTick(()=>{
|
||||
this.pickVal=arr;
|
||||
})
|
||||
let result=this.hideArea?`${province.label+city.label}`:`${province.label+city.label+area.label}`;
|
||||
let value=this.hideArea?[province.value,city.value]:[province.value,city.value,area.value];
|
||||
this.$emit("change",{
|
||||
result:result,
|
||||
value:value,
|
||||
obj:obj
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./w-picker.css";
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<view class="w-picker-view">
|
||||
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item,index) in range" :key="index">{{item[nodeKey]}}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
itemHeight:{
|
||||
type:String,
|
||||
default:"44px"
|
||||
},
|
||||
options:{
|
||||
type:[Array,Object],
|
||||
default(){
|
||||
return []
|
||||
}
|
||||
},
|
||||
value:{
|
||||
type:String,
|
||||
default:""
|
||||
},
|
||||
defaultType:{
|
||||
type:String,
|
||||
default:"label"
|
||||
},
|
||||
defaultProps:{
|
||||
type:Object,
|
||||
default(){
|
||||
return{
|
||||
label:"label",
|
||||
value:"value"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pickVal:[]
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
nodeKey(){
|
||||
return this.defaultProps.label;
|
||||
},
|
||||
nodeValue(){
|
||||
return this.defaultProps.value;
|
||||
},
|
||||
range(){
|
||||
return this.options
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
value(val){
|
||||
if(this.options.length!=0){
|
||||
this.initData();
|
||||
}
|
||||
},
|
||||
options(val){
|
||||
this.initData();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if(this.options.length!=0){
|
||||
this.initData();
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
initData(){
|
||||
let dVal=this.value||"";
|
||||
let data=this.range;
|
||||
let pickVal=[0];
|
||||
let cur=null;
|
||||
let label="";
|
||||
let value,idx;
|
||||
if(this.defaultType==this.nodeValue){
|
||||
value=data.find((v)=>v[this.nodeValue]==dVal);
|
||||
idx=data.findIndex((v)=>v[this.nodeValue]==dVal);
|
||||
}else{
|
||||
value=data.find((v)=>v[this.nodeKey]==dVal);
|
||||
idx=data.findIndex((v)=>v[this.nodeKey]==dVal);
|
||||
}
|
||||
pickVal=[idx!=-1?idx:0];
|
||||
this.$nextTick(()=>{
|
||||
this.pickVal=pickVal;
|
||||
});
|
||||
if(this.defaultType==this.nodeValue){
|
||||
this.$emit("change",{
|
||||
result:value?value[this.nodeKey]:data[0][this.nodeKey],
|
||||
value:dVal||data[0][this.nodeKey],
|
||||
obj:value?value:data[0]
|
||||
})
|
||||
}else{
|
||||
this.$emit("change",{
|
||||
result:dVal||data[0][this.nodeKey],
|
||||
value:value?value[this.nodeValue]:data[0][this.nodeValue],
|
||||
obj:value?value:data[0]
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
handlerChange(e){
|
||||
let arr=[...e.detail.value];
|
||||
let pickVal=[arr[0]||0];
|
||||
let data=this.range;
|
||||
let cur=data[arr[0]];
|
||||
let label="";
|
||||
let value="";
|
||||
this.$nextTick(()=>{
|
||||
this.pickVal=pickVal;
|
||||
});
|
||||
this.$emit("change",{
|
||||
result:cur[this.nodeKey],
|
||||
value:cur[this.nodeValue],
|
||||
obj:cur
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./w-picker.css";
|
||||
</style>
|
||||
@ -0,0 +1,26 @@
|
||||
.w-picker-flex2{
|
||||
flex:2;
|
||||
}
|
||||
.w-picker-flex1{
|
||||
flex:1;
|
||||
}
|
||||
.w-picker-view {
|
||||
width: 100%;
|
||||
height: 476upx;
|
||||
overflow: hidden;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
z-index: 666;
|
||||
}
|
||||
.d-picker-view{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.w-picker-item {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 88upx;
|
||||
line-height: 88upx;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 30upx;
|
||||
}
|
||||
@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<view class="address-box">
|
||||
<view v-if="!address.area" class="address-empty">
|
||||
<view class="address-tips">
|
||||
<u--text :lines="1" size="14px" color="#333" bold="true" text="请选择收货地址"></u--text>
|
||||
<u-icon class="icon-arrow-right" name="arrow-right"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="address-selected">
|
||||
<view class="address-area">
|
||||
<view class="default-tag">默认</view>
|
||||
<u--text :lines="1" size="12px" color="#666" :text="address.area"></u--text>
|
||||
</view>
|
||||
<view class="address-detail">
|
||||
<u--text :lines="2" size="14px" color="#333" :bold="true" :text="address.detail"></u--text>
|
||||
<u-icon class="icon-arrow-right" name="arrow-right"></u-icon>
|
||||
</view>
|
||||
<view class="address-user">
|
||||
<view class="user-text">{{ address.name }}</view>
|
||||
<view class="user-text">{{ address.mobile }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<image class="address-line" src="/static/images/address-line.png"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 地址选择
|
||||
*/
|
||||
export default {
|
||||
name: 'yd-address-select',
|
||||
props: {
|
||||
address: {
|
||||
type: Object,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.address-box {
|
||||
padding: 0 10rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 0 0 30rpx 30rpx;
|
||||
|
||||
.address-empty {
|
||||
padding: 20rpx 20rpx 0;
|
||||
.address-tips {
|
||||
@include flex-space-between;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.icon-arrow-right {
|
||||
margin-left: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address-selected {
|
||||
padding: 20rpx 20rpx 0;
|
||||
.address-area {
|
||||
@include flex-left;
|
||||
|
||||
.default-tag {
|
||||
font-size: 22rpx;
|
||||
color: $u-primary;
|
||||
border: 1rpx solid $u-primary;
|
||||
padding: 0 6rpx;
|
||||
margin-right: 10rpx;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.address-detail {
|
||||
@include flex-space-between;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.icon-arrow-right {
|
||||
margin-left: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.address-user {
|
||||
@include flex-left;
|
||||
|
||||
.user-text {
|
||||
color: #666;
|
||||
font-size: 24rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address-line {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: 5rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<u-swiper :list="bannerList" :keyName="keyName" previousMargin="20" nextMargin="20" circular height="150" @change="e => (current = e.current)" :autoplay="true" @click="handleSwiperClick">
|
||||
<view slot="indicator" class="indicator">
|
||||
<view class="indicator__dot" v-for="(item, index) in bannerList" :key="index" :class="[index === current && 'indicator__dot--active']"></view>
|
||||
</view>
|
||||
</u-swiper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 广告滚动图
|
||||
*/
|
||||
export default {
|
||||
name: 'yd-banner',
|
||||
components: {},
|
||||
props: {
|
||||
keyName: {
|
||||
type: String,
|
||||
default: 'url'
|
||||
},
|
||||
bannerList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
currentNum: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSwiperClick(index) {
|
||||
console.log('点击了图片索引值：', index)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.indicator {
|
||||
@include flex(row);
|
||||
justify-content: center;
|
||||
|
||||
&__dot {
|
||||
height: 15rpx;
|
||||
width: 15rpx;
|
||||
border-radius: 100rpx;
|
||||
background-color: rgba(255, 255, 255, 0.35);
|
||||
margin: 0 10rpx;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&--active {
|
||||
background-color: $custom-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="product-item" v-for="(item, index) in productList" :key="item.productId" @click="handleProductItemClick(item.productId)">
|
||||
<view class="product-check" @click.stop="handleCheckProduct(item.productId, item.checked)">
|
||||
<u-icon v-if="item.checked" name="checkmark-circle-fill" color="#3c9cff" size="22"></u-icon>
|
||||
<view v-else class="un-check-box"></view>
|
||||
</view>
|
||||
<image class="product-image" :src="item.coverUrl"></image>
|
||||
<view class="item-info">
|
||||
<view class="info-text">
|
||||
<u--text :lines="1" size="15px" color="#333333" :text="item.productTitle"></u--text>
|
||||
<u-gap height="2px"></u-gap>
|
||||
<u--text class="info-tips" :lines="1" size="12px" color="#939393" :text="item.tips"></u--text>
|
||||
</view>
|
||||
<view class="price-number-box">
|
||||
<view class="price-box">
|
||||
<yd-text-price color="red" size="13" intSize="20" :price="item.sellPrice"></yd-text-price>
|
||||
<yd-text-price v-if="item.strikePrice" style="margin-left: 5px" decoration="line-through" color="#999" size="12" :price="item.sellPrice"></yd-text-price>
|
||||
</view>
|
||||
<view class="number-box" @click.stop>
|
||||
<u-number-box min="1" max="999" bgColor="#fff" integer :disableMinus="false" :disabledInput="true" :name="item.productId" :value="item.productCount" @change="handleProductCountChange"></u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 购物车商品列表
|
||||
*/
|
||||
export default {
|
||||
name: 'yd-cart-product',
|
||||
props: {
|
||||
productList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//status: 'nomore',
|
||||
loadingText: '加载中...',
|
||||
loadmoreText: '上拉加载更多',
|
||||
nomoreText: '没有更多了'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleProductItemClick(productId) {
|
||||
uni.$u.route('/pages/product/product', {
|
||||
id: productId
|
||||
})
|
||||
},
|
||||
handleItemCartClick(productId) {
|
||||
this.$store.dispatch('CartProductCountChange', { productIds: [productId], productCount: 1, addition: true }).then(res => {
|
||||
uni.$u.toast('已添加到购物车')
|
||||
})
|
||||
},
|
||||
handleCheckProduct(productId, checked) {
|
||||
this.$emit('productCheckedChange', productId, !checked)
|
||||
},
|
||||
handleProductCountChange({ name, value }) {
|
||||
this.$emit('productCartProductCountChange', name, value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.product-item {
|
||||
background: #ffffff;
|
||||
@include flex-space-between;
|
||||
border-bottom: $custom-border-style;
|
||||
padding: 10rpx 0 0 5rpx;
|
||||
|
||||
.product-check {
|
||||
padding: 20rpx;
|
||||
|
||||
.un-check-box {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid #939393;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
padding: 20rpx 20rpx 0;
|
||||
|
||||
.info-text {
|
||||
height: 70rpx;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.price-number-box {
|
||||
@include flex-space-between;
|
||||
|
||||
.price-box {
|
||||
@include flex-left();
|
||||
}
|
||||
|
||||
.number-box {
|
||||
height: 100rpx;
|
||||
@include flex-center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-if="showType === 'normal'">
|
||||
<u-gap height="180" bgColor="#398ade"></u-gap>
|
||||
<view class="prod-block">
|
||||
<view class="bloc-header">
|
||||
<text class="bloc-title">{{title}}</text>
|
||||
<text class="see-more">查看更多</text>
|
||||
</view>
|
||||
<view class="prod-grid">
|
||||
<view class="prod-item" v-for="(item, index) in productList" :key="item.id" @click="handleProdItemClick(item.id)">
|
||||
<image class="prod-image" :src="item.image"></image>
|
||||
<view class="item-info">
|
||||
<view class="info-text">
|
||||
<u--text :lines="2" size="14px" color="#333333" :text="item.title"></u--text>
|
||||
</view>
|
||||
<view class="price-and-cart">
|
||||
<yd-text-price color="red" size="12" intSize="18" :price="item.price"></yd-text-price>
|
||||
<u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="showType === 'half'">
|
||||
<view class="prod-block half">
|
||||
<view class="bloc-header">
|
||||
<text class="bloc-title">{{title}}</text>
|
||||
<text class="more">更多 ></text>
|
||||
</view>
|
||||
<view class="prod-grid half">
|
||||
<view class="prod-item" v-for="(item, index) in productList" :key="item.id" @click="handleProdItemClick(item.id)">
|
||||
<image class="prod-image" :src="item.image"></image>
|
||||
<view class="item-info">
|
||||
<view class="info-text">
|
||||
<u--text :lines="1" size="14px" color="#333333" :text="item.title"></u--text>
|
||||
<u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text>
|
||||
</view>
|
||||
<view class="price-and-cart">
|
||||
<yd-text-price color="red" size="12" intSize="18" :price="item.price"></yd-text-price>
|
||||
<u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 商品列表
|
||||
*/
|
||||
export default {
|
||||
name: 'yd-product-box',
|
||||
components: {},
|
||||
props: {
|
||||
showType: {
|
||||
type: String,
|
||||
default: 'normal'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '商品推荐'
|
||||
},
|
||||
productList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
handleProdItemClick(productId) {
|
||||
uni.$u.route('/pages/product/product', {
|
||||
id: productId
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.prod-block {
|
||||
margin-top: -160px;
|
||||
|
||||
.bloc-header {
|
||||
@include flex-space-between;
|
||||
padding: 10rpx 20rpx;
|
||||
|
||||
.bloc-title {
|
||||
color: $custom-bg-color;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.see-more {
|
||||
color: $custom-bg-color;
|
||||
background: $u-primary;
|
||||
padding: 0 30rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
border-radius: 50rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.half {
|
||||
margin-top: 0;
|
||||
|
||||
.bloc-header {
|
||||
margin-top: 50rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.bloc-title {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.more {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prod-grid {
|
||||
width: 730rpx;
|
||||
margin: 0 auto;
|
||||
@include flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: left;
|
||||
|
||||
&.half {
|
||||
.prod-item {
|
||||
width: 345rpx;
|
||||
margin: 10rpx;
|
||||
|
||||
.prod-image {
|
||||
width: 345rpx;
|
||||
height: 345rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prod-item {
|
||||
width: 223rpx;
|
||||
margin: 10rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0rpx 6rpx 8rpx rgba(58, 134, 185, 0.2);
|
||||
|
||||
.prod-image {
|
||||
width: 223rpx;
|
||||
height: 223rpx;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
padding: 15rpx;
|
||||
|
||||
.info-text {
|
||||
height: 70rpx;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.price-and-cart {
|
||||
@include flex-space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="prod-block list">
|
||||
<view class="bloc-header">
|
||||
<text class="bloc-title">更多宝贝</text>
|
||||
<text></text>
|
||||
</view>
|
||||
|
||||
<view class="prod-list" v-for="(item, index) in productList" :key="item.id">
|
||||
<view class="prod-item" @click="handleProdItemClick(item.id)">
|
||||
<image class="prod-image" :src="item.image"></image>
|
||||
<view class="item-info">
|
||||
<view class="info-text">
|
||||
<u--text :lines="1" size="14px" color="#333333" :text="item.title"></u--text>
|
||||
<u-gap height="2px"></u-gap>
|
||||
<u--text class="info-desc" :lines="2" size="12px" color="#939393" :text="item.desc"></u--text>
|
||||
</view>
|
||||
<view class="price-and-cart">
|
||||
<yd-text-price color="red" size="12" intSize="18" :price="item.price"></yd-text-price>
|
||||
<u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!--加载更多-->
|
||||
<u-loadmore fontSize="28rpx" :line="true" :status="moreStatus" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 商品列表(加载更多)
|
||||
*/
|
||||
export default {
|
||||
name: 'yd-product-more',
|
||||
components: {},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '商品推荐'
|
||||
},
|
||||
productList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
moreStatus: {
|
||||
type: String,
|
||||
default: 'nomore'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//status: 'nomore',
|
||||
loadingText: '加载中...',
|
||||
loadmoreText: '上拉加载更多',
|
||||
nomoreText: '已经到底了'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleProdItemClick(productId) {
|
||||
uni.$u.route('/pages/product/product', {
|
||||
id: productId
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.prod-block {
|
||||
margin-top: 0;
|
||||
|
||||
.bloc-header {
|
||||
margin-top: 50rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.bloc-title {
|
||||
margin-left: 20rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.prod-list {
|
||||
.prod-item {
|
||||
background: #ffffff;
|
||||
@include flex-space-between;
|
||||
border-bottom: $custom-border-style;
|
||||
padding: 20rpx;
|
||||
|
||||
.prod-image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
padding: 20rpx 20rpx 0;
|
||||
|
||||
.info-text {
|
||||
height: 100rpx;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.price-and-cart {
|
||||
@include flex-space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
let coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,26 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
|
||||
// 引入全局uView
|
||||
import uView from '@/uni_modules/uview-ui'
|
||||
|
||||
// vuex
|
||||
import store from './store'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.prototype.$store = store
|
||||
|
||||
|
||||
|
||||
App.mpType = 'app'
|
||||
Vue.use(uView)
|
||||
|
||||
const app = new Vue({
|
||||
store,
|
||||
...App
|
||||
})
|
||||
|
||||
// 引入请求封装
|
||||
require('./utils/request/index')(app)
|
||||
|
||||
app.$mount()
|
||||
@ -0,0 +1,72 @@
|
||||
{
|
||||
"name" : "yunxi-ui-app",
|
||||
"appid" : "__UNI__CA099E3",
|
||||
"description" : "yunxi-ui-app for ruoyi-vue-pro",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "wxd4d71484fd08f94b",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "2"
|
||||
}
|
||||
@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 搜索框 -->
|
||||
<view class="search-wrap">
|
||||
<u-search placeholder="搜索" disabled height="32" bgColor="#f2f2f2" margin="0 20rpx" :show-action="false"
|
||||
@click="handleSearchClick"></u-search>
|
||||
</view>
|
||||
|
||||
<!-- 分类内容 -->
|
||||
<view class="category-box">
|
||||
<!-- 左侧导航栏 -->
|
||||
<scroll-view scroll-y="true" class='box-left'>
|
||||
<view class="category-item" v-for="(item, index) in categoryList" :key="item.id">
|
||||
<view class="item-title" :class="{ active: currentIndex === index }" @click="handleCategoryClick(index)">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 右侧分类内容 -->
|
||||
<scroll-view scroll-y="true" class="box-right">
|
||||
<view class="category-image">
|
||||
<image :showLoading="true" :src="categoryList[currentIndex].picUrl" mode='widthFix' @click="click"></image>
|
||||
</view>
|
||||
|
||||
<view class="sub-category-box" v-for="(item, index) in categoryList[currentIndex].children" :key="item.id">
|
||||
<view class="sub-category-header">
|
||||
<view class="title">{{ item.name }}</view>
|
||||
<view class="more" @click="handleCategory(item, 0)">查看更多</view>
|
||||
</view>
|
||||
|
||||
<view class="sub-category-grid">
|
||||
<u-grid col="3">
|
||||
<u-grid-item v-for="(subItem, subIndex) in item.children" :key="subItem.id">
|
||||
<view class="sub-category-item" @click="handleCategory(item, subIndex)">
|
||||
<u-icon name="photo" :size="80" v-if="subItem.picUrl === null"></u-icon>
|
||||
<image :src="subItem.picUrl" v-if="subItem.picUrl != null" mode='widthFix' />
|
||||
<text class="sub-category-title">{{ subItem.name }}</text>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { categoryListData } from '../../api/category';
|
||||
import { handleTree, convertTree } from '../../utils/tree.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
categoryList: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.handleCategoryList();
|
||||
},
|
||||
methods: {
|
||||
// 点击搜索框
|
||||
handleSearchClick(e) {
|
||||
uni.$u.route('/pages/search/search')
|
||||
},
|
||||
// 点击左侧导航栏
|
||||
handleCategoryClick(index) {
|
||||
if (this.currentIndex !== index) {
|
||||
this.currentIndex = index
|
||||
}
|
||||
},
|
||||
// 获取分类列表并构建树形结构
|
||||
handleCategoryList() {
|
||||
categoryListData().then(res => {
|
||||
this.categoryList = handleTree(res.data, "id", "parentId");
|
||||
})
|
||||
},
|
||||
handleCategory(item, index){
|
||||
// console.log(item)
|
||||
// console.log(index)
|
||||
uni.navigateTo({
|
||||
url:"./product-list?item="+encodeURIComponent(JSON.stringify(item))+"&index="+index
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-wrap {
|
||||
background: #ffffff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07);
|
||||
padding: 20rpx 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.category-box {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
margin-top: 100rpx;
|
||||
height: calc(100% - 100rpx);
|
||||
|
||||
.box-left {
|
||||
width: 200rpx;
|
||||
padding-top: 5rpx;
|
||||
overflow: scroll;
|
||||
z-index: 2;
|
||||
background-color: #f2f2f2;
|
||||
|
||||
.category-item {
|
||||
line-height: 80rpx;
|
||||
height: 80rpx;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
|
||||
.item-title {
|
||||
font-size: 28rpx;
|
||||
|
||||
&.active {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
color: $u-primary;
|
||||
}
|
||||
|
||||
&.active::before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: "";
|
||||
width: 8rpx;
|
||||
height: 32rpx;
|
||||
top: 25rpx;
|
||||
background: $u-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-right {
|
||||
width: 550rpx;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
|
||||
.category-image {
|
||||
width: 510rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin: 30rpx 20rpx 0;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-category-box {
|
||||
.sub-category-header {
|
||||
@include flex-space-between;
|
||||
padding: 20rpx 20rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.more {
|
||||
font-size: 22rpx;
|
||||
color: #939393;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-category-grid {
|
||||
padding: 0 15rpx;
|
||||
|
||||
.sub-category-item {
|
||||
@include flex-center(column);
|
||||
background: #fff;
|
||||
|
||||
image {
|
||||
text-align: center;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
line-height: 150rpx;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.sub-category-title {
|
||||
margin: 15rpx 0;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="unp-header">
|
||||
<view class="unp-logo">
|
||||
<u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="unp-box">
|
||||
<u--form class="unp-form" labelPosition="left" :model="formData" :rules="rules" ref="form">
|
||||
<u-form-item label="账号" prop="username" borderBottom ref="item-username">
|
||||
<u-input type="text" maxlength="20" v-model="formData.username" clearable placeholder="账号由数字和字母组成" border="none" @change="handleUsernameChange"></u-input>
|
||||
</u-form-item>
|
||||
|
||||
<u-gap height="20"></u-gap>
|
||||
|
||||
<u-form-item label="验证码" prop="code" labelWidth="80" borderBottom>
|
||||
<u--input type="number" maxlength="6" v-model="formData.code" border="none" placeholder="请填写验证码"></u--input>
|
||||
<u-button slot="right" @tap="getCode" :text="tips" type="success" size="mini" :disabled="codeDisabled"></u-button>
|
||||
<u-code ref="uCode" @change="codeChange" seconds="60" @start="codeDisabled = true" @end="codeDisabled = false"></u-code>
|
||||
</u-form-item>
|
||||
|
||||
<u-gap height="20"></u-gap>
|
||||
|
||||
<u-form-item label="密码" prop="password" borderBottom ref="item-password">
|
||||
<u-input :type="inputType" maxlength="20" v-model="formData.password" placeholder="新密码由数字、字母和符号组成" border="none" @change="handlePasswordChange">
|
||||
<template slot="suffix">
|
||||
<u-icon v-if="inputType === 'password'" size="20" color="#666666" name="eye-fill" @click="inputType = 'text'"></u-icon>
|
||||
<u-icon v-if="inputType === 'text'" size="20" color="#666666" name="eye-off" @click="inputType = 'password'"></u-icon>
|
||||
</template>
|
||||
</u-input>
|
||||
</u-form-item>
|
||||
|
||||
<view class="lk-group">
|
||||
<!-- 占位 -->
|
||||
</view>
|
||||
|
||||
<u-button type="error" text="重置密码" customStyle="margin-top: 50px" @click="handleSubmit"></u-button>
|
||||
|
||||
<u-gap height="20"></u-gap>
|
||||
<u-button type="info" text="返回" @click="navigateBack()"></u-button>
|
||||
</u--form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
codeDisabled: false,
|
||||
tips: '',
|
||||
inputType: 'password',
|
||||
formData: {
|
||||
username: '',
|
||||
code: '',
|
||||
password: ''
|
||||
},
|
||||
rules: {
|
||||
username: {
|
||||
type: 'string',
|
||||
max: 20,
|
||||
required: true,
|
||||
message: '请输入您的账号',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
code: {
|
||||
type: 'number',
|
||||
max: 6,
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
password: {
|
||||
type: 'string',
|
||||
max: 20,
|
||||
required: true,
|
||||
message: '请输入您的新密码',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
handleUsernameChange(e) {
|
||||
let str = uni.$u.trim(e, 'all')
|
||||
this.$nextTick(() => {
|
||||
this.formData.username = str
|
||||
})
|
||||
},
|
||||
handlePasswordChange(e) {
|
||||
let str = uni.$u.trim(e, 'all')
|
||||
this.$nextTick(() => {
|
||||
this.formData.password = str
|
||||
})
|
||||
},
|
||||
codeChange(text) {
|
||||
this.tips = text
|
||||
},
|
||||
getCode() {
|
||||
if (this.$refs.uCode.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
uni.$u.toast('验证码已发送')
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode.start()
|
||||
}, 2000)
|
||||
} else {
|
||||
uni.$u.toast('倒计时结束后再发送')
|
||||
}
|
||||
},
|
||||
handleSubmit() {
|
||||
this.$refs.form
|
||||
.validate()
|
||||
.then(res => {
|
||||
uni.$u.toast('点击了重置密码')
|
||||
})
|
||||
},
|
||||
navigateBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.unp-header {
|
||||
height: 400rpx;
|
||||
@include flex-center;
|
||||
.unp-logo {
|
||||
@include flex-center;
|
||||
}
|
||||
}
|
||||
|
||||
.unp-box {
|
||||
@include flex-center(column);
|
||||
.unp-form {
|
||||
width: 560rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.lk-group {
|
||||
height: 40rpx;
|
||||
margin-top: 40rpx;
|
||||
@include flex-space-between;
|
||||
font-size: 12rpx;
|
||||
|
||||
color: $u-primary;
|
||||
text-decoration: $u-primary;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!--搜索栏-->
|
||||
<u-sticky style="top: 0" offset-top="0">
|
||||
<view class="search-wrap">
|
||||
<u-search placeholder="搜索" disabled height="32" :show-action="false" @click="handleSearchClick"></u-search>
|
||||
</view>
|
||||
</u-sticky>
|
||||
|
||||
<!--轮播图-->
|
||||
<yd-banner :banner-list="bannerList"></yd-banner>
|
||||
|
||||
<u-gap height="20px"></u-gap>
|
||||
|
||||
<!--宫格菜单按钮-->
|
||||
<u-grid :border="false" col="4">
|
||||
<u-grid-item v-for="(item, index) in menuList" :key="index">
|
||||
<u-icon :name="item.icon" :size="40"></u-icon>
|
||||
<text class="grid-title">{{ item.title }}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
|
||||
<u-gap height="15px"></u-gap>
|
||||
|
||||
<!--消息滚动栏-->
|
||||
<u-notice-bar style="padding: 13px 12px" :text="noticeList" mode="link" direction="column" @click="click"></u-notice-bar>
|
||||
|
||||
<!--商品展示栏-->
|
||||
<yd-product-box :product-list="productList" :title="'每日上新'" show-type="normal"></yd-product-box>
|
||||
<yd-product-box :product-list="productList" :title="'热卖商品'" show-type="half"></yd-product-box>
|
||||
<yd-product-more :product-list="productList" :more-status="moreStatus"></yd-product-more>
|
||||
|
||||
<u-gap height="5px"></u-gap>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getBannerData, getNoticeData } from '../../api/index'
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
bannerList: [
|
||||
{
|
||||
id: 1,
|
||||
title: '山不在高，有仙则名',
|
||||
url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '水不在深，有龙则灵',
|
||||
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '斯是陋室，惟吾德馨',
|
||||
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png'
|
||||
}
|
||||
],
|
||||
menuList: [
|
||||
{ icon: 'gift', title: '热门推荐' },
|
||||
{ icon: 'star', title: '收藏转发' },
|
||||
{ icon: 'thumb-up', title: '点赞投币' },
|
||||
{ icon: 'heart', title: '感谢支持' }
|
||||
],
|
||||
noticeList: ['寒雨连江夜入吴', '平明送客楚山孤', '洛阳亲友如相问', '一片冰心在玉壶'],
|
||||
productList: [
|
||||
{
|
||||
id: 1,
|
||||
image: 'https://cdn.uviewui.com/uview/album/1.jpg',
|
||||
title: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。',
|
||||
desc: '山不在于高，有了神仙就会有名气。水不在于深，有了龙就会有灵气。这是简陋的房子，只是我品德好就感觉不到简陋了。',
|
||||
price: '13.00'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: 'https://cdn.uviewui.com/uview/album/2.jpg',
|
||||
title: '商品222',
|
||||
desc: '',
|
||||
price: '23.00'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: 'https://cdn.uviewui.com/uview/album/3.jpg',
|
||||
title: '商品333',
|
||||
desc: '商品描述信息2',
|
||||
price: '33.00'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: 'https://cdn.uviewui.com/uview/album/4.jpg',
|
||||
title: '商品444',
|
||||
desc: '商品描述信息4',
|
||||
price: '43.00'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: 'https://cdn.uviewui.com/uview/album/5.jpg',
|
||||
title: '商品555',
|
||||
desc: '商品描述信息5',
|
||||
price: '53.00'
|
||||
}
|
||||
],
|
||||
moreStatus: 'nomore'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadBannerData()
|
||||
this.loadNoticeData()
|
||||
},
|
||||
methods: {
|
||||
loadBannerData() {
|
||||
getBannerData().then(res => {
|
||||
this.bannerList = res.data
|
||||
})
|
||||
},
|
||||
loadNoticeData() {
|
||||
getNoticeData().then(res => {
|
||||
this.noticeList = res.data
|
||||
})
|
||||
},
|
||||
handleSearchClick(e) {
|
||||
uni.$u.route('/pages/search/search')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
noticeTextList() {
|
||||
return this.noticeList.map(item => {
|
||||
if (item.title) {
|
||||
return item.title
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-wrap {
|
||||
background: $custom-bg-color;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.grid-title {
|
||||
line-height: 50rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="auth-header">
|
||||
<view class="auth-logo">
|
||||
<u-avatar size="100" icon="github-circle-fill" fontSize="100"></u-avatar>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="auth-box">
|
||||
<view class="btn-group">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<u-button class="auth-btn" open-type="getPhoneNumber" type="primary" @getphonenumber="getPhoneNumber">一键登录</u-button>
|
||||
<navigator class="reg-login-link" url="/pages/login/mobile" open-type="navigate" hover-class="none">手机号登录/注册 ></navigator>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<u-button type="primary" text="手机号登录/注册" @click="handleJump"></u-button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="auth-footer">
|
||||
<view>登录即表示同意<text class="lk-text">《用户协议》</text> 和 <text class="lk-text">《隐私政策》</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onLoad() {},
|
||||
onReady() {},
|
||||
methods: {
|
||||
getPhoneNumber(e) {
|
||||
let phoneCode = e.detail.code
|
||||
if (!e.detail.code) {
|
||||
uni.showModal({
|
||||
title: '授权失败',
|
||||
content: '您已拒绝获取绑定手机号登录授权，可以使用其他手机号验证登录',
|
||||
cancelText: '知道了',
|
||||
confirmText: '验证登录',
|
||||
confirmColor: '#3C9CFFFF',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
uni.$u.route('/pages/login/mobile')
|
||||
} else if (res.cancel) {
|
||||
//console.log('用户点击取消')
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: res => {
|
||||
this.$store.dispatch('Login', { type: 2, data: { phoneCode: phoneCode, loginCode: res.code } }).then(res => {
|
||||
uni.$u.toast('登录成功')
|
||||
setTimeout(() => {
|
||||
uni.switchTab({
|
||||
url: '/pages/user/user'
|
||||
})
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
handleJump() {
|
||||
uni.$u.route('/pages/login/mobile')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
height: calc(100vh - 70px);
|
||||
@include flex-space-between(column);
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
flex: 2;
|
||||
@include flex-center;
|
||||
.auth-logo {
|
||||
@include flex-center(column);
|
||||
}
|
||||
}
|
||||
|
||||
.auth-box {
|
||||
@include flex-center(column);
|
||||
|
||||
.btn-group {
|
||||
width: 600rpx;
|
||||
margin-bottom: 200rpx;
|
||||
.auth-btn {
|
||||
height: 90rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.reg-login-link {
|
||||
margin-top: 32rpx;
|
||||
text-align: center;
|
||||
color: #636363;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.auth-footer {
|
||||
font-size: 26rpx;
|
||||
color: #939393;
|
||||
.lk-text {
|
||||
color: $u-primary;
|
||||
text-decoration: $u-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
搜索页面
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: ''
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-gap height="20"></u-gap>
|
||||
<u-cell-group class="setting-list" :border="false">
|
||||
<u-cell class="setting-item" icon="lock" title="修改密码" isLink></u-cell>
|
||||
<u-cell class="setting-item" icon="phone" title="换绑手机" isLink></u-cell>
|
||||
<u-cell v-if="hasLogin" class="setting-item" icon="minus-circle" title="用户登出" @click="logout" isLink></u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UGap from '../../uni_modules/uview-ui/components/u-gap/u-gap'
|
||||
|
||||
export default {
|
||||
components: { UGap },
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
hasLogin() {
|
||||
return this.$store.getters.hasLogin
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
logout() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您确定要退出登录吗',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.$store.dispatch('Logout').then(res => {
|
||||
uni.switchTab({
|
||||
url: '/pages/user/user'
|
||||
})
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
//console.log('用户点击取消')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.setting-list {
|
||||
padding: 10rpx 0;
|
||||
background-color: #fff;
|
||||
border-radius: 15rpx;
|
||||
|
||||
.setting-item {
|
||||
padding: 10rpx 0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="user-header">
|
||||
<view class="user-info" @click="pageRouter('/pages/profile/profile')">
|
||||
<u-avatar size="60" shape="square" :src="userInfo.avatar"></u-avatar>
|
||||
<view class="info-text">
|
||||
<view class="user-nickname">{{ hasLogin ? userInfo.nickname || '会员用户' : '匿名用户' }}</view>
|
||||
<view class="user-mobile">{{ hasLogin ? userInfo.mobile || ' ' : '登录/注册' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="user-setting">
|
||||
<u-icon v-if="hasLogin" name="setting" color="#939393" size="22" @click="pageRouter('/pages/setting/setting')"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
|
||||
<view>
|
||||
<view class="order-header">
|
||||
<text class="order-title">我的订单</text>
|
||||
<view class="see-all" @click="pageRouter(orderPage, -1)">
|
||||
<text>查看全部</text>
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-status-box">
|
||||
<u-grid :border="false" :col="orderStatusList.length">
|
||||
<u-grid-item v-for="(item, index) in orderStatusList" :key="index" @click="pageRouter(orderPage, item.status)">
|
||||
<u-icon :name="item.icon" :size="32"></u-icon>
|
||||
<text class="grid-title">{{ item.name }}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
|
||||
<view class="stat-box">
|
||||
<u-grid :border="false" col="3">
|
||||
<u-grid-item v-for="(item, index) in statList" :key="index">
|
||||
<text class="grid-value">{{ item.value }}</text>
|
||||
<text class="grid-title">{{ item.title }}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
|
||||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
|
||||
<u-cell-group class="fun-list">
|
||||
<u-cell class="fun-item" :border="false" icon="gift" title="分销中心" isLink></u-cell>
|
||||
<u-cell class="fun-item" :border="false" icon="tags" title="领券中心" isLink></u-cell>
|
||||
<u-cell class="fun-item" :border="false" icon="coupon" title="我的优惠券" isLink></u-cell>
|
||||
<u-cell class="fun-item" :border="false" icon="map" title="收货地址" @click="pageRouter('/pages/address/list')" isLink></u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import orderStatus from '@/common/orderStatus'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderPage: '/pages/order/list',
|
||||
statList: [
|
||||
{ value: '0', title: '我的收藏' },
|
||||
{ value: '0', title: '我的消息' },
|
||||
{ value: '0', title: '我的足迹' }
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
if (this.hasLogin) {
|
||||
this.$store.dispatch('ObtainUserInfo')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userInfo() {
|
||||
return this.$store.getters.userInfo
|
||||
},
|
||||
hasLogin() {
|
||||
return this.$store.getters.hasLogin
|
||||
},
|
||||
orderStatusList() {
|
||||
let orderStatusList = []
|
||||
for (let status in orderStatus) {
|
||||
if (status !== '40') {
|
||||
orderStatusList.push({ name: orderStatus[status].name, status: status, icon: orderStatus[status].icon })
|
||||
}
|
||||
}
|
||||
return orderStatusList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pageRouter(pageUrl, param) {
|
||||
if (!this.hasLogin) {
|
||||
uni.$u.route('/pages/login/social')
|
||||
} else if (pageUrl === this.orderPage) {
|
||||
uni.$u.route(this.orderPage, {
|
||||
status: param
|
||||
})
|
||||
} else {
|
||||
uni.$u.route(pageUrl)
|
||||
}
|
||||
},
|
||||
logout() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您确定要退出登录吗',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.$store.dispatch('Logout')
|
||||
} else if (res.cancel) {
|
||||
//console.log('用户点击取消')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-header {
|
||||
background-color: #fff;
|
||||
@include flex-space-between;
|
||||
padding: 30rpx;
|
||||
height: 200rpx;
|
||||
|
||||
.user-info {
|
||||
@include flex-left;
|
||||
align-items: center;
|
||||
|
||||
.info-text {
|
||||
margin-left: 20rpx;
|
||||
|
||||
.user-nickname {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
.user-mobile {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #939393;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-setting {
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order-header {
|
||||
@include flex-space-between;
|
||||
padding: 20rpx 30rpx;
|
||||
border-bottom: $custom-border-style;
|
||||
|
||||
.order-title {
|
||||
color: #333333;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.see-all {
|
||||
height: 40rpx;
|
||||
@include flex-right;
|
||||
color: #666666;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order-status-box {
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
|
||||
.stat-box {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.grid-title {
|
||||
line-height: 50rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.grid-value {
|
||||
line-height: 50rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #2b85e4;
|
||||
}
|
||||
|
||||
.fun-list {
|
||||
.fun-item {
|
||||
padding-top: 10rpx;
|
||||
padding-bottom: 10rpx;
|
||||
border-bottom: $custom-border-style;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
|
||||
"rules": [{
|
||||
"action": "allow",
|
||||
"page": "*"
|
||||
}]
|
||||
}
|
||||
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
@ -0,0 +1,7 @@
|
||||
const getters = {
|
||||
accessToken: state => state.user.accessToken,
|
||||
refreshToken: state => state.user.refreshToken,
|
||||
userInfo: state => state.user.userInfo,
|
||||
hasLogin: state => !!state.user.accessToken
|
||||
}
|
||||
export default getters
|
||||
@ -0,0 +1,17 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import user from './mudules/user'
|
||||
import cart from './mudules/cart'
|
||||
import getters from './getters'
|
||||
|
||||
Vue.use(Vuex) // vue的插件机制
|
||||
|
||||
// Vuex.Store 构造器选项
|
||||
const store = new Vuex.Store({
|
||||
modules: {
|
||||
user,
|
||||
cart
|
||||
},
|
||||
getters
|
||||
})
|
||||
export default store
|
||||
@ -0,0 +1,28 @@
|
||||
import { getCartDetail } from '@/api/cart'
|
||||
|
||||
const cart = {
|
||||
state: {
|
||||
cartCount: 0
|
||||
},
|
||||
mutations: {
|
||||
//记录购物车商品数量
|
||||
SET_CART_COUNT(state, data) {
|
||||
const arr = data.length || []
|
||||
state.cartNumber = arr.length
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
//获取购物车数据
|
||||
CartProductDetail({ state, commit }) {
|
||||
return getCartDetail()
|
||||
.then(res => {
|
||||
commit('SET_CART_COUNT', res.data)
|
||||
return Promise.resolve(res)
|
||||
})
|
||||
.catch(err => {
|
||||
return Promise.reject(err)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
export default cart
|
||||
@ -0,0 +1,101 @@
|
||||
import { getUserInfo } from '@/api/user'
|
||||
import { passwordLogin, smsLogin, weixinMiniAppLogin, logout } from '@/api/auth'
|
||||
|
||||
const AccessTokenKey = 'ACCESS_TOKEN'
|
||||
const RefreshTokenKey = 'REFRESH_TOKEN'
|
||||
|
||||
const user = {
|
||||
state: {
|
||||
accessToken: uni.getStorageSync(AccessTokenKey), // 访问令牌
|
||||
refreshToken: uni.getStorageSync(RefreshTokenKey), // 刷新令牌
|
||||
userInfo: {}
|
||||
},
|
||||
mutations: {
|
||||
// 更新 state 的通用方法
|
||||
SET_STATE_ATTR(state, param) {
|
||||
if (param instanceof Array) {
|
||||
for (let item of param) {
|
||||
state[item.key] = item.val
|
||||
}
|
||||
} else {
|
||||
state[param.key] = param.val
|
||||
}
|
||||
},
|
||||
// 更新令牌
|
||||
SET_TOKEN(state, data) {
|
||||
// 设置令牌
|
||||
const { accessToken, refreshToken } = data
|
||||
state.accessToken = accessToken
|
||||
state.refreshToken = refreshToken
|
||||
uni.setStorageSync(AccessTokenKey, accessToken)
|
||||
uni.setStorageSync(RefreshTokenKey, refreshToken)
|
||||
|
||||
// 加载用户信息
|
||||
this.dispatch('ObtainUserInfo')
|
||||
},
|
||||
// 更新用户信息
|
||||
SET_USER_INFO(state, data) {
|
||||
state.userInfo = data
|
||||
},
|
||||
// 清空令牌 和 用户信息
|
||||
CLEAR_LOGIN_INFO(state) {
|
||||
uni.removeStorageSync(AccessTokenKey)
|
||||
uni.removeStorageSync(RefreshTokenKey)
|
||||
state.accessToken = ''
|
||||
state.refreshToken = ''
|
||||
state.userInfo = {}
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
//账号登录
|
||||
Login({ state, commit }, { type, data }) {
|
||||
if (type === 0) {
|
||||
return passwordLogin(data)
|
||||
.then(res => {
|
||||
commit('SET_TOKEN', res.data)
|
||||
return Promise.resolve(res)
|
||||
})
|
||||
.catch(err => {
|
||||
return Promise.reject(err)
|
||||
})
|
||||
} else if (type === 1) {
|
||||
return smsLogin(data)
|
||||
.then(res => {
|
||||
commit('SET_TOKEN', res.data)
|
||||
return Promise.resolve(res)
|
||||
})
|
||||
.catch(err => {
|
||||
return Promise.reject(err)
|
||||
})
|
||||
} else {
|
||||
return weixinMiniAppLogin(data)
|
||||
.then(res => {
|
||||
commit('SET_TOKEN', res.data)
|
||||
return Promise.resolve(res)
|
||||
})
|
||||
.catch(err => {
|
||||
return Promise.reject(err)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 退出登录
|
||||
Logout({ state, commit }) {
|
||||
return logout()
|
||||
.then(res => {
|
||||
return Promise.resolve(res)
|
||||
})
|
||||
.catch(err => {
|
||||
return Promise.reject(err)
|
||||
})
|
||||
.finally(() => {
|
||||
commit('CLEAR_LOGIN_INFO')
|
||||
})
|
||||
},
|
||||
// 获得用户基本信息
|
||||
async ObtainUserInfo({ state, commit }) {
|
||||
const res = await getUserInfo()
|
||||
commit('SET_USER_INFO', res.data)
|
||||
}
|
||||
}
|
||||
}
|
||||
export default user
|
||||
@ -0,0 +1,5 @@
|
||||
.row-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020 www.uviewui.com
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue