初始项目
This commit is contained in:
liupopo
419
mallplusui-uniapp-wx/pages/cart/cart.vue
Normal file
419
mallplusui-uniapp-wx/pages/cart/cart.vue
Normal file
@@ -0,0 +1,419 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<nav-bar>购物车</nav-bar>
|
||||
<!-- #endif -->
|
||||
<!-- 空白页 -->
|
||||
<view v-if="!hasLogin || empty === true" class="empty">
|
||||
<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
|
||||
<view v-if="hasLogin" class="empty-tips">
|
||||
空空如也
|
||||
<navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛></navigator>
|
||||
</view>
|
||||
<view v-else class="empty-tips">
|
||||
空空如也
|
||||
<view class="navigator" @click="navToLogin">去登陆></view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<!-- 列表 -->
|
||||
<view class="cart-list">
|
||||
<block v-for="(item, index) in cartList" :key="item.id">
|
||||
<view class="cart-item" :class="{ 'b-b': index !== cartList.length - 1 }">
|
||||
<view class="image-wrapper">
|
||||
<image
|
||||
:src="item.productPic"
|
||||
class="loaded"
|
||||
mode="aspectFill"
|
||||
lazy-load
|
||||
@load="onImageLoad('cartList', index)"
|
||||
@error="onImageError('cartList', index)"
|
||||
></image>
|
||||
<view class="yticon icon-xuanzhong2 checkbox" :class="{ checked: item.checked === '1' || item.checked }" @click="check('item', index)"></view>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<text class="clamp title">{{ item.productName }}</text>
|
||||
<text class="attr">{{ item.productAttr }}</text>
|
||||
<text class="price">¥{{ item.price }}</text>
|
||||
<uni-number-box class="step" :min="1" :value="item.quantity" :isMin="item.quantity === 1" :index="index" @eventChange="numberChange"></uni-number-box>
|
||||
</view>
|
||||
<text class="del-btn yticon icon-fork" @click="deleteCartItem(index)"></text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 底部菜单栏 -->
|
||||
<view class="action-section">
|
||||
<view class="checkbox">
|
||||
<image :src="allChecked ? '/static/selected.png' : '/static/select.png'" mode="aspectFit" @click="check('all')"></image>
|
||||
<view class="clear-btn" :class="{ show: allChecked }" @click="clearCart">清空</view>
|
||||
</view>
|
||||
<view class="total-box">
|
||||
<text class="price">¥{{ total }}</text>
|
||||
<text class="coupon">
|
||||
已优惠
|
||||
<text>{{ promoteAmount }}</text>
|
||||
元
|
||||
</text>
|
||||
</view>
|
||||
<button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<mallplusCopyright></mallplusCopyright>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import { mapState } from 'vuex';
|
||||
import uniNumberBox from '@/components/uni-number-box.vue';
|
||||
import navBar from '@/components/zhouWei-navBar';
|
||||
export default {
|
||||
components: {
|
||||
uniNumberBox,
|
||||
navBar,
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
total: 0, //总价格
|
||||
allChecked: false, //全选状态 true|false
|
||||
empty: false, //空白页现实 true|false
|
||||
promoteAmount: 0,
|
||||
cartList: [],
|
||||
|
||||
statusBarHeight: ''
|
||||
};
|
||||
},
|
||||
|
||||
async onShow() {
|
||||
if (this.hasLogin) {
|
||||
this.loadData();
|
||||
}
|
||||
},
|
||||
async onLoad() {
|
||||
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
||||
},
|
||||
watch: {
|
||||
//显示空白页
|
||||
cartList(e) {
|
||||
let empty = e.length === 0 ? true : false;
|
||||
if (this.empty !== empty) {
|
||||
this.empty = empty;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['hasLogin', 'userInfo'])
|
||||
},
|
||||
methods: {
|
||||
//请求数据
|
||||
async loadData() {
|
||||
let params = {};
|
||||
let list = await Api.apiCall('get', Api.order.cartList, params);
|
||||
// let list = await this.$api.json('cartList');
|
||||
let cartList = list.cartItemList.map(item => {
|
||||
item.checked = '1';
|
||||
return item;
|
||||
});
|
||||
this.cartList = cartList;
|
||||
this.promoteAmount = list.promoteAmount;
|
||||
this.calcTotal(); //计算总价
|
||||
},
|
||||
//监听image加载完成
|
||||
onImageLoad(key, index) {
|
||||
this.$set(this[key][index], 'loaded', 'loaded');
|
||||
},
|
||||
//监听image加载失败
|
||||
onImageError(key, index) {
|
||||
this[key][index].image = '/static/errorImage.jpg';
|
||||
},
|
||||
navToLogin() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/public/login'
|
||||
});
|
||||
},
|
||||
//选中状态处理
|
||||
check(type, index) {
|
||||
if (type === 'item') {
|
||||
this.cartList[index].checked = !this.cartList[index].checked;
|
||||
} else {
|
||||
const checked = !this.allChecked;
|
||||
const list = this.cartList;
|
||||
list.forEach(item => {
|
||||
item.checked = checked;
|
||||
});
|
||||
this.allChecked = checked;
|
||||
}
|
||||
this.calcTotal(type);
|
||||
},
|
||||
//数量
|
||||
numberChange(data) {
|
||||
this.cartList[data.index].quantity = data.number;
|
||||
let params = { id: this.cartList[data.index].id, quantity: data.number };
|
||||
data = Api.apiCall('get', Api.order.updateQuantity, params);
|
||||
this.calcTotal();
|
||||
},
|
||||
//删除
|
||||
deleteCartItem(index) {
|
||||
var that = this;
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定将此商品移出购物车吗',
|
||||
success: res => {
|
||||
if(res.confirm){
|
||||
let list = that.cartList;
|
||||
let row = list[index];
|
||||
let id = row.id;
|
||||
let params = { cart_id_list: id };
|
||||
Api.apiCall('post', Api.order.deleteCart, params);
|
||||
that.cartList.splice(index, 1);
|
||||
that.calcTotal();
|
||||
uni.hideLoading();
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
//清空
|
||||
clearCart() {
|
||||
var that = this;
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定将购物车清空吗',
|
||||
success: res => {
|
||||
if(res.confirm){
|
||||
let params = {};
|
||||
Api.apiCall('post', Api.order.clearCart, params);
|
||||
this.cartList = [];
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//计算总价
|
||||
calcTotal() {
|
||||
let list = this.cartList;
|
||||
if (list.length === 0) {
|
||||
this.empty = true;
|
||||
return;
|
||||
}
|
||||
let total = 0;
|
||||
let checked = true;
|
||||
list.forEach(item => {
|
||||
if (item.checked === true || item.checked === '1') {
|
||||
total += item.price * item.quantity;
|
||||
} else if (checked === true) {
|
||||
checked = false;
|
||||
}
|
||||
});
|
||||
total = total - this.promoteAmount;
|
||||
this.allChecked = checked;
|
||||
this.total = Number(total.toFixed(2));
|
||||
},
|
||||
//创建订单
|
||||
createOrder() {
|
||||
let list = this.cartList;
|
||||
var ids = '';
|
||||
list.forEach(item => {
|
||||
if (item.checked === true || item.checked === '1') {
|
||||
ids = item.id + ',' + ids;
|
||||
}
|
||||
});
|
||||
let cartIds = ids.substr(0, ids.length - 1);
|
||||
let dataJson ={};
|
||||
|
||||
dataJson.type=2;
|
||||
dataJson.cartIds=cartIds;
|
||||
let url='/pages/order/createStoreOrder?dataJson=' + JSON.stringify(dataJson)
|
||||
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding-bottom: 134upx;
|
||||
/* 空白页 */
|
||||
.empty {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
padding-bottom: 100upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
image {
|
||||
width: 240upx;
|
||||
height: 160upx;
|
||||
margin-bottom: 30upx;
|
||||
}
|
||||
.empty-tips {
|
||||
display: flex;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-disabled;
|
||||
.navigator {
|
||||
color: $uni-color-primary;
|
||||
margin-left: 16upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 购物车列表项 */
|
||||
.cart-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding: 30upx 40upx;
|
||||
.image-wrapper {
|
||||
width: 230upx;
|
||||
height: 230upx;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
image {
|
||||
border-radius: 8upx;
|
||||
}
|
||||
}
|
||||
.checkbox {
|
||||
position: absolute;
|
||||
left: -16upx;
|
||||
top: -16upx;
|
||||
z-index: 8;
|
||||
font-size: 44upx;
|
||||
line-height: 1;
|
||||
padding: 4upx;
|
||||
color: $font-color-disabled;
|
||||
background: #fff;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.item-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-left: 30upx;
|
||||
.title,
|
||||
.price {
|
||||
font-size: $font-base + 2upx;
|
||||
color: $font-color-dark;
|
||||
height: 40upx;
|
||||
line-height: 40upx;
|
||||
}
|
||||
.attr {
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-light;
|
||||
height: 50upx;
|
||||
line-height: 50upx;
|
||||
}
|
||||
.price {
|
||||
height: 50upx;
|
||||
line-height: 50upx;
|
||||
}
|
||||
}
|
||||
.del-btn {
|
||||
padding: 4upx 10upx;
|
||||
font-size: 34upx;
|
||||
height: 50upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
}
|
||||
/* 底部栏 */
|
||||
.action-section {
|
||||
/* #ifdef H5 */
|
||||
margin-bottom: 100upx;
|
||||
/* #endif */
|
||||
position: fixed;
|
||||
left: 30upx;
|
||||
bottom: 30upx;
|
||||
z-index: 95;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 690upx;
|
||||
height: 100upx;
|
||||
padding: 0 30upx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);
|
||||
border-radius: 16upx;
|
||||
.checkbox {
|
||||
height: 52upx;
|
||||
position: relative;
|
||||
image {
|
||||
width: 52upx;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
left: 26upx;
|
||||
top: 0;
|
||||
z-index: 4;
|
||||
width: 0;
|
||||
height: 52upx;
|
||||
line-height: 52upx;
|
||||
padding-left: 38upx;
|
||||
font-size: $font-base;
|
||||
color: #fff;
|
||||
background: $font-color-disabled;
|
||||
border-radius: 0 50px 50px 0;
|
||||
opacity: 0;
|
||||
transition: 0.2s;
|
||||
&.show {
|
||||
opacity: 1;
|
||||
width: 120upx;
|
||||
}
|
||||
}
|
||||
.total-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: right;
|
||||
padding-right: 40upx;
|
||||
.price {
|
||||
font-size: $font-lg;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.coupon {
|
||||
font-size: $font-sm;
|
||||
color: $font-color-light;
|
||||
text {
|
||||
color: $font-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
.confirm-btn {
|
||||
padding: 0 38upx;
|
||||
margin: 0;
|
||||
border-radius: 100px;
|
||||
height: 76upx;
|
||||
line-height: 76upx;
|
||||
font-size: $font-base + 2upx;
|
||||
background: $uni-color-primary;
|
||||
box-shadow: 1px 2px 5px rgba(217, 60, 93, 0.72);
|
||||
}
|
||||
}
|
||||
/* 复选框选中状态 */
|
||||
.action-section .checkbox.checked,
|
||||
.cart-item .checkbox.checked {
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
.getPosition {
|
||||
height: 100upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32upx;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
231
mallplusui-uniapp-wx/pages/category/areaGoods.vue
Normal file
231
mallplusui-uniapp-wx/pages/category/areaGoods.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<view class="content" style="display: flex;flex-direction: column;">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view style="width: 100%;position: fixed;top: 0;z-index: 99;background: #FFFFFF;" :style="{'height':statusBarHeight+'px' }"></view>
|
||||
<view class="getPosition" style="height: 90upx;position: fixed;z-index: 99;width: 100%" :style="{'top':statusBarHeight+'px' }">
|
||||
<text>分类</text>
|
||||
</view>
|
||||
<view class="" @click="search()" style="background: #FFFFFF;height: 80upx;display: flex;justify-content: center;align-items: center;" :style="[{'margin-top': statusBarHeight+45+'px'}]">
|
||||
<input class="" type="text" value="" placeholder="输入关键字搜索" style="font-size: 28upx;background: #F5F5F5;height: 60upx;width: 90%;border-radius: 50upx;text-align: center;" />
|
||||
</view>
|
||||
<!-- 占位 -->
|
||||
<!-- <view class="" :style="[{'height': statusBarHeight+45+'px'}]"></view> -->
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- <view class="" style="background: #FFFFFF;height: 80upx;display: flex;align-items: center;justify-content: center;">
|
||||
<view style="display: flex;align-items: center;justify-content: center; height:60upx;width: 90%;background: #F5F5F5;border-radius: 50upx;">
|
||||
<input type="text" value="" placeholder="输入关键字搜索" class="input" style="font-size: 28upx;text-align: center;"/>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="" :style="{height: height + 'px'}" style="display: flex;flex-direction: row;">
|
||||
<scroll-view scroll-y class="left-aside">
|
||||
<view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{ active: item.id === currentId }" @click="tabtap(item)">{{ item.name }}</view>
|
||||
</scroll-view>
|
||||
<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
|
||||
<view v-for="item in slist" :key="item.id" class="s-list" :id="'main-' + item.id">
|
||||
<text class="s-item">{{ item.name }}</text>
|
||||
<view class="t-list">
|
||||
<view @click="navToList(item.id, titem.id)" v-if="titem.pid === item.id" class="t-item" v-for="titem in tlist" :key="titem.id">
|
||||
<image :src="titem.pic"></image>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sizeCalcState: false,
|
||||
tabScrollTop: 0,
|
||||
currentId: 1,
|
||||
flist: [],
|
||||
slist: [],
|
||||
tlist: [],
|
||||
|
||||
height: '',
|
||||
statusBarHeight: '',
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||||
this.height = uni.getSystemInfoSync().windowHeight - (this.statusBarHeight+80)
|
||||
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
async loadData() {
|
||||
let list = this.$db.get('areaGoodsList' )
|
||||
if(!list){
|
||||
let params = {};
|
||||
list = await Api.apiCall('get', Api.goods.areaGoodsList, params);
|
||||
this.$db.set('areaGoodsList', list)
|
||||
}
|
||||
if(list){
|
||||
list.forEach(item => {
|
||||
if (item.level==0) {
|
||||
this.flist.push(item); //pid为父级id, 没有pid或者pid=0是一级分类
|
||||
} else if (item.level==1) {
|
||||
this.slist.push(item); //没有价格的是2级分类
|
||||
} else {
|
||||
this.tlist.push(item); //3级分类
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
//一级分类点击
|
||||
tabtap(item) {
|
||||
if (!this.sizeCalcState) {
|
||||
this.calcSize();
|
||||
}
|
||||
|
||||
this.currentId = item.id;
|
||||
console.log(item.id);
|
||||
let index = this.slist.findIndex(sitem => sitem.pid === item.id);
|
||||
if(index>=0){
|
||||
this.tabScrollTop = this.slist[index].top;
|
||||
}
|
||||
|
||||
},
|
||||
//右侧栏滚动
|
||||
asideScroll(e) {
|
||||
if (!this.sizeCalcState) {
|
||||
this.calcSize();
|
||||
}
|
||||
let scrollTop = e.detail.scrollTop;
|
||||
let tabs = this.slist.filter(item => item.top <= scrollTop).reverse();
|
||||
if (tabs.length > 0) {
|
||||
this.currentId = tabs[0].pid;
|
||||
}
|
||||
},
|
||||
//计算右侧栏每个tab的高度等信息
|
||||
calcSize() {
|
||||
let h = 0;
|
||||
this.slist.forEach(item => {
|
||||
let view = uni.createSelectorQuery().select('#main-' + item.id);
|
||||
view.fields(
|
||||
{
|
||||
size: true
|
||||
},
|
||||
data => {
|
||||
item.top = h;
|
||||
h += data.height;
|
||||
item.bottom = h;
|
||||
}
|
||||
).exec();
|
||||
});
|
||||
this.sizeCalcState = true;
|
||||
},
|
||||
navToList(sid, tid) {
|
||||
uni.navigateTo({
|
||||
url: `../../pagesA/product/list?fid=${this.currentId}&sid=${sid}&tid=${tid}`
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page,
|
||||
.content {
|
||||
height: 100%;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
}
|
||||
.left-aside {
|
||||
flex-shrink: 0;
|
||||
width: 200upx;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.f-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100upx;
|
||||
font-size: 28upx;
|
||||
color: $font-color-base;
|
||||
position: relative;
|
||||
&.active {
|
||||
color: $base-color;
|
||||
background: #f8f8f8;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 36upx;
|
||||
width: 8upx;
|
||||
background-color: $base-color;
|
||||
border-radius: 0 4px 4px 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-aside {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding-left: 20upx;
|
||||
}
|
||||
.s-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 70upx;
|
||||
padding-top: 8upx;
|
||||
font-size: 28upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.t-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding-top: 12upx;
|
||||
&:after {
|
||||
content: '';
|
||||
flex: 99;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.t-item {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 176upx;
|
||||
font-size: 26upx;
|
||||
color: #666;
|
||||
padding-bottom: 20upx;
|
||||
|
||||
image {
|
||||
width: 140upx;
|
||||
height: 140upx;
|
||||
}
|
||||
}
|
||||
.getPosition{
|
||||
height: 100upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32upx;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
243
mallplusui-uniapp-wx/pages/category/category.vue
Normal file
243
mallplusui-uniapp-wx/pages/category/category.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<view class="content" style="display: flex;flex-direction: column;">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view style="width: 100%;position: fixed;top: 0;z-index: 99;background: #FFFFFF;" :style="{'height':statusBarHeight+'px' }"></view>
|
||||
<view class="getPosition" style="height: 90upx;position: fixed;z-index: 99;width: 100%" :style="{'top':statusBarHeight+'px' }">
|
||||
<text>分类</text>
|
||||
</view>
|
||||
<view class="" @click="search()" style="background: #FFFFFF;height: 80upx;display: flex;justify-content: center;align-items: center;" :style="[{'margin-top': statusBarHeight+45+'px'}]">
|
||||
<input class="" type="text" value="" placeholder="输入关键字搜索" style="font-size: 28upx;background: #F5F5F5;height: 60upx;width: 90%;border-radius: 50upx;text-align: center;" />
|
||||
</view>
|
||||
<!-- 占位 -->
|
||||
<!-- <view class="" :style="[{'height': statusBarHeight+45+'px'}]"></view> -->
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- <view class="" style="background: #FFFFFF;height: 80upx;display: flex;align-items: center;justify-content: center;">
|
||||
<view style="display: flex;align-items: center;justify-content: center; height:60upx;width: 90%;background: #F5F5F5;border-radius: 50upx;">
|
||||
<input type="text" value="" placeholder="输入关键字搜索" class="input" style="font-size: 28upx;text-align: center;"/>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="" :style="{height: height + 'px'}" style="display: flex;flex-direction: row;">
|
||||
<scroll-view scroll-y class="left-aside">
|
||||
<view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{ active: item.id === currentId }" @click="tabtap(item)">{{ item.name }}</view>
|
||||
</scroll-view>
|
||||
<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
|
||||
<view v-for="item in slist" :key="item.id" class="s-list" :id="'main-' + item.id">
|
||||
<text class="s-item">{{ item.name }}</text>
|
||||
<view class="t-list" >
|
||||
<view v-if="titem.pid === item.id" class="t-item" v-for="titem in tlist" :key="titem.id">
|
||||
<image :src="titem.pic" @click="navToDetailPage(titem)"></image>
|
||||
<text @click="navToDetailPage(titem)">{{titem.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sizeCalcState: false,
|
||||
tabScrollTop: 0,
|
||||
currentId: 1,
|
||||
flist: [],
|
||||
slist: [],
|
||||
tlist: [],
|
||||
|
||||
height: '',
|
||||
statusBarHeight: '',
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||||
this.height = uni.getSystemInfoSync().windowHeight - (this.statusBarHeight+80)
|
||||
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
async loadData() {
|
||||
|
||||
let list = this.$db.get('categoryList' )
|
||||
if(!list){
|
||||
let params = {};
|
||||
list = await Api.apiCall('get', Api.goods.typeGoodsList, params);
|
||||
this.$db.set('categoryList', list)
|
||||
}
|
||||
|
||||
if(list){
|
||||
list.forEach(item => {
|
||||
|
||||
if (item.level==0) {
|
||||
this.flist.push(item); //pid为父级id, 没有pid或者pid=0是一级分类
|
||||
} else if (item.level==1) {
|
||||
this.slist.push(item); //没有价格的是2级分类
|
||||
} else {
|
||||
this.tlist.push(item); //3级分类
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
//一级分类点击
|
||||
tabtap(item) {
|
||||
if (!this.sizeCalcState) {
|
||||
this.calcSize();
|
||||
}
|
||||
|
||||
this.currentId = item.id;
|
||||
console.log(item.id);
|
||||
let index = this.slist.findIndex(sitem => sitem.pid === item.id);
|
||||
if(index>=0){
|
||||
this.tabScrollTop = this.slist[index].top;
|
||||
}
|
||||
|
||||
},
|
||||
//右侧栏滚动
|
||||
asideScroll(e) {
|
||||
if (!this.sizeCalcState) {
|
||||
this.calcSize();
|
||||
}
|
||||
let scrollTop = e.detail.scrollTop;
|
||||
let tabs = this.slist.filter(item => item.top <= scrollTop).reverse();
|
||||
if (tabs.length > 0) {
|
||||
this.currentId = tabs[0].pid;
|
||||
}
|
||||
},
|
||||
//计算右侧栏每个tab的高度等信息
|
||||
calcSize() {
|
||||
let h = 0;
|
||||
this.slist.forEach(item => {
|
||||
let view = uni.createSelectorQuery().select('#main-' + item.id);
|
||||
view.fields(
|
||||
{
|
||||
size: true
|
||||
},
|
||||
data => {
|
||||
item.top = h;
|
||||
h += data.height;
|
||||
item.bottom = h;
|
||||
}
|
||||
).exec();
|
||||
});
|
||||
this.sizeCalcState = true;
|
||||
},
|
||||
navToList(sid) {
|
||||
uni.navigateTo({
|
||||
url: `../../pagesA/product/list?sid=${sid}`
|
||||
});
|
||||
},
|
||||
//详情页
|
||||
navToDetailPage(item) {
|
||||
//测试数据没有写id，用title代替
|
||||
let id = item.id;
|
||||
uni.navigateTo({
|
||||
url: `../../pagesA/product/product?id=${id}`
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page,
|
||||
.content {
|
||||
height: 100%;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
}
|
||||
.left-aside {
|
||||
flex-shrink: 0;
|
||||
width: 200upx;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.f-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100upx;
|
||||
font-size: 28upx;
|
||||
color: $font-color-base;
|
||||
position: relative;
|
||||
&.active {
|
||||
color: $base-color;
|
||||
background: #f8f8f8;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 36upx;
|
||||
width: 8upx;
|
||||
background-color: $base-color;
|
||||
border-radius: 0 4px 4px 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-aside {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding-left: 20upx;
|
||||
}
|
||||
.s-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 70upx;
|
||||
padding-top: 8upx;
|
||||
font-size: 28upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.t-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding-top: 12upx;
|
||||
&:after {
|
||||
content: '';
|
||||
flex: 99;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.t-item {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 176upx;
|
||||
font-size: 26upx;
|
||||
color: #666;
|
||||
padding-bottom: 20upx;
|
||||
|
||||
image {
|
||||
width: 140upx;
|
||||
height: 140upx;
|
||||
}
|
||||
}
|
||||
.getPosition{
|
||||
height: 100upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32upx;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
1301
mallplusui-uniapp-wx/pages/index/index.vue
Normal file
1301
mallplusui-uniapp-wx/pages/index/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
561
mallplusui-uniapp-wx/pages/index/nearbyBusiness.vue
Normal file
561
mallplusui-uniapp-wx/pages/index/nearbyBusiness.vue
Normal file
@@ -0,0 +1,561 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
|
||||
<!-- 顶部搜索 -->
|
||||
<view class="getPosition">
|
||||
<image src="/static/position.png" @click="openMap()" style="width: 50upx;height: 50upx;" mode=""></image>
|
||||
|
||||
<text @click="toAddressList()" >{{ addressData.province }}-{{ addressData.city }}-{{ addressData.region }}</text>
|
||||
</view>
|
||||
<!-- 头部 -->
|
||||
<view class="title-box">
|
||||
<view @click="scanCode()" class="scan"><image src="http://rs.eonfox.cc/clzy/static/scan-ico.png" mode="" style="width:40upx; height:40upx; "></image></view>
|
||||
<view class="input-box" @click="openSearch">
|
||||
<view style="float: left;">
|
||||
<image src="/static/search.png" mode="" style="width:40upx; height:40upx; margin-left: 10upx; margin-right: 10upx; margin-top: 10upx; "></image>
|
||||
</view>
|
||||
<view style=" float:left; height:100%;"><input type="text" value="" placeholder="输入关键字搜索" class="input" /></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="topTitle">
|
||||
<image src="http://rs.eonfox.cc/clzy/static/star-ico.png" mode="" style="width:68upx;height:68upx;float:left;margin-right: -10upx;"></image>
|
||||
<text class="topText">全部商家</text>
|
||||
</view>
|
||||
<view class="checkGroup">
|
||||
<radio-group>
|
||||
<label class="radio" v-for="(item,index) in disType" :key='index'><radio value="r1" class="radio" @click="gain(item.id)"/>{{item.name}}</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="classification">
|
||||
<view class="allClassification typeList" @click="gosort">
|
||||
<uni-icon type="bars" size="22" class="bars" color="8e8e8e"></uni-icon>
|
||||
<text>全部分类</text>
|
||||
</view>
|
||||
<view class="city typeList" @click="load">
|
||||
<uni-icon type="refreshempty" size="25" color="8e8e8e"></uni-icon>
|
||||
<text>加载全部</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="shop-box" style="margin-top: 80upx;">
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view class="shop-box">
|
||||
<!-- #endif -->
|
||||
<view v-if="!storeList" style="text-align: center; color:#5C5C5C; font-size: 30upx;">暂无商家记录</view>
|
||||
<view class="shop" v-for="(item, index) in storeList" @click="gobrand" :data-Businessid="item.id" :key="index">
|
||||
<image :src="item.logo" mode="" class="image" width="100%" height="100%"></image>
|
||||
<view class="shopText">
|
||||
<text class="name">{{ item.name }}</text>
|
||||
<view class="evaluate">
|
||||
<uni-icon type="star-filled" size="15" class="star-filled" color="8e8e8e"></uni-icon>
|
||||
<uni-icon type="star-filled" size="15" class="star-filled" color="8e8e8e"></uni-icon>
|
||||
<uni-icon type="star-filled" size="15" class="star-filled" color="8e8e8e"></uni-icon>
|
||||
<uni-icon type="star-filled" size="15" class="star-filled" color="8e8e8e"></uni-icon>
|
||||
<uni-icon type="star-filled" size="15" class="star-filled" color="8e8e8e"></uni-icon>
|
||||
<text class="garde" style="margin-right:10upx; color:#666666; ">收藏 {{ item.collect }}</text>
|
||||
</view>
|
||||
<view class="bottomInformation">
|
||||
<text v-if="item.addressDetail" class="crux" style="margin-top: 30upx; color:#666666; overflow: hidden; display: inline-block; height: 40upx; text-overflow:ellipsis;">
|
||||
{{ item.addressDetail }}
|
||||
</text>
|
||||
<text v-else class="crux" style="margin-top: 30upx; color:#666666; overflow: hidden; display: inline-block; height: 40upx; text-overflow:ellipsis;">
|
||||
{{ item.addressProvince }}-{{ item.addressCity }}
|
||||
</text>
|
||||
<text class="distance" style=" color:#666666;">{{ item.distance.toFixed(4) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--<uni-load-more :loadingType="loadingType" :contentText="contentrefresh"></uni-load-more>-->
|
||||
</view>
|
||||
<view class="mask" v-show="display" @click="Colse"></view>
|
||||
<view class="sortBox" v-show="display">
|
||||
<view class="sortBox-title">
|
||||
<view>请选择商家类别</view>
|
||||
<view @click="Colse"><uni-icon type="closeempty" size="30"></uni-icon></view>
|
||||
</view>
|
||||
<view class="sortBoxBox" v-for="(items, index1) in Parent" :key="index1">
|
||||
<view class="sortRight">
|
||||
<text v-for="(item, index2) in items.son" :key="index2" @click="sublevel(item.type_id)">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
||||
import uniIcon from '@/components/uni-icon/uni-icon.vue';
|
||||
import eonfox from '@/components/eonfox/eonfox.js';
|
||||
import fns from '@/components/eonfox/fns.js';
|
||||
import QQMapWX from '@/components/eonfox/qqmap-wx-jssdk.js';
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import navBar from "@/components/zhouWei-navBar";
|
||||
var qqmapsdk = new QQMapWX({
|
||||
key: '5XABZ-AQ764-SMHUQ-DABAC-R7E4H-37FM2'
|
||||
});
|
||||
// #ifdef H5
|
||||
let jweixin = require('jweixin-module');
|
||||
// #endif
|
||||
var ef = new eonfox();
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright,uniIcon
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
sjnumber: [],
|
||||
storeList: [],
|
||||
name: '',
|
||||
address: '',
|
||||
page: 10,
|
||||
|
||||
merchant: [],
|
||||
distance:20,
|
||||
loadingType: 0,
|
||||
contentText: {
|
||||
contentdown: '上拉显示更多',
|
||||
contentrefresh: '正在加载...',
|
||||
contentnomore: '没有更多数据了'
|
||||
},
|
||||
disType:[
|
||||
{
|
||||
id: 5,
|
||||
name: "5km",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: "10km",
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
name: "20km",
|
||||
},
|
||||
{
|
||||
id: 40,
|
||||
name: "40km",
|
||||
},
|
||||
],
|
||||
Parent: [],
|
||||
display: false,
|
||||
addressData: {
|
||||
longitude:0.0,
|
||||
latitude:0.0,
|
||||
}, //默认收货地址
|
||||
addressId: '', //地址id
|
||||
|
||||
statusBarHeight: ''
|
||||
};
|
||||
},
|
||||
components: {
|
||||
uniIcon,
|
||||
uniLoadMore,
|
||||
navBar
|
||||
},
|
||||
onShow: function() {
|
||||
|
||||
(this.latitude = ''), (this.longitude = '');
|
||||
this.load();
|
||||
},
|
||||
async onLoad(options) {
|
||||
this.load();
|
||||
},
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
openSearch(){
|
||||
console.log('搜索')
|
||||
},
|
||||
Colse() {
|
||||
this.display = !this.display;
|
||||
},
|
||||
toAddressList() {
|
||||
var type = '1'; //不知道这个type有什么值，取大一点
|
||||
uni.navigateTo({
|
||||
url: '../../pagesU/address/address?source=' + type
|
||||
});
|
||||
},
|
||||
gobrand: function(e) {
|
||||
console.log(e);
|
||||
// return
|
||||
var sjid = e.currentTarget.dataset.businessid;
|
||||
console.log('目标', sjid);
|
||||
uni.navigateTo({
|
||||
url: '../../pagesC/store/businessDetails?id=' + sjid
|
||||
+'&lon='+this.addressData.longitude
|
||||
+'&lat='+this.addressData.latitude
|
||||
// 参数的传递 newsid
|
||||
});
|
||||
},
|
||||
gosort() {
|
||||
this.display = !this.display;
|
||||
},
|
||||
openMap() {
|
||||
var _this = this;
|
||||
uni.chooseLocation({
|
||||
|
||||
success: function(res) {
|
||||
console.log('res', res);
|
||||
_this.addressData.longitude=res.longitude;
|
||||
_this.addressData.latitude=res.latitude;
|
||||
_this.addressId = 1 ;
|
||||
_this.addressData.province = res.address ;
|
||||
_this.addressData.name = res.name;
|
||||
console.log('经度：' + res.longitude);
|
||||
console.log('详细地址：' + res.address);
|
||||
console.log('纬度：' + res.latitude);
|
||||
_this.storeList = {};
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
async load() {
|
||||
var that = this;
|
||||
let params = {};
|
||||
if(!that.addressId){
|
||||
that.addressData = await Api.apiCall('get', Api.goods.getItemDefautl, params);
|
||||
|
||||
}
|
||||
|
||||
console.log(that.addressData);
|
||||
if(that.addressData.longitude){
|
||||
params = { geohash: that.addressData.latitude+','+ that.addressData.longitude, pageSize: that.page,distance:this.distance };
|
||||
console.log(params);
|
||||
let list = await Api.apiCall('get', Api.index.nearStoreList, params);
|
||||
that.storeList = list;
|
||||
}
|
||||
console.log('that.addressId：' + that.addressId);
|
||||
},
|
||||
gain(id){
|
||||
this.distance=id ;
|
||||
this.load();
|
||||
|
||||
},
|
||||
//点击查询商家分类
|
||||
sublevel(id) {
|
||||
var that = this;
|
||||
that.display = !that.display;
|
||||
ef.submit({
|
||||
request: {
|
||||
s: ['MERCHANTLIST', [{ lon: that.longitude, lat: that.latitude, search: { type_id: id } }]] //子级
|
||||
},
|
||||
callback: function(data) {
|
||||
var res = fns.checkError(data, 's', function(errno, error) {
|
||||
fns.err(error);
|
||||
});
|
||||
|
||||
that.sjnumber = data.data.s.data.data;
|
||||
|
||||
console.log('分类', data);
|
||||
},
|
||||
error: function(err) {
|
||||
fns.err('加载失败', err, 1);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
//二维码
|
||||
scanCode() {
|
||||
var _this = this;
|
||||
uni.showToast({
|
||||
// #ifdef APP-PLUS
|
||||
title: '这是APP',
|
||||
icon: 'none',
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
title: '这是H5',
|
||||
icon: 'none',
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
title: '这是小程序',
|
||||
icon: 'none',
|
||||
// #endif
|
||||
success() {
|
||||
setTimeout(function() {}, 1500);
|
||||
}
|
||||
});
|
||||
uni.scanCode({
|
||||
onlyFromCamera: true,
|
||||
success: function(res) {
|
||||
if (res.result) {
|
||||
var data = JSON.parse(res.result);
|
||||
console.log('res:', data);
|
||||
if (!data.errno) {
|
||||
if (data.type != 'merchant_money_plus') {
|
||||
uni.showToast({
|
||||
title: '该二维码非收款二维码'
|
||||
});
|
||||
} else if (data.data.merchant_id) {
|
||||
_this.merchant_id = data.data.merchant_id;
|
||||
|
||||
if (data.data && data.data.user_id) {
|
||||
var user_id = data.data.user_id;
|
||||
} else {
|
||||
var user_id = '';
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '../../pagesB/payUser/payUser?mch_id=' + data.data.merchant_id + '&user_id=' + data.data.user_id
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '扫码失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: data.error,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="stylus" ref="stylesheet/stylus">
|
||||
.content
|
||||
width 100%
|
||||
overflow hidden
|
||||
.title-box
|
||||
display flex
|
||||
justify-content center // 水平居中
|
||||
align-items center // 垂直居中
|
||||
flex-direction row // 左到右
|
||||
width 750upx
|
||||
padding 0 20upx
|
||||
height 100upx
|
||||
.scan
|
||||
width 40upx
|
||||
height 40upx
|
||||
.input-box
|
||||
// margin-left 20upx
|
||||
width 700upx
|
||||
height 58upx
|
||||
// border 1upx solid #d3d3d3
|
||||
border-radius 50upx
|
||||
.search
|
||||
display inline-block
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
.input
|
||||
width 80%
|
||||
display inline-block
|
||||
font-size 28upx
|
||||
text-align center
|
||||
// text-align left
|
||||
line-height 100%
|
||||
height 100%
|
||||
.chat
|
||||
flex 1
|
||||
.topTitle
|
||||
width 100%
|
||||
height 80upx
|
||||
display flex
|
||||
align-items center // 垂直居中
|
||||
flex-direction row
|
||||
padding 0 20upx
|
||||
color #333
|
||||
font-size 30upx
|
||||
.topText{
|
||||
margin-left 10upx
|
||||
}
|
||||
.leftBox
|
||||
width 300upx
|
||||
text-align right
|
||||
.checkGroup{
|
||||
padding-left 26upx
|
||||
margin-bottom 10upx
|
||||
font-size 30upx
|
||||
.uni-label-pointer {
|
||||
margin-right 16upx
|
||||
}
|
||||
}
|
||||
.classification
|
||||
height 80upx
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center // 垂直居中
|
||||
flex-direction row
|
||||
font-size 28upx
|
||||
.typeList
|
||||
text-align center
|
||||
line-height 80upx
|
||||
border 1px solid #d3d3d3
|
||||
width 50%
|
||||
height 100%
|
||||
position relative
|
||||
.typeList:before
|
||||
content ""
|
||||
position absolute
|
||||
top 34upx
|
||||
right 66upx
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-left: 12upx solid transparent;
|
||||
border-right: 12upx solid transparent;
|
||||
border-top: 12upx solid #bfbfbf;
|
||||
.allClassification{
|
||||
border-left 0
|
||||
}
|
||||
.city{
|
||||
border-right 0
|
||||
}
|
||||
.place
|
||||
font-size 30upx
|
||||
height 100upx
|
||||
text-align left
|
||||
line-height 100upx
|
||||
border-bottom 1px solid #d3d3d3
|
||||
padding-left 20px
|
||||
.shop-box, width 100%
|
||||
height auto
|
||||
.shop
|
||||
height 200upx
|
||||
border-bottom 1px solid #eee
|
||||
display flex
|
||||
align-items center
|
||||
justify-content flex-start
|
||||
flex-direction row
|
||||
.image
|
||||
width 160upx
|
||||
height 160upx
|
||||
margin-left 25upx
|
||||
border-radius 50%
|
||||
.shopText
|
||||
width 500upx
|
||||
height 220upx
|
||||
margin-left 25upx
|
||||
padding-top 25upx
|
||||
.name
|
||||
color #333
|
||||
font-weight 600
|
||||
font-size 30upx
|
||||
width 100%
|
||||
height 30px
|
||||
.evaluate
|
||||
font-size 20upx
|
||||
margin-top 20upx
|
||||
.bottomInformation
|
||||
align-items center
|
||||
justify-content space-between
|
||||
flex-direction row
|
||||
width 100%
|
||||
color #333
|
||||
font-size 28upx
|
||||
.crux
|
||||
width 240upx
|
||||
display inline-block
|
||||
.distance
|
||||
width calc(100% - 250upx)
|
||||
float right
|
||||
text-align right
|
||||
margin-top 30upx
|
||||
.icoimg
|
||||
width 48upx
|
||||
height 48upx
|
||||
</style>
|
||||
<style>
|
||||
.search-weixin-input {
|
||||
font-size: 28upx;
|
||||
background: #f5f5f5;
|
||||
height: 60upx;
|
||||
width: 90%;
|
||||
border-radius: 50upx;
|
||||
text-align: center;
|
||||
}
|
||||
.search-weixin {
|
||||
background: #ffffff;
|
||||
height: 80upx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-bottom: 1upx solid #eeeeee;
|
||||
position: fixed;
|
||||
}
|
||||
.sortBox {
|
||||
position: fixed;
|
||||
width: 650upx;
|
||||
height: auto;
|
||||
padding-top: 20upx;
|
||||
padding-bottom: 40upx;
|
||||
top: 25vh;
|
||||
background-color: #ffffff;
|
||||
margin-left: 50upx;
|
||||
font-size: 28upx;
|
||||
border: #e3e3e3 solid 3upx;
|
||||
border-radius: 25upx;
|
||||
z-index: 1000;
|
||||
}
|
||||
.sortBox-title {
|
||||
width: 610upx;
|
||||
padding: 20upx 20upx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.sortBoxBox {
|
||||
width: 610upx;
|
||||
padding: 20upx 20upx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.sortRight {
|
||||
width: auto;
|
||||
padding-bottom: 20upx;
|
||||
height: auto;
|
||||
}
|
||||
.sortRight text {
|
||||
padding: 10upx;
|
||||
border: #cccccc solid 1upx;
|
||||
border-radius: 10upx;
|
||||
color: #dd524d;
|
||||
margin-left: 20upx;
|
||||
float: left;
|
||||
margin-bottom: 10upx;
|
||||
}
|
||||
.getPosition {
|
||||
height: 100upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32upx;
|
||||
background-color: #fff;
|
||||
}
|
||||
.getPosition-weixin {
|
||||
height: 90upx;
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
}
|
||||
.getPosition-top {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
581
mallplusui-uniapp-wx/pages/index/secskill.vue
Normal file
581
mallplusui-uniapp-wx/pages/index/secskill.vue
Normal file
@@ -0,0 +1,581 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 小程序头部兼容 -->
|
||||
<!-- #ifdef MP -->
|
||||
<view class="mp-search-box" @click="search()"><input class="ser-input" type="text" value="输入关键字搜索" /></view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- 头部轮播 -->
|
||||
<view class="carousel-section">
|
||||
<!-- 标题栏和状态栏占位符 -->
|
||||
<view class="titleNview-placing"></view>
|
||||
<!-- 背景色区域 -->
|
||||
<view class="titleNview-background" :style="{ backgroundColor: titleNViewBackground }"></view>
|
||||
<swiper class="carousel" circular @change="swiperChange">
|
||||
<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToDetailPage({ title: '轮播广告' })">
|
||||
<image :src="item.pic" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- 自定义swiper指示器 -->
|
||||
<view class="swiper-dots">
|
||||
<text class="num">{{ swiperCurrent + 1 }}</text>
|
||||
<text class="sign">/</text>
|
||||
<text class="num">{{ swiperLength }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="ad-1"><image src="/static/temp/ad1.jpg" mode="scaleToFill"></image></view>
|
||||
|
||||
<!-- 秒杀楼层 -->
|
||||
<view class="seckill-section m-t" v-if="item1.flashSessionInfoList.length > 0" v-for="(item1, index1) in groupHotGoodsList" :key="index1">
|
||||
<view class="s-header">
|
||||
<image class="s-img" src="/static/temp/secskill-img.jpg" mode="widthFix"></image>
|
||||
<text class="tip">{{ item1.flashName }}</text>
|
||||
</view>
|
||||
<view v-if="item2.productList.length > 0" v-for="(item2, index2) in item1.flashSessionInfoList" :key="index1">
|
||||
<view class="s-header">
|
||||
<text class="tip">{{ item2.startTime }}</text>
|
||||
<text class="tip">～</text>
|
||||
<text class="tip">{{ item2.endTime }}</text>
|
||||
</view>
|
||||
<scroll-view class="floor-list" scroll-x>
|
||||
<view class="scoll-wrapper">
|
||||
<view v-for="(item4, index3) in item2.productList" :key="index3" class="floor-item" @click="navToDetailPage(item4)" >
|
||||
<image :src="item4.productImg" mode="aspectFill" ></image>
|
||||
<text class="title clamp">{{ item4.productName }}</text>
|
||||
<text class="price clamp">秒杀价 ￥{{ item4.flashPromotionPrice }}</text>
|
||||
<text class="price clamp">原价 ￥{{ item4.productPrice }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import { formatDate } from '@/common/date';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
titleNViewBackground: '',
|
||||
swiperCurrent: 0,
|
||||
swiperLength: 0,
|
||||
carouselList: [],
|
||||
hotProductList: [],
|
||||
brandList: [], // 推荐品牌
|
||||
homeFlashPromotion: [], // 当前秒杀场次
|
||||
subjectList: [], //推荐专题
|
||||
cat_list: [],
|
||||
homeFlashPromotion: [],
|
||||
groupHotGoodsList: [],
|
||||
newProductList: []
|
||||
};
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 请求静态数据只是为了代码不那么乱
|
||||
* 分次请求未作整合
|
||||
*/
|
||||
async loadData() {
|
||||
this.logining = true;
|
||||
let params = {};
|
||||
let groupHotGoodsList = await Api.apiCall('get', Api.index.homeFlashPromotionList, params);
|
||||
this.groupHotGoodsList = groupHotGoodsList;
|
||||
|
||||
let advertiseList = await Api.apiCall('get', Api.index.bannerList, params);
|
||||
console.log(advertiseList);
|
||||
this.carouselList = advertiseList || [];
|
||||
this.swiperLength = this.carouselList.length;
|
||||
this.logining = false;
|
||||
},
|
||||
//轮播图切换修改背景色
|
||||
swiperChange(e) {
|
||||
const index = e.detail.current;
|
||||
this.swiperCurrent = index;
|
||||
this.titleNViewBackground = this.carouselList[index].background;
|
||||
},
|
||||
navToTabPage(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
},
|
||||
//详情页
|
||||
navToDetailPage(id) {
|
||||
console.log(id);
|
||||
|
||||
uni.navigateTo({
|
||||
url: `../../pagesA/product/secskillDetail?id=${id}`
|
||||
});
|
||||
},
|
||||
navToList() {
|
||||
uni.navigateTo({
|
||||
url: `../../pagesA/product/list`
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
search() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/search/search'
|
||||
});
|
||||
},
|
||||
|
||||
// 标题栏input搜索框点击
|
||||
onNavigationBarSearchInputClicked: async function(e) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/search/search'
|
||||
});
|
||||
},
|
||||
//点击导航栏 buttons 时触发
|
||||
onNavigationBarButtonTap(e) {
|
||||
const index = e.index;
|
||||
if (index === 0) {
|
||||
// this.$api.msg('点击了扫描');
|
||||
} else if (index === 1) {
|
||||
// #ifdef APP-PLUS
|
||||
const pages = getCurrentPages();
|
||||
const page = pages[pages.length - 1];
|
||||
const currentWebview = page.$getAppWebview();
|
||||
currentWebview.hideTitleNViewButtonRedDot({
|
||||
index
|
||||
});
|
||||
// #endif
|
||||
uni.navigateTo({
|
||||
url: '../../pagesU/notice/notice'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mp-search-box {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 30upx;
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
padding: 0 80upx;
|
||||
.ser-input {
|
||||
flex: 1;
|
||||
height: 56upx;
|
||||
line-height: 56upx;
|
||||
text-align: center;
|
||||
font-size: 28upx;
|
||||
color: $font-color-base;
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
page {
|
||||
.cate-section {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
border-radius: 16upx 16upx 0 0;
|
||||
margin-top: -20upx;
|
||||
}
|
||||
.carousel-section {
|
||||
padding: 0;
|
||||
.titleNview-placing {
|
||||
padding-top: 0;
|
||||
height: 0;
|
||||
}
|
||||
.carousel {
|
||||
.carousel-item {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.swiper-dots {
|
||||
left: 45upx;
|
||||
bottom: 40upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
page {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.m-t {
|
||||
margin-top: 16upx;
|
||||
}
|
||||
/* 头部 轮播图 */
|
||||
.carousel-section {
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
|
||||
.titleNview-placing {
|
||||
height: var(--status-bar-height);
|
||||
padding-top: 44px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.titleNview-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 426upx;
|
||||
transition: 0.4s;
|
||||
}
|
||||
}
|
||||
.carousel {
|
||||
width: 100%;
|
||||
height: 350upx;
|
||||
|
||||
.carousel-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 28upx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10upx;
|
||||
}
|
||||
}
|
||||
.swiper-dots {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 60upx;
|
||||
bottom: 15upx;
|
||||
width: 72upx;
|
||||
height: 36upx;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==);
|
||||
background-size: 100% 100%;
|
||||
|
||||
.num {
|
||||
width: 36upx;
|
||||
height: 36upx;
|
||||
border-radius: 50px;
|
||||
font-size: 24upx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 36upx;
|
||||
}
|
||||
|
||||
.sign {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
line-height: 36upx;
|
||||
font-size: 12upx;
|
||||
color: #fff;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
/* 分类 */
|
||||
.cate-section {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 30upx 22upx;
|
||||
background: #fff;
|
||||
.cate-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
/* 原图标颜色太深,不想改图了,所以加了透明度 */
|
||||
image {
|
||||
width: 88upx;
|
||||
height: 88upx;
|
||||
margin-bottom: 14upx;
|
||||
border-radius: 50%;
|
||||
opacity: 0.7;
|
||||
box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
|
||||
}
|
||||
}
|
||||
.ad-1 {
|
||||
width: 100%;
|
||||
height: 210upx;
|
||||
padding: 10upx 0;
|
||||
background: #fff;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
/* 秒杀专区 */
|
||||
.seckill-section {
|
||||
padding: 4upx 30upx 24upx;
|
||||
background: #fff;
|
||||
.s-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 92upx;
|
||||
line-height: 1;
|
||||
.s-img {
|
||||
width: 140upx;
|
||||
height: 30upx;
|
||||
}
|
||||
.tip {
|
||||
font-size: $font-base;
|
||||
color: $font-color-light;
|
||||
margin: 0 20upx 0 40upx;
|
||||
}
|
||||
.timer {
|
||||
display: inline-block;
|
||||
width: 40upx;
|
||||
height: 36upx;
|
||||
text-align: center;
|
||||
line-height: 36upx;
|
||||
margin-right: 14upx;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.icon-you {
|
||||
font-size: $font-lg;
|
||||
color: $font-color-light;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.floor-list {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.scoll-wrapper {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.floor-item {
|
||||
width: 250upx;
|
||||
margin-right: 20upx;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-dark;
|
||||
line-height: 1.8;
|
||||
image {
|
||||
width: 250upx;
|
||||
height: 250upx;
|
||||
border-radius: 6upx;
|
||||
}
|
||||
.price {
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.f-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 140upx;
|
||||
padding: 6upx 30upx 8upx;
|
||||
background: #fff;
|
||||
image {
|
||||
flex-shrink: 0;
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
.tit-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.tit {
|
||||
font-size: $font-lg + 2upx;
|
||||
color: #font-color-dark;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.tit2 {
|
||||
font-size: $font-sm;
|
||||
color: $font-color-light;
|
||||
}
|
||||
.icon-you {
|
||||
font-size: $font-lg + 2upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
}
|
||||
/* 团购楼层 */
|
||||
.group-section {
|
||||
background: #fff;
|
||||
.g-swiper {
|
||||
height: 650upx;
|
||||
padding-bottom: 30upx;
|
||||
}
|
||||
.g-swiper-item {
|
||||
width: 100%;
|
||||
padding: 0 30upx;
|
||||
display: flex;
|
||||
}
|
||||
image {
|
||||
width: 100%;
|
||||
height: 460upx;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.g-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.left {
|
||||
flex: 1.2;
|
||||
margin-right: 24upx;
|
||||
.t-box {
|
||||
padding-top: 20upx;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
flex: 0.8;
|
||||
flex-direction: column-reverse;
|
||||
.t-box {
|
||||
padding-bottom: 20upx;
|
||||
}
|
||||
}
|
||||
.t-box {
|
||||
height: 160upx;
|
||||
font-size: $font-base + 2upx;
|
||||
color: $font-color-dark;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.price {
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
.m-price {
|
||||
font-size: $font-sm + 2upx;
|
||||
text-decoration: line-through;
|
||||
color: $font-color-light;
|
||||
margin-left: 8upx;
|
||||
}
|
||||
.pro-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10upx;
|
||||
font-size: $font-sm;
|
||||
color: $font-base;
|
||||
padding-right: 10upx;
|
||||
}
|
||||
.progress-box {
|
||||
flex: 1;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin-right: 8upx;
|
||||
}
|
||||
}
|
||||
/* 分类推荐楼层 */
|
||||
.hot-floor {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20upx;
|
||||
.floor-img-box {
|
||||
width: 100%;
|
||||
height: 320upx;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8);
|
||||
}
|
||||
}
|
||||
.floor-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.floor-list {
|
||||
white-space: nowrap;
|
||||
padding: 20upx;
|
||||
padding-right: 50upx;
|
||||
border-radius: 6upx;
|
||||
margin-top: -140upx;
|
||||
margin-left: 30upx;
|
||||
background: #fff;
|
||||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.scoll-wrapper {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.floor-item {
|
||||
width: 180upx;
|
||||
margin-right: 20upx;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-dark;
|
||||
line-height: 1.8;
|
||||
image {
|
||||
width: 180upx;
|
||||
height: 180upx;
|
||||
border-radius: 6upx;
|
||||
}
|
||||
.price {
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
.more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
width: 180upx;
|
||||
height: 180upx;
|
||||
border-radius: 6upx;
|
||||
background: #f3f3f3;
|
||||
font-size: $font-base;
|
||||
color: $font-color-light;
|
||||
text:first-child {
|
||||
margin-bottom: 4upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 猜你喜欢 */
|
||||
.guess-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 30upx;
|
||||
background: #fff;
|
||||
.guess-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 {
|
||||
font-size: $font-lg;
|
||||
color: $uni-color-primary;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
771
mallplusui-uniapp-wx/pages/index/user.vue
Normal file
771
mallplusui-uniapp-wx/pages/index/user.vue
Normal file
@@ -0,0 +1,771 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="user-section">
|
||||
<image class="bg" src="/static/user-bg.jpg"></image>
|
||||
<view class="user-info-box">
|
||||
<view class="member-top-c">
|
||||
<template v-if="userDetailInfo && userDetailInfo.id">
|
||||
<view class="" style="display: flex;align-items: center;">
|
||||
<image class="portrait" mode="aspectFill" :src="userDetailInfo.icon" @click="toUserInfo"></image>
|
||||
<view class="user-name" style="margin-left: 10upx;color: #FFFFFF;" @click="toUserInfo">{{ userDetailInfo.nickname || userDetailInfo.username }}</view>
|
||||
<view v-if="userDetailInfo.storeId" class="vip-card-box1" @click="toNav('../../pagesC/seller/index')"><view class="b-btn">卖家中心</view></view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- #ifdef H5 || APP-PLUS -->
|
||||
<image class="portrait" mode="aspectFill" src="/static/missing-face.png" @click="toLogin"></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<image class="portrait" mode="aspectFill" src="/static/missing-face.png" @click="toWeChatLogin"></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<view class="portrait"></view>
|
||||
<view><button class="login-btn" open-type="getAuthorize" @click="getALICode" hover-class="btn-hover">授权登录</button></view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="vip-card-box" @click="toNav('../../pagesU/user/applyMember')">
|
||||
<image class="card-bg" src="/static/vip-card-bg.png" mode=""></image>
|
||||
<view class="b-btn">立即升级</view>
|
||||
<view class="tit" v-if="userDetailInfo">
|
||||
<text class="yticon icon-iLinkapp-"></text>
|
||||
{{ userDetailInfo.memberLevelName || '开通会员' }}
|
||||
</view>
|
||||
<text class="e-m">Mallplus</text>
|
||||
<text class="e-b">升级会员享受更多折扣 一测就上线</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="cover-container"
|
||||
:style="[
|
||||
{
|
||||
transform: coverTransform,
|
||||
transition: coverTransition
|
||||
}
|
||||
]"
|
||||
@touchstart="coverTouchstart"
|
||||
@touchmove="coverTouchmove"
|
||||
@touchend="coverTouchend"
|
||||
>
|
||||
<image class="arc" src="/static/arc.png"></image>
|
||||
|
||||
<view class="tj-sction">
|
||||
<view class="tj-item" @click="toNav('../../pagesU/user/deposit')">
|
||||
<text class="num">{{ userDetailInfo.blance || 0 }}</text>
|
||||
<text>余额</text>
|
||||
</view>
|
||||
<view class="tj-item" @click="toNav('../../pagesU/user/coupon')">
|
||||
<text class="num">{{ couponList.length || 0 }}</text>
|
||||
<text>优惠券</text>
|
||||
</view>
|
||||
<view class="tj-item" @click="toNav('/pages/integral/home/home')">
|
||||
<text class="num">{{ userDetailInfo.integration || 0 }}</text>
|
||||
<text>积分</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 订单 -->
|
||||
<view class="order-section">
|
||||
<view class="order-item" @click="navTo('/pages/order/order?status=0')" hover-class="common-hover" :hover-stay-time="50">
|
||||
<text class="yticon icon-shouye"></text>
|
||||
<text>全部订单</text>
|
||||
</view>
|
||||
<view class="order-item" @click="navTo('/pages/order/order?status=2')" hover-class="common-hover" :hover-stay-time="50">
|
||||
<text class="yticon icon-daifukuan"></text>
|
||||
<text>待付款</text>
|
||||
</view>
|
||||
<view class="order-item" @click="navTo('/pages/order/order?status=3')" hover-class="common-hover" :hover-stay-time="50">
|
||||
<text class="yticon icon-yishouhuo"></text>
|
||||
<text>待收货</text>
|
||||
</view>
|
||||
|
||||
<view class="order-item" @click="navTo('../../pagesA/after_sale/list')" hover-class="common-hover" :hover-stay-time="50">
|
||||
<text class="yticon icon-shouhoutuikuan"></text>
|
||||
<text>退款/售后</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 浏览历史 -->
|
||||
<view class="history-section icon">
|
||||
<view class="sec-header" v-if="viewList && viewList.length > 0">
|
||||
<text class="yticon icon-lishijilu"></text>
|
||||
<text>浏览历史</text>
|
||||
</view>
|
||||
<scroll-view scroll-x class="h-list" v-if="viewList && viewList.length > 0">
|
||||
<image v-for="(item, index) in viewList" :key="index" @click="navToDetailPage(item)" :src="item.pic" mode="aspectFill"></image>
|
||||
</scroll-view>
|
||||
<!--<list-cell icon="icon-iconfontweixin" iconColor="#e07472" title="我的钱包" tips="您的会员还有3天过期"></list-cell>-->
|
||||
<list-cell icon="icon-dizhi" iconColor="#5fcda2" title="地址管理" @eventClick="navTo('../../pagesU/address/address')"></list-cell>
|
||||
<list-cell icon="icon-tuandui" iconColor="#EE82EE" title="个人资料" @eventClick="navTo('../../pagesU/user/profile')"></list-cell>
|
||||
<!--<list-cell icon="icon-share" iconColor="#9789f7" title="分享" tips="邀请好友赢10万大礼"></list-cell>
|
||||
<list-cell icon="icon-pinglun-copy" iconColor="#ee883b" title="晒单" tips="晒单抢红包"></list-cell>-->
|
||||
<list-cell icon="icon-shoucang_xuanzhongzhuangtai" iconColor="#54b4ef" title="我的收藏" @eventClick="navTo('../../pagesU/user/collect')"></list-cell>
|
||||
<list-cell
|
||||
icon="icon-share cgtt"
|
||||
iconColor="#0e68d7"
|
||||
v-if="!userDetailInfo.storeId"
|
||||
title="商户入驻"
|
||||
@eventClick="navTo('../../pagesC/store/applyBusiness')"
|
||||
></list-cell>
|
||||
<list-cell
|
||||
icon="icon-share cgtt"
|
||||
iconColor="#0e68d7"
|
||||
v-if="userDetailInfo.storeId"
|
||||
title="商户主页"
|
||||
@eventClick="navTo(`../../pagesC/store/businessDetails?id=${userDetailInfo.storeId}`)"
|
||||
></list-cell>
|
||||
|
||||
<list-cell
|
||||
icon="icon-shoucang_xuanzhongzhuangtai cgtt"
|
||||
iconColor="#0e68d7"
|
||||
v-if="!userDetailInfo.roomNums"
|
||||
title="绑定社区"
|
||||
@eventClick="navTo('../../pagesA/build/bindCommunity')"
|
||||
></list-cell>
|
||||
<list-cell
|
||||
icon="icon-shoucang_xuanzhongzhuangtai cgtt"
|
||||
iconColor="#0e68d7"
|
||||
v-if="userDetailInfo.roomNums"
|
||||
title="社区主页"
|
||||
@eventClick="navTo('../../pagesA/build/community')"
|
||||
></list-cell>
|
||||
<list-cell
|
||||
icon="icon-pinglun-copy"
|
||||
iconColor="#0e68d7"
|
||||
title="我的邀请码"
|
||||
:tips="userDetailInfo.id + ''"
|
||||
@eventClick="navTo('../../pagesU/user/invite')"
|
||||
></list-cell>
|
||||
<list-cell icon="icon-pinglun-copy" iconColor="#0e68d7" v-if="!userDetailInfo.invitecode" title="推荐邀请码" @eventClick="inputShowModal('invitecode')"></list-cell>
|
||||
<list-cell icon="icon-shezhi1" iconColor="#e07472" title="系统设置" border="" @eventClick="navTo('/pages/set/set')"></list-cell>
|
||||
<!-- <list-cell icon="icon-shezhi1" iconColor="#e07472" title="test" border="" @eventClick="navTo('/pages/search/test')"></list-cell> -->
|
||||
</view>
|
||||
</view>
|
||||
<neil-modal :show="inputShow" @close="cancel" title="编辑" @cancel="cancel" @confirm="confirm">
|
||||
<input v-model="inputContent" style="margin:20upx" placeholder="请输入..." />
|
||||
</neil-modal>
|
||||
<mallplusCopyright></mallplusCopyright>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import listCell from '@/components/mix-list-cell';
|
||||
import neilModal from '@/components/neil-modal.vue';
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
let startY = 0,
|
||||
moveY = 0,
|
||||
pageAtTop = true;
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright,
|
||||
listCell,
|
||||
neilModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputShow: false,
|
||||
feild: undefined,
|
||||
inputContent: '',
|
||||
coverTransform: 'translateY(0px)',
|
||||
coverTransition: '0s',
|
||||
moving: false,
|
||||
userDetailInfo: {
|
||||
blance: 0,
|
||||
integration: 0
|
||||
},
|
||||
|
||||
couponList: [],
|
||||
viewList: []
|
||||
};
|
||||
},
|
||||
|
||||
async onLoad() {
|
||||
this.getData();
|
||||
},
|
||||
async onShow() {
|
||||
this.getData();
|
||||
},
|
||||
|
||||
// #ifndef MP
|
||||
onNavigationBarButtonTap(e) {
|
||||
const index = e.index;
|
||||
if (index === 0) {
|
||||
this.navTo('/pages/set/set');
|
||||
} else if (index === 1) {
|
||||
// #ifdef APP-PLUS
|
||||
const pages = getCurrentPages();
|
||||
const page = pages[pages.length - 1];
|
||||
const currentWebview = page.$getAppWebview();
|
||||
currentWebview.hideTitleNViewButtonRedDot({
|
||||
index
|
||||
});
|
||||
// #endif
|
||||
uni.navigateTo({
|
||||
url: '../../pagesU/notice/notice'
|
||||
});
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
|
||||
computed: {
|
||||
...mapState(['hasLogin', 'userInfo']),
|
||||
// 获取店铺联系人手机号
|
||||
kfmobile() {
|
||||
return '13146587722' || 0;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['logout']),
|
||||
|
||||
inputShowModal(feild) {
|
||||
this.feild = feild;
|
||||
this.inputShow = true;
|
||||
this.inputContent = '';
|
||||
},
|
||||
cancel() {
|
||||
this.inputShow = false;
|
||||
},
|
||||
|
||||
confirm() {
|
||||
const that = this;
|
||||
if (!that.inputContent) {
|
||||
that.$api.msg('输入不能为空');
|
||||
return;
|
||||
}
|
||||
let obj = { id: this.userDetailInfo.id };
|
||||
obj[that.feild] = that.inputContent;
|
||||
Api.apiCall('post', Api.member.updateMember, obj);
|
||||
that.$api.msg('修改成功');
|
||||
that.userInfos[that.feild] = that.inputContent;
|
||||
},
|
||||
async getData() {
|
||||
this.getuserinfo();
|
||||
this.getHistory();
|
||||
},
|
||||
// 获取用户信息
|
||||
async getuserinfo() {
|
||||
let params = {};
|
||||
let data1 = await Api.apiCall('get', Api.index.userInfo, params);
|
||||
if (!data1) {
|
||||
this.userDetailInfo = {};
|
||||
}
|
||||
this.userDetailInfo = data1.member;
|
||||
if (!data1.member) {
|
||||
this.logout();
|
||||
} else {
|
||||
uni.setStorageSync('userInfos', data1.member);
|
||||
console.log(this.userDetailInfo);
|
||||
let couponList = data1.histories;
|
||||
this.couponList = couponList;
|
||||
}
|
||||
},
|
||||
// 获取浏览历史
|
||||
async getHistory() {
|
||||
if (this.hasLogin) {
|
||||
let params = {};
|
||||
let data = await Api.apiCall('get', Api.goods.viewList, params);
|
||||
this.viewList = data.result;
|
||||
}
|
||||
},
|
||||
|
||||
toNav(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
},
|
||||
toUserInfo() {
|
||||
uni.navigateTo({
|
||||
url: '../../pagesU/user/profile'
|
||||
});
|
||||
},
|
||||
|
||||
toWeChatLogin() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/public/login'
|
||||
});
|
||||
},
|
||||
|
||||
//详情页
|
||||
navToDetailPage(item) {
|
||||
//测试数据没有写id，用title代替
|
||||
let id = item.id;
|
||||
uni.navigateTo({
|
||||
url: `../../pagesA/product/product?id=${id}`
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 统一跳转接口,拦截未登录路由
|
||||
* navigator标签现在默认没有转场动画，所以用view
|
||||
*/
|
||||
navTo(url) {
|
||||
if (!this.hasLogin) {
|
||||
url = '/pages/public/login';
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 会员卡下拉和回弹
|
||||
* 1.关闭bounce避免ios端下拉冲突
|
||||
* 2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
|
||||
* transition设置0.1秒延迟，让css来过渡这段空窗期
|
||||
* 3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
|
||||
*/
|
||||
coverTouchstart(e) {
|
||||
if (pageAtTop === false) {
|
||||
return;
|
||||
}
|
||||
this.coverTransition = 'transform .1s linear';
|
||||
startY = e.touches[0].clientY;
|
||||
},
|
||||
coverTouchmove(e) {
|
||||
moveY = e.touches[0].clientY;
|
||||
let moveDistance = moveY - startY;
|
||||
if (moveDistance < 0) {
|
||||
this.moving = false;
|
||||
return;
|
||||
}
|
||||
this.moving = true;
|
||||
if (moveDistance >= 80 && moveDistance < 100) {
|
||||
moveDistance = 80;
|
||||
}
|
||||
|
||||
if (moveDistance > 0 && moveDistance <= 80) {
|
||||
this.coverTransform = `translateY(${moveDistance}px)`;
|
||||
}
|
||||
},
|
||||
coverTouchend() {
|
||||
if (this.moving === false) {
|
||||
return;
|
||||
}
|
||||
this.moving = false;
|
||||
this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
|
||||
this.coverTransform = 'translateY(0px)';
|
||||
},
|
||||
getUserInfo(e) {
|
||||
let _this = this;
|
||||
//return false;
|
||||
console.log('eeeee', e);
|
||||
if (e.detail.errMsg == 'getUserInfo:fail auth deny') {
|
||||
_this.$common.errorToShow('未授权');
|
||||
} else {
|
||||
var data = {
|
||||
open_id: _this.open_id,
|
||||
iv: e.detail.iv,
|
||||
edata: e.detail.encryptedData,
|
||||
signature: e.detail.signature
|
||||
};
|
||||
//有推荐码的话，带上
|
||||
var invitecode = _this.$db.get('invitecode');
|
||||
if (invitecode) {
|
||||
data.invitecode = invitecode;
|
||||
}
|
||||
_this.toWxLogin(data);
|
||||
}
|
||||
},
|
||||
getALICode() {
|
||||
let that = this;
|
||||
uni.login({
|
||||
scopes: 'auth_user',
|
||||
success: res => {
|
||||
if (res.authCode) {
|
||||
uni.getUserInfo({
|
||||
provider: 'alipay',
|
||||
success: function(infoRes) {
|
||||
if (infoRes.errMsg == 'getUserInfo:ok') {
|
||||
let user_info = {
|
||||
nickname: infoRes.nickName,
|
||||
avatar: infoRes.avatar
|
||||
};
|
||||
that.aLiLoginStep1(res.authCode, user_info);
|
||||
}
|
||||
},
|
||||
fail: function(errorRes) {
|
||||
this.$common.errorToShow('未取得用户昵称头像信息');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$common.errorToShow('未取得code');
|
||||
}
|
||||
},
|
||||
fail: function(res) {
|
||||
this.$common.errorToShow('用户授权失败my.login');
|
||||
}
|
||||
});
|
||||
},
|
||||
getWxCode(e) {
|
||||
console.log('-------', e);
|
||||
let that = this;
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: function(res) {
|
||||
if (res.code) {
|
||||
console.log(res.code);
|
||||
that.wxLoginStep1(res.code);
|
||||
} else {
|
||||
this.$common.errorToShow('未取得code');
|
||||
}
|
||||
},
|
||||
fail: function(res) {
|
||||
this.$common.errorToShow('用户授权失败wx.login');
|
||||
}
|
||||
});
|
||||
},
|
||||
wxLoginStep1(code) {
|
||||
var data = {
|
||||
code: code
|
||||
};
|
||||
this.$api.login1(data, res => {
|
||||
if (res.status) {
|
||||
this.open_id = res.data;
|
||||
|
||||
this.getUserInfo();
|
||||
} else {
|
||||
this.$common.errorToShow(res.msg, function() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
aLiLoginStep1(code, user_info) {
|
||||
let data = {
|
||||
code: code,
|
||||
user_info: user_info
|
||||
};
|
||||
this.$api.alilogin1(data, res => {
|
||||
this.alipayNoLogin = false;
|
||||
if (res.status) {
|
||||
this.open_id = res.data.user_wx_id;
|
||||
//判断是否返回了token，如果没有，就说明没有绑定账号，跳转到绑定页面
|
||||
if (!res.data.hasOwnProperty('token')) {
|
||||
this.$common.redirectTo('/pages/public/index?user_wx_id=' + res.data.user_wx_id);
|
||||
} else {
|
||||
this.$db.set('userToken', res.data.token);
|
||||
this.initData();
|
||||
}
|
||||
} else {
|
||||
this.$common.errorToShow(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
toWxLogin(data) {
|
||||
console.log('----------data---------', data);
|
||||
let _this = this;
|
||||
_this.$api.login2(data, function(res) {
|
||||
if (res.status) {
|
||||
//判断是否返回了token，如果没有，就说明没有绑定账号，跳转到绑定页面
|
||||
if (typeof res.data.token == 'undefined') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/public/index?user_wx_id=' + res.data.user_wx_id
|
||||
});
|
||||
} else {
|
||||
_this.$db.set('userToken', res.data.token);
|
||||
_this.initData();
|
||||
}
|
||||
} else {
|
||||
_this.$common.errorToShow('登录失败，请重试');
|
||||
}
|
||||
});
|
||||
},
|
||||
toLogin() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/public/login'
|
||||
});
|
||||
}, //在线客服,只有手机号的，请自己替换为手机号
|
||||
showChat() {
|
||||
// #ifdef H5
|
||||
let _this = this;
|
||||
window._AIHECONG('ini', {
|
||||
entId: this.config.ent_id,
|
||||
button: false,
|
||||
appearance: {
|
||||
panelMobile: {
|
||||
tone: '#FF7159',
|
||||
sideMargin: 30,
|
||||
ratio: 'part',
|
||||
headHeight: 50
|
||||
}
|
||||
}
|
||||
});
|
||||
//传递客户信息
|
||||
window._AIHECONG('customer', {
|
||||
head: _this.userInfo.avatar,
|
||||
名称: _this.userInfo.nickname,
|
||||
手机: _this.userInfo.mobile
|
||||
});
|
||||
window._AIHECONG('showChat');
|
||||
// #endif
|
||||
|
||||
// 拨打电话
|
||||
// #ifdef APP-PLUS
|
||||
if (this.kfmobile) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: '' + this.kfmobile,
|
||||
success: () => {
|
||||
// console.log("成功拨打电话")
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$common.errorToShow('商户未设置客服手机号');
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@font-face {
|
||||
font-family: cgtt;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
src: url('//at.alicdn.com/t/font_1475801_5innv59qqcr.ttf') format('truetype');
|
||||
}
|
||||
page {
|
||||
background: #f3f3f3;
|
||||
}
|
||||
.cgtt {
|
||||
font-family: 'cgtt' !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-userShare:before {
|
||||
content: '\c600';
|
||||
}
|
||||
|
||||
.icon-userJoin:before {
|
||||
content: '\c601';
|
||||
}
|
||||
|
||||
%flex-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
%section {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-content: center;
|
||||
background: #fff;
|
||||
border-radius: 10upx;
|
||||
}
|
||||
|
||||
.user-section {
|
||||
height: 520upx;
|
||||
padding: 100upx 30upx 0;
|
||||
position: relative;
|
||||
.bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: blur(1px);
|
||||
// opacity: 0.7;
|
||||
}
|
||||
}
|
||||
.user-info-box {
|
||||
height: 180upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.portrait {
|
||||
width: 130upx;
|
||||
height: 130upx;
|
||||
border: 5upx solid #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.username {
|
||||
font-size: $font-lg + 6upx;
|
||||
color: $font-color-dark;
|
||||
margin-left: 20upx;
|
||||
}
|
||||
}
|
||||
.login-btn {
|
||||
color: #fff;
|
||||
width: 180upx;
|
||||
height: 50upx;
|
||||
line-height: 50upx;
|
||||
border-radius: 25upx;
|
||||
background: #ff7159;
|
||||
font-size: 12px;
|
||||
}
|
||||
.vip-card-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #f7d680;
|
||||
height: 240upx;
|
||||
background: linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
|
||||
border-radius: 16upx 16upx 0 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 20upx 24upx;
|
||||
.card-bg {
|
||||
position: absolute;
|
||||
top: 20upx;
|
||||
right: 0;
|
||||
width: 380upx;
|
||||
height: 260upx;
|
||||
}
|
||||
.b-btn {
|
||||
position: absolute;
|
||||
right: 20upx;
|
||||
top: 16upx;
|
||||
width: 132upx;
|
||||
height: 40upx;
|
||||
text-align: center;
|
||||
line-height: 40upx;
|
||||
font-size: 22upx;
|
||||
color: #36343c;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(left, #f9e6af, #ffd465);
|
||||
z-index: 1;
|
||||
}
|
||||
.tit {
|
||||
font-size: $font-base + 2upx;
|
||||
color: #f7d680;
|
||||
margin-bottom: 28upx;
|
||||
.yticon {
|
||||
color: #f6e5a3;
|
||||
margin-right: 16upx;
|
||||
}
|
||||
}
|
||||
.e-b {
|
||||
font-size: $font-sm;
|
||||
color: #d8cba9;
|
||||
margin-top: 10upx;
|
||||
}
|
||||
}
|
||||
.vip-card-box1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #f7d680;
|
||||
height: 60upx;
|
||||
width: 160upx;
|
||||
background: linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
|
||||
border-radius: 16upx 16upx 0 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 20upx 24upx;
|
||||
|
||||
.b-btn {
|
||||
position: absolute;
|
||||
right: 10upx;
|
||||
top: 10upx;
|
||||
width: 132upx;
|
||||
height: 40upx;
|
||||
text-align: center;
|
||||
line-height: 40upx;
|
||||
font-size: 22upx;
|
||||
color: #36343c;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(left, #f9e6af, #ffd465);
|
||||
z-index: 1;
|
||||
}
|
||||
.tit {
|
||||
font-size: $font-base + 2upx;
|
||||
color: #f7d680;
|
||||
margin-bottom: 28upx;
|
||||
.yticon {
|
||||
color: #f6e5a3;
|
||||
margin-right: 16upx;
|
||||
}
|
||||
}
|
||||
.e-b {
|
||||
font-size: $font-sm;
|
||||
color: #d8cba9;
|
||||
margin-top: 10upx;
|
||||
}
|
||||
}
|
||||
.cover-container {
|
||||
background: $page-color-base;
|
||||
margin-top: -150upx;
|
||||
padding: 0 20upx;
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 20upx;
|
||||
.arc {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -34upx;
|
||||
width: 100%;
|
||||
height: 36upx;
|
||||
}
|
||||
}
|
||||
.tj-sction {
|
||||
@extend %section;
|
||||
.tj-item {
|
||||
@extend %flex-center;
|
||||
flex-direction: column;
|
||||
height: 140upx;
|
||||
font-size: $font-sm;
|
||||
color: #75787d;
|
||||
}
|
||||
.num {
|
||||
font-size: $font-lg;
|
||||
color: $font-color-dark;
|
||||
margin-bottom: 8upx;
|
||||
}
|
||||
}
|
||||
.order-section {
|
||||
@extend %section;
|
||||
padding: 28upx 0;
|
||||
margin-top: 20upx;
|
||||
.order-item {
|
||||
@extend %flex-center;
|
||||
width: 120upx;
|
||||
height: 120upx;
|
||||
border-radius: 10upx;
|
||||
font-size: $font-sm;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.yticon {
|
||||
font-size: 48upx;
|
||||
margin-bottom: 18upx;
|
||||
color: #fa436a;
|
||||
}
|
||||
.icon-shouhoutuikuan {
|
||||
font-size: 44upx;
|
||||
}
|
||||
}
|
||||
.history-section {
|
||||
padding: 30upx 0 0;
|
||||
margin-top: 20upx;
|
||||
background: #fff;
|
||||
border-radius: 10upx;
|
||||
.sec-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $font-base;
|
||||
color: $font-color-dark;
|
||||
line-height: 40upx;
|
||||
margin-left: 30upx;
|
||||
.yticon {
|
||||
font-size: 44upx;
|
||||
color: #5eba8f;
|
||||
margin-right: 16upx;
|
||||
line-height: 40upx;
|
||||
}
|
||||
}
|
||||
.h-list {
|
||||
white-space: nowrap;
|
||||
padding: 30upx 30upx 0;
|
||||
image {
|
||||
display: inline-block;
|
||||
width: 160upx;
|
||||
height: 160upx;
|
||||
margin-right: 20upx;
|
||||
border-radius: 10upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
115
mallplusui-uniapp-wx/pages/integral/home/home.css
Normal file
115
mallplusui-uniapp-wx/pages/integral/home/home.css
Normal file
@@ -0,0 +1,115 @@
|
||||
.top {}
|
||||
|
||||
.top-integral {
|
||||
font-size: 60upx;
|
||||
}
|
||||
|
||||
.top-bot {
|
||||
height: 100upx;
|
||||
margin-top: 40upx;
|
||||
background: rgba(255,255,255,0.12);
|
||||
}
|
||||
|
||||
.top-warn{
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
position: relative;
|
||||
left: 400upx;
|
||||
bottom: 100upx;
|
||||
}
|
||||
|
||||
.level{
|
||||
border: 1px solid #FFCC00;
|
||||
border-radius: 20upx;
|
||||
}
|
||||
|
||||
.bill {
|
||||
width: 33%;
|
||||
height: 100upx;
|
||||
}
|
||||
|
||||
.content-title{
|
||||
width: 100%;
|
||||
height: 100upx;
|
||||
}
|
||||
|
||||
|
||||
.hot-goods-content {
|
||||
width: 100%;
|
||||
/* padding: 0 1.5% 25upx 1.5%; */
|
||||
padding: 0 1.5%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-bottom: 20upx;
|
||||
/* justify-content: center; */
|
||||
}
|
||||
|
||||
.hot-goods-item {
|
||||
margin: 20upx 2% 0 2%;
|
||||
padding: 5upx 0;
|
||||
width: 46%;
|
||||
/* height: 430upx; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
border-bottom-right-radius: 8upx;
|
||||
border-bottom-left-radius: 8upx;
|
||||
box-shadow: 0upx 0px 15upx #FFEFDB;
|
||||
}
|
||||
|
||||
.hot-goods-item2 {
|
||||
margin: 20upx 2% 0 2%;
|
||||
width: 46%;
|
||||
padding: 5upx 0;
|
||||
/* height: 430upx; */
|
||||
height: 500upx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
border-bottom-right-radius: 8upx;
|
||||
border-bottom-left-radius: 8upx;
|
||||
/* box-shadow: 0upx 0px 15upx #FFEFDB; */
|
||||
}
|
||||
|
||||
.hot-goods-item:nth-child(2n-1) {
|
||||
margin-right: auto;
|
||||
|
||||
}
|
||||
|
||||
.hot-goods-image {
|
||||
width: 290upx;
|
||||
height: 290upx;
|
||||
margin-top: 3upx;
|
||||
}
|
||||
|
||||
.hot-goods-image-more {
|
||||
width: 150upx;
|
||||
height: 150upx;
|
||||
}
|
||||
|
||||
.hot-goods-name {
|
||||
margin-top: 10upx;
|
||||
font-size: 30upx;
|
||||
width: 94%;
|
||||
text-align: left;
|
||||
/* height: 100upx; */
|
||||
}
|
||||
|
||||
.hot-goods-more {
|
||||
margin-top: 5upx;
|
||||
margin-left: 10upx;
|
||||
font-size: 30upx;
|
||||
width: 94%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hot-goods-price {
|
||||
margin: 20upx 10upx 0 0;
|
||||
font-size: 30upx;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
166
mallplusui-uniapp-wx/pages/integral/home/home.vue
Normal file
166
mallplusui-uniapp-wx/pages/integral/home/home.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<view class="content column">
|
||||
<view class="top bg-green column with-100 align-height">
|
||||
<text class="font-bold top-integral text-while">{{integrals || 0}}</text>
|
||||
<view class="text-size-below-normal center-algin" style="margin-left: -40upx;">
|
||||
<image class="top-warn" src="/static/images/icon_sigh.png"></image>
|
||||
<text class="text-while">兑换余额</text>
|
||||
</view>
|
||||
<view class="top-bot row with-100">
|
||||
<view class="bill center-algin">
|
||||
<text class="text-while">积分明细</text>
|
||||
</view>
|
||||
<view class="bill center-algin">
|
||||
<text class="text-while">积分订单</text>
|
||||
</view>
|
||||
<view class="bill center-algin">
|
||||
<text class="text-while">积分等级</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="with-100 margin-top-20 column">
|
||||
<view class="content-title padding-width-20 bg-white center-algin">
|
||||
<text class="">积分兑换商品</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="hot-goods-content bg-white">
|
||||
<view class="hot-goods-item" hover-class="hot-goods-item-hover" v-for="(item,index) in newProductList" :key="index"
|
||||
:class="index % 2 === 2 ? 'no-border-right' : ''" @click="toGoods(item)" >
|
||||
<view class="items column padding-20">
|
||||
<view class="center-algin item-images">
|
||||
<image class="hot-goods-image" :src="item.orderSn"></image>
|
||||
</view>
|
||||
<view class="hot-goods-name ellipsis-oneline">{{item.goodsName}}</view>
|
||||
<view class="row align-height hot-goods-price space-between-algin">
|
||||
<text class="text-grey text-size-mim">{{item.totalAmount}}积分</text>
|
||||
<text class="level text-size-24 text-green padding-width-15">{{item.levelName}}</text>
|
||||
</view>
|
||||
</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{
|
||||
pageNum: 1,
|
||||
loadingType: 'more', //加载更多状态
|
||||
integrals:0,
|
||||
newProductList: [],
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
//加载更多
|
||||
onReachBottom() {
|
||||
this.pageNum = this.pageNum + 1;
|
||||
this.getNewProductList();
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.pageNum = this.pageNum + 1;
|
||||
this.getNewProductList('refresh');
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 2000);
|
||||
},
|
||||
|
||||
async onShow() {
|
||||
this.getNewProductList('refresh');
|
||||
let params = {orderType:5 };
|
||||
|
||||
|
||||
let data1 = await Api.apiCall('get', Api.member.currentMember, params);
|
||||
this.integrals = data1.integration;
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
/**
|
||||
* 获取新品上市信息
|
||||
*/
|
||||
async getNewProductList(type = 'add', loading){
|
||||
//没有更多直接返回
|
||||
if (type === 'add') {
|
||||
if (this.loadingType === 'nomore') {
|
||||
return;
|
||||
}
|
||||
this.loadingType = 'loading';
|
||||
} else {
|
||||
this.loadingType = 'more';
|
||||
}
|
||||
let params = { pageNum: this.pageNum,orderType:5};
|
||||
let list = await Api.apiCall('get', Api.order.sampleOrderList, params);
|
||||
|
||||
|
||||
let goodsList = list.records;
|
||||
|
||||
if (type === 'refresh') {
|
||||
this.newProductList = [];
|
||||
}
|
||||
|
||||
this.newProductList = this.newProductList.concat(goodsList);
|
||||
|
||||
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
|
||||
this.loadingType = this.newProductList.length > list.total ? 'nomore' : 'more';
|
||||
if (type === 'refresh') {
|
||||
if (loading == 1) {
|
||||
uni.hideLoading();
|
||||
} else {
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
toGoods(item){
|
||||
let id = item.goodsId;
|
||||
uni.navigateTo({
|
||||
url: `../../pagesA/product/giftProduct?id=${id}`
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./home.css");
|
||||
page{background-color: #F3F3F3;}
|
||||
view {font-size: 30upx;line-height: 1.8;display: flex;}
|
||||
.with-100{width: 100%;}
|
||||
.row{flex-direction: row;}
|
||||
.column {flex-direction: column;}
|
||||
.text-size-max{font-size: 80upx;}
|
||||
.center-algin{justify-content: center;align-items: center;}
|
||||
.justify-center{justify-content: center;}
|
||||
.justify-between{justify-content: space-between;}
|
||||
.align-height{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;}
|
||||
.text-size-below-normal {font-size: 28upx;}
|
||||
.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;}
|
||||
.padding-width-20{padding: 0 20upx;}
|
||||
.content{width: 100%;}
|
||||
</style>
|
||||
229
mallplusui-uniapp-wx/pages/money/pay.vue
Normal file
229
mallplusui-uniapp-wx/pages/money/pay.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="price-box">
|
||||
<text>支付金额</text>
|
||||
<text class="price">{{orderInfo.payAmount}}</text>
|
||||
</view>
|
||||
|
||||
<view class="pay-type-list">
|
||||
|
||||
<view class="type-item b-b" @click="changePayType(2)">
|
||||
<text class="icon yticon icon-weixinzhifu"></text>
|
||||
<view class="con">
|
||||
<text class="tit">微信支付</text>
|
||||
<text>推荐使用微信支付</text>
|
||||
</view>
|
||||
<label class="radio">
|
||||
<radio value="" color="#fa436a" :checked='payType == 2' />
|
||||
|
||||
</label>
|
||||
</view>
|
||||
<view class="type-item b-b" @click="changePayType(1)">
|
||||
<text class="icon yticon icon-alipay"></text>
|
||||
<view class="con">
|
||||
<text class="tit">支付宝支付</text>
|
||||
</view>
|
||||
<label class="radio">
|
||||
<radio value="" color="#fa436a" :checked='payType == 1' />
|
||||
|
||||
</label>
|
||||
</view>
|
||||
<view class="type-item" @click="changePayType(3)">
|
||||
<text class="icon yticon icon-erjiye-yucunkuan"></text>
|
||||
<view class="con">
|
||||
<text class="tit">预存款支付</text>
|
||||
<text>可用余额 ¥{{orderInfo.blance}}</text>
|
||||
</view>
|
||||
<label class="radio">
|
||||
<radio value="" color="#fa436a" :checked='payType == 3' />
|
||||
|
||||
</label>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text class="mix-btn" @click="confirm">确认支付</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
payType: 1,
|
||||
orderInfo: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['hasLogin','userInfo'])
|
||||
},
|
||||
async onLoad(options) {
|
||||
let params = {'id':options.id};
|
||||
this.orderInfo = await Api.apiCall('get',Api.order.orderDetail,params);
|
||||
},
|
||||
computed: {
|
||||
...mapState(['hasLogin','userInfo'])
|
||||
},
|
||||
methods: {
|
||||
//选择支付方式
|
||||
changePayType(type) {
|
||||
this.payType = type;
|
||||
},
|
||||
//确认支付
|
||||
async confirm() {
|
||||
|
||||
if (this.payType ==2){
|
||||
let params = {'orderId':this.orderInfo.id};
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
let appRes = await Api.apiCall('get',Api.order.appPay,params);
|
||||
console.log(appRes);
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
//微信h5支付调用
|
||||
|
||||
let h5Res = await Api.apiCall('get',Api.order.wapPay,params);
|
||||
console.log(h5Res);
|
||||
if (h5Res) {
|
||||
|
||||
}
|
||||
let webPay = await Api.apiCall('get',Api.order.webPay,params);
|
||||
console.log('webPay');
|
||||
console.log(webPay);
|
||||
if (webPay) {
|
||||
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 小程序支付调用
|
||||
|
||||
let res = await Api.apiCall('post',Api.order.weixinAppletPay,params);
|
||||
console.log(res);
|
||||
if (res) {
|
||||
uni.requestPayment({
|
||||
timeStamp: res.timeStamp,
|
||||
nonceStr: res.nonceStr,
|
||||
package: res.package,
|
||||
signType: res.signType,
|
||||
paySign: res.paySign,
|
||||
success(datas) {
|
||||
console.log(datas);
|
||||
uni.redirectTo({
|
||||
url: '/pages/money/paySuccess'
|
||||
})
|
||||
},
|
||||
fail(err) {
|
||||
fail(JSON.stringify(err))
|
||||
}
|
||||
});
|
||||
|
||||
}else {
|
||||
this.$api.msg('微信小程序失败');
|
||||
}
|
||||
// #endif
|
||||
}else if (this.payType ==3){
|
||||
let params1 = {'payAmount':this.orderInfo.payAmount,'balance':this.userInfo.userInfo.blance,'orderId':this.orderInfo.id};
|
||||
let data1 = await Api.apiCall('post',Api.order.balancePay,params1);
|
||||
if (data1) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/money/paySuccess'
|
||||
})
|
||||
}else {
|
||||
this.$api.msg('余额支付失败');
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.app {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
background-color: #fff;
|
||||
height: 265upx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 28upx;
|
||||
color: #909399;
|
||||
|
||||
.price{
|
||||
font-size: 50upx;
|
||||
color: #303133;
|
||||
margin-top: 12upx;
|
||||
&:before{
|
||||
content: '￥';
|
||||
font-size: 40upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-type-list {
|
||||
margin-top: 20upx;
|
||||
background-color: #fff;
|
||||
padding-left: 60upx;
|
||||
|
||||
.type-item{
|
||||
height: 120upx;
|
||||
padding: 20upx 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-right: 60upx;
|
||||
font-size: 30upx;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.icon{
|
||||
width: 100upx;
|
||||
font-size: 52upx;
|
||||
}
|
||||
.icon-erjiye-yucunkuan {
|
||||
color: #fe8e2e;
|
||||
}
|
||||
.icon-weixinzhifu {
|
||||
color: #36cb59;
|
||||
}
|
||||
.icon-alipay {
|
||||
color: #01aaef;
|
||||
}
|
||||
.tit{
|
||||
font-size: $font-lg;
|
||||
color: $font-color-dark;
|
||||
margin-bottom: 4upx;
|
||||
}
|
||||
.con{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $font-sm;
|
||||
color: $font-color-light;
|
||||
}
|
||||
}
|
||||
.mix-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 630upx;
|
||||
height: 80upx;
|
||||
margin: 80upx auto 30upx;
|
||||
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>
|
||||
78
mallplusui-uniapp-wx/pages/money/paySuccess.vue
Normal file
78
mallplusui-uniapp-wx/pages/money/paySuccess.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<text class="success-icon yticon icon-xuanzhong2"></text>
|
||||
<text class="tit">支付成功</text>
|
||||
<view class="result-mid red-price">
|
||||
{{ paymentInfo.payAmount }}
|
||||
</view>
|
||||
<view class="btn-group">
|
||||
<navigator url="/pages/order/order?status=0" open-type="redirect" class="mix-btn">查看订单</navigator>
|
||||
<navigator url="/pages/index/index" open-type="switchTab" class="mix-btn hollow">返回首页</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
paymentId: 0,
|
||||
paymentInfo: {}, // 支付单详情
|
||||
orderId: 0,
|
||||
status: false
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.order) {
|
||||
let order = JSON.parse(options.order)
|
||||
this.orderId = order.id
|
||||
this.paymentInfo = order
|
||||
}
|
||||
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.success-icon {
|
||||
font-size: 160upx;
|
||||
color: #fa436a;
|
||||
margin-top: 100upx;
|
||||
}
|
||||
.tit {
|
||||
font-size: 38upx;
|
||||
color: #303133;
|
||||
}
|
||||
.btn-group {
|
||||
padding-top: 100upx;
|
||||
}
|
||||
.mix-btn {
|
||||
margin-top: 30upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 600upx;
|
||||
height: 80upx;
|
||||
font-size: $font-lg;
|
||||
color: #fff;
|
||||
background-color: $base-color;
|
||||
border-radius: 10upx;
|
||||
&.hollow {
|
||||
background: #fff;
|
||||
color: #303133;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
872
mallplusui-uniapp-wx/pages/order/createOrder.vue
Normal file
872
mallplusui-uniapp-wx/pages/order/createOrder.vue
Normal file
@@ -0,0 +1,872 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 地址 -->
|
||||
<navigator url="../../pagesU/address/address?source=1" class="address-section">
|
||||
<view class="order-content">
|
||||
<text class="yticon icon-shouhuodizhi"></text>
|
||||
<view class="cen" v-if="addressData">
|
||||
<view class="top">
|
||||
<text class="name">{{ addressData.name }}</text>
|
||||
<text class="mobile">{{ addressData.phoneNumber }}</text>
|
||||
</view>
|
||||
<text class="address">{{ addressData.province }}-{{ addressData.city }}-{{ addressData.region }}-{{ addressData.detailAddress }}</text>
|
||||
</view>
|
||||
<view class="cen" v-else>
|
||||
<text>请设置收货地址</text>
|
||||
<!-- <view class="top">
|
||||
<text class="name">{{ addressData.name }}</text>
|
||||
<text class="mobile">{{ addressData.phoneNumber }}</text>
|
||||
</view>
|
||||
<text class="address">{{ addressData.province }}-{{ addressData.city }}-{{ addressData.region }}-{{ addressData.detailAddress }}</text> -->
|
||||
</view>
|
||||
<text class="yticon icon-you"></text>
|
||||
</view>
|
||||
|
||||
<image
|
||||
class="a-bg"
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAAFCAYAAAAaAWmiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Rjk3RjkzMjM2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Rjk3RjkzMjQ2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGOTdGOTMyMTY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGOTdGOTMyMjY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrEOZlQAAAiuSURBVHjazJp7bFvVHce/1/deXzuJHSdOM+fhpKMllI2SkTZpV6ULYrCHQGwrf41p/LENVk3QTipSWujKoyot1aQN0FYQQxtsMCS2SVuqsfFYHxBKYQNGV9ouZdA8nDipH4mT+HFf+51rO0pN0japrw9HreLe3Pqc3/me3+f3uFdIvfVuDIAPix1C9oceicFRVQWlvRWCkL1omqb1Of9z9rXZY65rhcO6x5ove19oWkX/RAaSMLOEkg+2Zt0wEcvoWOZzYZnXeWEbzmP7XPs11//LnOiDEY9DkGRwGw5a59QUTM2As+1qiD5v0TUvvC9Bc52KpmDSnju4ic7+CIinNVQoElYtcUM8jx2L1bzwPn14DOrHZ0hzEdxOPJtW16FH45CvuBzyZU22aH7Od9LnU/E0xpMqJG6iZ309qeqYNoA1gTJ4ZdF2zY2pJNSTfYCmkb85+GnO1hIbh+DzQVndaiHYTs3ZGJpifE/DyVnzi+X7pWqen8/i+8kPYUSjEORPCd9XtUKs9Fi+KMxjVzE0n9ZNnIgkYXwK+B5LafC4JKyudcMxD2+LqblGfNcY30VxJsfhcOCJ7xr02ATkluXE96DtmrPvPxFLIUH7zY3vOc0Z39O0oGtqy1DlFIuu+Zx8P/Ffa8/hEBey4rh0uuPWS6S6CRUhyGjG0hcfOWex+c9zXSsE5HmFzseP3H294Sl847VBRGJJQHTwy9wJNKAE7otLfXi2K3hRgeB81+bar8IDEPvFMxi6cxebnMx2cjrnDmiIwUAGDTvugX9de9E1L7R9NK1jc+8gnj8dy2rOKY/JRhgV8Cr405ea0HEBOxajeaHtySPvYvD2bUgdP0lmuzkl7oLl6Wn0wX/Dd1D/xG5bNc/f+7NjY9jyzghlM5QxS/ySOGt+Wlt3WwDXBz22a86gHrqjG7Hnekhz5uciN9NVDEBxXYng87vgEoqveZ7y+XsPE99vOTyAs1SkU+bOT3NKIJHUsIb4/rsL8L0YmrMRffQ3GNn8c6L7BOnu4pW10/xR4nsK9T+5FzWda2fXcEXTfLbtYUrc7joSwguno9kilZfsLNmgtaBcxv7rmudN2i9Fc8YRlsvkr6aOvoeBHxDf//MBzVfGke9p8vVhVN2wAQ1P7rFdczYeO34Wm4+Gsr4mcqzWMqQ5IX5rex3W1pUXX/PCRlwkjpEtDyLy9B8sPxcgLWzFpy7rWlTH3eq66AbUj0fh7lyJhn27oFzVck41mTdgdnU5+3fzbczsqqVwQ14aSuCrhwZoo3UEqCLW6biZJZZZom0e0UhlSiY3rvBjd0cdfLJjTrsXYvN8e5TvPEZ2PYbw9l9CrKqAWFNB+2+W/oiTc2l9BFefC/WPdqPyuxts1/zMlIrbqVB7OZSgaSWrC2eUWHUGcLa2MVrLyho3ftvVhNYq1ye6J8XUnI3JFw8idNdOaB+GIS+vsZhf6gMvsP1OJKGFx1H9o1sQeOSBXOcfc9pQDM3Z2PGvEeykxJ0l7AGaTyux4YKVLpOvs0BO/v0UQf17LdUzwdcskuaFHRo1NIrQxq1I9ByEc2kj+ZwDZsk1z/H9I+L7us+j4fHdUFa2FF3zQtv3DyTwrTcGoVFxXOeWKZEoPeNm+E66b7zSj71r6+ERHXN21C5V85nPmo7I3scRvncfxOoyiP7y0vNdyMZ17X9xmGR+43MPwvvtm23XnPH9h68P4u8U2yuJ7wonvmu0pigValf73XhmfRCt1S5bNbd6QK/0ov+2bhjDE8T3aj58p5hujCehjsZQs+lWLNl5N0RvuS2a5z/T8cLOd8K4/72wxdaAXHq+syGT7sOM7xLxvaOe+F5lu+bqYBjDd25H4s+vQ26ugSBL1lsEC+m4C8fQvMhXZXTa/CR8N96MekrapWCdvc1t+rvn32PY3juYrc7cEjjonFuMYQm97QsBPLSq1v7pKJAPbbwHZ3ueoqCyhJIJStqto8/BdMTh8q1A8PcPo+xrXbbP97ehSXydFWpjU0CZzO8xInM+CqSdTV688OVmBBT7O6DRh/dhYOt20nqSdK+f1RIqdRMqRXgrR90Dm+Dfsdn2+QYpeH7/8CBe+mAsq7nIsevKEjivgv1dQdzYUGH7dMlXe3FmwxZMTRyFgiZkW48mF0/XMYWqm75JfH8IUmPA1tlUMnHv+8T3N3J8d3Hkey6I3re6Djvaam1v/urhswjdsQ2jf/kVJRI1xHdPrh1lltzTWUxXai5H07N74P7KettnPDQyjWtf/ohglyJfl7jz/drP+vDrzgYsLZdtP2PRnz6B/u4t9I+U9cYCH81hddoFuBG4bxNq7v9xSfh+G/H9wKkIwF5JkR38fF3VLb73dDXhpsYS8P0Vxve7MZ14E04EkX2SumDj40Lkjz2LS9x1nZVqcK1rh1L/GaiZDB1GYwGPRi9+sA4r63odGEjAoKTZS0mTwUtoS2sTPioc1jd64KJqNZXRP9EtLFrLT5KQOd6H1JtvQ/SUQ1CUC1Z/tjp5MgXn51bAfc1VpAUVb6pqi+bsqRlrOB0ITSI0kUa1IvF7JcribPbxZnt9BYIeBZm0ap1BO2yHLMOIxjH111chmDocXg9XzZFR4fD74e5cA9GtQEulbLGbfaNMvv4+BfG3hiet9wxlUeDGdDPn68uqXVgVKKezbiBN/HHYoTnrqlORkDx0BHr/ABzVVbknbZysZ3wnRVyda6HU1UIjvpt28p2C+T+GEtYeeEh3jqcdKjl2BcWY65q9UAQb+c6+k3iePnaS+P5Pq8spOJ38fJ09RVI1OFuWo6xtJXSD+J6xh++OHN8PEt8HxtNY4pbAczC+m2Rnh8V3J9Q0Fa4LeG97YQdehj4aoSL9NZiZNMTKStp6g5/x5NsW37vWQaS1WXzPHvjihzYS/lgshbeJ75WySHm7wNXXk8SbK/xutOX4ntHtYRxE0eJn6uARaGf6ie++7GPNxVkf/78AAwCn1+RYqusbZQAAAABJRU5ErkJggg=="
|
||||
></image>
|
||||
</navigator>
|
||||
|
||||
<view class="goods-section">
|
||||
<view class="g-header b-b">
|
||||
<text class="name" v-if="groupActivity">团购-{{groupActivity.name}}</text>
|
||||
</view>
|
||||
<!-- 商品列表 -->
|
||||
<view class="g-item" v-for="(item, index) in cartPromotionItemList" :key="index">
|
||||
<image :src="item.productPic"></image>
|
||||
<view class="right">
|
||||
<text class="title clamp">{{ item.productName }}</text>
|
||||
<text class="spec" v-if="item.productAttr">{{ item.productAttr }}</text>
|
||||
<view class="price-box">
|
||||
<text class="price">￥{{ item.price }}</text>
|
||||
<text class="number">x {{ item.quantity }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="hot-floor" v-if="item1.giftsList && item1.giftsList.length > 0" v-for="(item1, index1) in basicGiftsList" :key="index1">
|
||||
<view class="floor-img-box"> <text class="name">{{ item1.name }}</text></view>
|
||||
|
||||
<scroll-view class="floor-list" scroll-x>
|
||||
<view class="scoll-wrapper">
|
||||
<view v-for="(item, index) in item1.giftsList" :key="index" class="floor-item" >
|
||||
<image :src="item.pic" mode="aspectFill"></image>
|
||||
<text class="title clamp">{{ item.name }}</text>
|
||||
<text class="price" v-if="item.rule">￥{{ item.price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 优惠明细 -->
|
||||
<view class="yt-list">
|
||||
<view class="yt-list-cell b-b" v-if="couponList.length > 0" @click="toggleMask('show')">
|
||||
<view class="cell-icon">券</view>
|
||||
<text class="cell-tit clamp">优惠券</text>
|
||||
<text class="cell-tip active">选择优惠券</text>
|
||||
<text class="cell-more wanjia wanjia-gengduo-d"></text>
|
||||
</view>
|
||||
<view class="yt-list-cell b-b" v-if="coupon">
|
||||
<text class="cell-tit clamp">商家促销</text>
|
||||
<view class="cell-tip hb" v-if="coupon.minPoint">满{{coupon.minPoint}}减{{coupon.amount}}</view>
|
||||
<text class="cell-tip disabled" v-if="!coupon">暂无可用优惠</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 金额明细 -->
|
||||
<view class="yt-list">
|
||||
<view class="yt-list-cell b-b">
|
||||
<text class="cell-tit clamp">商品金额</text>
|
||||
<text class="cell-tip">￥{{ calcAmount.totalAmount }}</text>
|
||||
</view>
|
||||
<view class="yt-list-cell b-b" v-if="groupActivity">
|
||||
<text class="cell-tit clamp">活动金额</text>
|
||||
<text class="cell-tip">￥{{ groupActivity.price }}</text>
|
||||
</view>
|
||||
<view class="yt-list-cell b-b" v-if="calcAmount.promotionAmount>0">
|
||||
<text class="cell-tit clamp">优惠金额</text>
|
||||
<text class="cell-tip red">-￥{{ calcAmount.promotionAmount }}</text>
|
||||
</view>
|
||||
<view class="yt-list-cell b-b" v-if="coupon.amount>0">
|
||||
<text class="cell-tit clamp">优惠券抵扣</text>
|
||||
<text class="cell-tip red">-￥{{ coupon.amount }}</text>
|
||||
</view>
|
||||
<!-- <view class="yt-list-cell b-b" v-if="memberIntegration>0">
|
||||
<text class="cell-tit clamp">积分抵扣</text>
|
||||
<text class="cell-tip red">-￥{{ memberIntegration }}</text>
|
||||
</view>-->
|
||||
<view class="yt-list-cell b-b">
|
||||
<text class="cell-tit clamp">运费</text>
|
||||
<text class="cell-tip">{{calcAmount.freightAmount}}</text>
|
||||
</view>
|
||||
<view class="yt-list-cell desc-cell">
|
||||
<text class="cell-tit clamp">备注</text>
|
||||
<input class="desc" type="text" v-model="desc" placeholder="请填写备注信息" placeholder-class="placeholder" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部 -->
|
||||
<view class="footer">
|
||||
<view class="price-content">
|
||||
<text>实付款</text>
|
||||
<text class="price-tip">￥</text>
|
||||
<text class="price">{{ calcAmount.payAmount-coupon.amount }}</text>
|
||||
</view>
|
||||
<text class="submit" @click="submit">提交订单</text>
|
||||
</view>
|
||||
|
||||
<!-- 优惠券面板 -->
|
||||
<view class="mask" :class="maskState === 0 ? 'none' : maskState === 1 ? 'show' : ''" @click="toggleMask">
|
||||
<view class="mask-content" @click.stop.prevent="stopPrevent">
|
||||
<!-- 优惠券页面，仿mt -->
|
||||
<view class="coupon-item" v-if="couponList.length > 0" v-for="(item, index) in couponList" :key="index">
|
||||
<view class="con" @click="selectCoupon(item)">
|
||||
<view class="left">
|
||||
<text class="title">{{ item.name }}</text>
|
||||
<text class="time">有效期至{{item.coupon.endTime | formatCreateTime}}</text>
|
||||
</view>
|
||||
<view class="right">
|
||||
<text class="price">{{ item.coupon.amount }}</text>
|
||||
<text>满{{item.coupon.minPoint}}可用</text>
|
||||
</view>
|
||||
|
||||
<view class="circle l"></view>
|
||||
<view class="circle r"></view>
|
||||
</view>
|
||||
<text class="tips">限新用户使用</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import { mapState } from 'vuex';
|
||||
import { formatDate } from '@/common/date';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
maskState: 0, //优惠券面板显示状态
|
||||
desc: '', //备注
|
||||
payType: 1, //1微信 2支付宝
|
||||
type: 1,
|
||||
groupType: '',
|
||||
/* memberIntegration:0, */
|
||||
groupActivityId:'',
|
||||
basicGiftsVar:'',
|
||||
skillId:0,
|
||||
goodsId: 0,
|
||||
skuId:0,
|
||||
mgId: 0,
|
||||
cartId: '',
|
||||
cartIds: '',
|
||||
addressId: '',
|
||||
couponId: '',
|
||||
memberCouponId:'',
|
||||
coupon:{
|
||||
amount:0,
|
||||
coupon:{
|
||||
amount:0
|
||||
}
|
||||
},
|
||||
groupActivity:null,
|
||||
memberReceiveAddressList: [],
|
||||
basicGiftsList:[],
|
||||
cartPromotionItemList: [],
|
||||
calcAmount: {
|
||||
totalAmount: 0,
|
||||
freightAmount: 0,
|
||||
promotionAmount: 0,
|
||||
payAmount: 0
|
||||
},
|
||||
couponList: [],
|
||||
addressData: {
|
||||
name: null,
|
||||
phoneNumber: '',
|
||||
detailAddress: '',
|
||||
region: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
async onLoad(opt) {
|
||||
let option = JSON.parse(opt.dataJson);
|
||||
console.log(option)
|
||||
this.skuId = option.skuId==undefined?'':option.skuId;
|
||||
this.goodsId = option.goodsId;
|
||||
|
||||
let data;
|
||||
this.type = option.type;
|
||||
if (option.groupActivityId) { // 团购
|
||||
let params = { groupId: option.groupActivityId };
|
||||
data = await Api.apiCall('get', Api.order.preGroupActivityOrder, params);
|
||||
this.groupActivityId=option.groupActivityId;
|
||||
this.groupActivity=data.groupActivity;
|
||||
this.type = 1;
|
||||
}else{
|
||||
if (option.groupType) { // 拼团
|
||||
this.groupType = option.groupType;
|
||||
this.goodsId = option.id;
|
||||
this.mgId = option.mgid;
|
||||
|
||||
this.groupId = option.groupId;
|
||||
if (this.skuId) {
|
||||
let params = { orderType:2, groupId: option.groupId, goodsId: option.id, skuId: this.skuId };
|
||||
data = await Api.apiCall('post', Api.order.addGroup, params);
|
||||
} else {
|
||||
let params = { orderType:2, groupId: option.groupId, goodsId: option.id };
|
||||
data = await Api.apiCall('post', Api.order.addGroup, params);
|
||||
}
|
||||
} else {
|
||||
if (option.type == 1) { // 详情
|
||||
this.cartId = option.id;
|
||||
let params = { goodsId: option.goodsId,skuId: this.skuId, type: option.type };
|
||||
data = await Api.apiCall('get', Api.order.preOrder, params);
|
||||
} else if (option.type == 2) { // 购物车
|
||||
let params = { cartIds: option.cartIds, type: option.type };
|
||||
data = await Api.apiCall('get', Api.order.preOrder, params);
|
||||
this.cartIds = option.cartIds;
|
||||
}else if (option.type == 6) { // 秒杀
|
||||
let params = { skillId: option.skillId, type: option.type };
|
||||
data = await Api.apiCall('get', Api.order.preOrder, params);
|
||||
this.skillId = option.skillId;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
/* if (!data || !data.cartPromotionItemList){
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
} */
|
||||
/* this.memberIntegration=data.memberIntegration; */
|
||||
/* this.basicGiftsList = data.basicGiftsList; */
|
||||
|
||||
if (this.basicGiftsList) {
|
||||
let basicGiftsVar ='';
|
||||
let basicGiftsVar1 ='';
|
||||
this.basicGiftsList.forEach(item => {
|
||||
basicGiftsVar1=basicGiftsVar1+item.id+':';
|
||||
console.log('1='+item.giftsList);
|
||||
if (item.giftsList ) {
|
||||
item.giftsList.forEach(item1 => {
|
||||
basicGiftsVar1 = basicGiftsVar1 + item1.id + ',';
|
||||
});
|
||||
}
|
||||
basicGiftsVar=basicGiftsVar+basicGiftsVar1.substr(0, basicGiftsVar1.length - 1)+'@';
|
||||
basicGiftsVar1='';
|
||||
});
|
||||
this.basicGiftsVar=basicGiftsVar.substr(0, basicGiftsVar.length - 1);
|
||||
console.log(this.basicGiftsVar);
|
||||
}
|
||||
/* this.cartPromotionItemList = data.cartPromotionItemList; */
|
||||
this.calcAmount = data.calcAmount;
|
||||
this.addressData = data.address;
|
||||
if (this.addressData) {
|
||||
this.addressId = this.addressData.id;
|
||||
}
|
||||
|
||||
this.couponList = data.couponHistoryDetailList;
|
||||
this.memberReceiveAddressList = data.memberReceiveAddressListaddress;
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState(['hasLogin', 'userInfo'])
|
||||
},
|
||||
filters: {
|
||||
formatCreateTime(time) {
|
||||
let date = new Date(time);
|
||||
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getSource(){
|
||||
let source =Api.source;
|
||||
return source;
|
||||
},
|
||||
selectCoupon(item){
|
||||
this.coupon=item.coupon;
|
||||
this.couponId= item.couponId;
|
||||
this.memberCouponId=item.id;
|
||||
console.log(this.coupon);
|
||||
this.toggleMask();
|
||||
},
|
||||
//显示优惠券面板
|
||||
toggleMask(type) {
|
||||
let timer = type === 'show' ? 10 : 300;
|
||||
let state = type === 'show' ? 1 : 0;
|
||||
this.maskState = 2;
|
||||
setTimeout(() => {
|
||||
this.maskState = state;
|
||||
}, timer);
|
||||
},
|
||||
numberChange(data) {
|
||||
this.number = data.number;
|
||||
},
|
||||
changePayType(type) {
|
||||
this.payType = type;
|
||||
},
|
||||
async submit() {
|
||||
console.log('dubmit')
|
||||
let data;
|
||||
if (!this.addressId) {
|
||||
this.$api.msg('请选择收货地址');
|
||||
return;
|
||||
}
|
||||
let params = {};
|
||||
|
||||
// 拼团
|
||||
if (this.groupType) {
|
||||
if (!this.mgId) {
|
||||
this.mgId = 1;
|
||||
}
|
||||
|
||||
params = {
|
||||
mgId: this.mgId,
|
||||
groupType: this.groupType,
|
||||
type: 1,
|
||||
orderType:2,
|
||||
skuId: this.skuId,
|
||||
goodsId: this.goodsId,
|
||||
groupId: this.groupId,
|
||||
addressId: this.addressId,
|
||||
couponId: this.couponId,
|
||||
memberCouponId: this.memberCouponId,
|
||||
content: this.desc
|
||||
};
|
||||
params.source = this.getSource();
|
||||
data = await Api.apiCall('post', Api.order.acceptGroup, params);
|
||||
} else {
|
||||
// detail
|
||||
if (this.type == 1) {
|
||||
params = {basicGiftsVar:this.basicGiftsVar,orderType:1, type: 1, goodsId: this.goodsId,skuId: this.skuId, addressId: this.addressId, couponId: this.couponId,memberCouponId: this.memberCouponId, content: this.desc };
|
||||
if (this.groupActivityId) {
|
||||
params = {groupActivityId:this.groupActivityId,orderType:3, type: 1, goodsId: this.goodsId,skuId: this.skuId, addressId: this.addressId, couponId: this.couponId,memberCouponId: this.memberCouponId, content: this.desc };
|
||||
}
|
||||
params.source = this.getSource();
|
||||
data = await Api.apiCall('post', Api.order.bookOrder, params);
|
||||
}
|
||||
// 购物车
|
||||
if (this.type == 2) {
|
||||
params = {orderType:1, type: 2, cartIds: this.cartIds, addressId: this.addressId, couponId: this.couponId, content: this.desc };
|
||||
params.source = this.getSource();
|
||||
data = await Api.apiCall('post', Api.order.bookOrder, params);
|
||||
}
|
||||
|
||||
// 秒杀
|
||||
if (this.type == 6) {
|
||||
params = { type: 6, skillId: this.skillId, addressId: this.addressId, couponId: this.couponId, content: this.desc ,orderType:6};
|
||||
params.source = this.getSource();
|
||||
data = await Api.apiCall('post', Api.order.bookOrder, params);
|
||||
}
|
||||
}
|
||||
|
||||
if (data && data.order) {
|
||||
let id = data.order.id;
|
||||
// let url = `/pages/money/pay?id=${id}`;
|
||||
let url = '/pages/order/payment/index?order_id=' + data.order.id + '&type=1' ;
|
||||
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
} else {
|
||||
this.$api.msg(data);
|
||||
}
|
||||
},
|
||||
stopPrevent() {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: $page-color-base;
|
||||
padding-bottom: 100upx;
|
||||
}
|
||||
|
||||
.address-section {
|
||||
padding: 30upx 0;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
|
||||
.order-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-shouhuodizhi {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 90upx;
|
||||
color: #888;
|
||||
font-size: 44upx;
|
||||
}
|
||||
|
||||
.cen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
font-size: 28upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 34upx;
|
||||
margin-right: 24upx;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-top: 16upx;
|
||||
margin-right: 20upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
|
||||
.icon-you {
|
||||
font-size: 32upx;
|
||||
color: $font-color-light;
|
||||
margin-right: 30upx;
|
||||
}
|
||||
|
||||
.a-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 5upx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-section {
|
||||
margin-top: 16upx;
|
||||
background: #fff;
|
||||
padding-bottom: 1px;
|
||||
|
||||
.g-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 84upx;
|
||||
padding: 0 30upx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 30upx;
|
||||
color: $font-color-base;
|
||||
margin-left: 24upx;
|
||||
}
|
||||
|
||||
.g-item {
|
||||
display: flex;
|
||||
margin: 20upx 30upx;
|
||||
|
||||
image {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
width: 140upx;
|
||||
height: 140upx;
|
||||
border-radius: 4upx;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
padding-left: 24upx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
|
||||
.spec {
|
||||
font-size: 26upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32upx;
|
||||
color: $font-color-dark;
|
||||
padding-top: 10upx;
|
||||
|
||||
.price {
|
||||
margin-bottom: 4upx;
|
||||
}
|
||||
.number {
|
||||
font-size: 26upx;
|
||||
color: $font-color-base;
|
||||
margin-left: 20upx;
|
||||
}
|
||||
}
|
||||
|
||||
.step-box {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yt-list {
|
||||
margin-top: 16upx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.yt-list-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10upx 30upx 10upx 40upx;
|
||||
line-height: 70upx;
|
||||
position: relative;
|
||||
|
||||
&.cell-hover {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
&.b-b:after {
|
||||
left: 30upx;
|
||||
}
|
||||
|
||||
.cell-icon {
|
||||
height: 32upx;
|
||||
width: 32upx;
|
||||
font-size: 22upx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 32upx;
|
||||
background: #f85e52;
|
||||
border-radius: 4upx;
|
||||
margin-right: 12upx;
|
||||
|
||||
&.hb {
|
||||
background: #ffaa0e;
|
||||
}
|
||||
|
||||
&.lpk {
|
||||
background: #3ab54a;
|
||||
}
|
||||
}
|
||||
|
||||
.cell-more {
|
||||
align-self: center;
|
||||
font-size: 24upx;
|
||||
color: $font-color-light;
|
||||
margin-left: 8upx;
|
||||
margin-right: -10upx;
|
||||
}
|
||||
|
||||
.cell-tit {
|
||||
flex: 1;
|
||||
font-size: 26upx;
|
||||
color: $font-color-light;
|
||||
margin-right: 10upx;
|
||||
}
|
||||
|
||||
.cell-tip {
|
||||
font-size: 26upx;
|
||||
color: $font-color-dark;
|
||||
|
||||
&.disabled {
|
||||
color: $font-color-light;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $base-color;
|
||||
}
|
||||
&.red {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.desc-cell {
|
||||
.cell-tit {
|
||||
max-width: 90upx;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
flex: 1;
|
||||
font-size: $font-base;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
/* 支付列表 */
|
||||
.pay-list {
|
||||
padding-left: 40upx;
|
||||
margin-top: 16upx;
|
||||
background: #fff;
|
||||
.pay-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 20upx;
|
||||
line-height: 1;
|
||||
height: 110upx;
|
||||
position: relative;
|
||||
}
|
||||
.icon-weixinzhifu {
|
||||
width: 80upx;
|
||||
font-size: 40upx;
|
||||
color: #6bcc03;
|
||||
}
|
||||
.icon-alipay {
|
||||
width: 80upx;
|
||||
font-size: 40upx;
|
||||
color: #06b4fd;
|
||||
}
|
||||
.icon-xuanzhong2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
font-size: 40upx;
|
||||
color: $base-color;
|
||||
}
|
||||
.tit {
|
||||
font-size: 32upx;
|
||||
color: $font-color-dark;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 995;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 90upx;
|
||||
justify-content: space-between;
|
||||
font-size: 30upx;
|
||||
background-color: #fff;
|
||||
z-index: 998;
|
||||
color: $font-color-base;
|
||||
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
|
||||
.price-content {
|
||||
padding-left: 30upx;
|
||||
}
|
||||
.price-tip {
|
||||
color: $base-color;
|
||||
margin-left: 8upx;
|
||||
}
|
||||
.price {
|
||||
font-size: 36upx;
|
||||
color: $base-color;
|
||||
}
|
||||
.submit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 280upx;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
font-size: 32upx;
|
||||
background-color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* 优惠券面板 */
|
||||
.mask {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: var(--window-top);
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
z-index: 9995;
|
||||
transition: 0.3s;
|
||||
|
||||
.mask-content {
|
||||
width: 100%;
|
||||
min-height: 30vh;
|
||||
max-height: 70vh;
|
||||
background: #f3f3f3;
|
||||
transform: translateY(100%);
|
||||
transition: 0.3s;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
&.none {
|
||||
display: none;
|
||||
}
|
||||
&.show {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
|
||||
.mask-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 优惠券列表 */
|
||||
.coupon-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 20upx 24upx;
|
||||
background: #fff;
|
||||
.con {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 120upx;
|
||||
padding: 0 30upx;
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border-bottom: 1px dashed #f3f3f3;
|
||||
transform: scaleY(50%);
|
||||
}
|
||||
}
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
height: 100upx;
|
||||
}
|
||||
.title {
|
||||
font-size: 32upx;
|
||||
color: $font-color-dark;
|
||||
margin-bottom: 10upx;
|
||||
}
|
||||
.time {
|
||||
font-size: 24upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 26upx;
|
||||
color: $font-color-base;
|
||||
height: 100upx;
|
||||
}
|
||||
.price {
|
||||
font-size: 44upx;
|
||||
color: $base-color;
|
||||
&:before {
|
||||
content: '￥';
|
||||
font-size: 34upx;
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
font-size: 24upx;
|
||||
color: $font-color-light;
|
||||
line-height: 60upx;
|
||||
padding-left: 30upx;
|
||||
}
|
||||
.circle {
|
||||
position: absolute;
|
||||
left: -6upx;
|
||||
bottom: -10upx;
|
||||
z-index: 10;
|
||||
width: 20upx;
|
||||
height: 20upx;
|
||||
background: #f3f3f3;
|
||||
border-radius: 100px;
|
||||
&.r {
|
||||
left: auto;
|
||||
right: -6upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 分类推荐楼层 */
|
||||
.hot-floor {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20upx;
|
||||
.floor-img-box {
|
||||
width: 100%;
|
||||
height: 220upx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
&:after {
|
||||
padding: 10 30upx;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8);
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 30upx;
|
||||
color: $font-color-base;
|
||||
margin-left: 24upx;
|
||||
}
|
||||
.floor-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.floor-list {
|
||||
white-space: nowrap;
|
||||
padding: 20upx;
|
||||
padding-right: 50upx;
|
||||
border-radius: 6upx;
|
||||
margin-top: -140upx;
|
||||
margin-left: 30upx;
|
||||
background: #fff;
|
||||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.scoll-wrapper {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.floor-item {
|
||||
width: 180upx;
|
||||
margin-right: 20upx;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-dark;
|
||||
line-height: 1.8;
|
||||
image {
|
||||
width: 180upx;
|
||||
height: 180upx;
|
||||
border-radius: 6upx;
|
||||
}
|
||||
.price {
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
.more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
width: 180upx;
|
||||
height: 180upx;
|
||||
border-radius: 6upx;
|
||||
background: #f3f3f3;
|
||||
font-size: $font-base;
|
||||
color: $font-color-light;
|
||||
text:first-child {
|
||||
margin-bottom: 4upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
771
mallplusui-uniapp-wx/pages/order/createOrder1.vue
Normal file
771
mallplusui-uniapp-wx/pages/order/createOrder1.vue
Normal file
@@ -0,0 +1,771 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 地址 -->
|
||||
<navigator url="../../pagesU/address/address?source=1" class="address-section">
|
||||
<view class="order-content">
|
||||
<text class="yticon icon-shouhuodizhi"></text>
|
||||
<view class="cen" v-if="addressData">
|
||||
<view class="top">
|
||||
<text class="name">{{ addressData.name }}</text>
|
||||
<text class="mobile">{{ addressData.phoneNumber }}</text>
|
||||
</view>
|
||||
<text class="address">{{ addressData.detailAddress }} {{ addressData.region }}</text>
|
||||
</view>
|
||||
<text class="yticon icon-you"></text>
|
||||
</view>
|
||||
|
||||
<image
|
||||
class="a-bg"
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAAFCAYAAAAaAWmiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Rjk3RjkzMjM2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Rjk3RjkzMjQ2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGOTdGOTMyMTY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGOTdGOTMyMjY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrEOZlQAAAiuSURBVHjazJp7bFvVHce/1/deXzuJHSdOM+fhpKMllI2SkTZpV6ULYrCHQGwrf41p/LENVk3QTipSWujKoyot1aQN0FYQQxtsMCS2SVuqsfFYHxBKYQNGV9ouZdA8nDipH4mT+HFf+51rO0pN0japrw9HreLe3Pqc3/me3+f3uFdIvfVuDIAPix1C9oceicFRVQWlvRWCkL1omqb1Of9z9rXZY65rhcO6x5ove19oWkX/RAaSMLOEkg+2Zt0wEcvoWOZzYZnXeWEbzmP7XPs11//LnOiDEY9DkGRwGw5a59QUTM2As+1qiD5v0TUvvC9Bc52KpmDSnju4ic7+CIinNVQoElYtcUM8jx2L1bzwPn14DOrHZ0hzEdxOPJtW16FH45CvuBzyZU22aH7Od9LnU/E0xpMqJG6iZ309qeqYNoA1gTJ4ZdF2zY2pJNSTfYCmkb85+GnO1hIbh+DzQVndaiHYTs3ZGJpifE/DyVnzi+X7pWqen8/i+8kPYUSjEORPCd9XtUKs9Fi+KMxjVzE0n9ZNnIgkYXwK+B5LafC4JKyudcMxD2+LqblGfNcY30VxJsfhcOCJ7xr02ATkluXE96DtmrPvPxFLIUH7zY3vOc0Z39O0oGtqy1DlFIuu+Zx8P/Ffa8/hEBey4rh0uuPWS6S6CRUhyGjG0hcfOWex+c9zXSsE5HmFzseP3H294Sl847VBRGJJQHTwy9wJNKAE7otLfXi2K3hRgeB81+bar8IDEPvFMxi6cxebnMx2cjrnDmiIwUAGDTvugX9de9E1L7R9NK1jc+8gnj8dy2rOKY/JRhgV8Cr405ea0HEBOxajeaHtySPvYvD2bUgdP0lmuzkl7oLl6Wn0wX/Dd1D/xG5bNc/f+7NjY9jyzghlM5QxS/ySOGt+Wlt3WwDXBz22a86gHrqjG7Hnekhz5uciN9NVDEBxXYng87vgEoqveZ7y+XsPE99vOTyAs1SkU+bOT3NKIJHUsIb4/rsL8L0YmrMRffQ3GNn8c6L7BOnu4pW10/xR4nsK9T+5FzWda2fXcEXTfLbtYUrc7joSwguno9kilZfsLNmgtaBcxv7rmudN2i9Fc8YRlsvkr6aOvoeBHxDf//MBzVfGke9p8vVhVN2wAQ1P7rFdczYeO34Wm4+Gsr4mcqzWMqQ5IX5rex3W1pUXX/PCRlwkjpEtDyLy9B8sPxcgLWzFpy7rWlTH3eq66AbUj0fh7lyJhn27oFzVck41mTdgdnU5+3fzbczsqqVwQ14aSuCrhwZoo3UEqCLW6biZJZZZom0e0UhlSiY3rvBjd0cdfLJjTrsXYvN8e5TvPEZ2PYbw9l9CrKqAWFNB+2+W/oiTc2l9BFefC/WPdqPyuxts1/zMlIrbqVB7OZSgaSWrC2eUWHUGcLa2MVrLyho3ftvVhNYq1ye6J8XUnI3JFw8idNdOaB+GIS+vsZhf6gMvsP1OJKGFx1H9o1sQeOSBXOcfc9pQDM3Z2PGvEeykxJ0l7AGaTyux4YKVLpOvs0BO/v0UQf17LdUzwdcskuaFHRo1NIrQxq1I9ByEc2kj+ZwDZsk1z/H9I+L7us+j4fHdUFa2FF3zQtv3DyTwrTcGoVFxXOeWKZEoPeNm+E66b7zSj71r6+ERHXN21C5V85nPmo7I3scRvncfxOoyiP7y0vNdyMZ17X9xmGR+43MPwvvtm23XnPH9h68P4u8U2yuJ7wonvmu0pigValf73XhmfRCt1S5bNbd6QK/0ov+2bhjDE8T3aj58p5hujCehjsZQs+lWLNl5N0RvuS2a5z/T8cLOd8K4/72wxdaAXHq+syGT7sOM7xLxvaOe+F5lu+bqYBjDd25H4s+vQ26ugSBL1lsEC+m4C8fQvMhXZXTa/CR8N96MekrapWCdvc1t+rvn32PY3juYrc7cEjjonFuMYQm97QsBPLSq1v7pKJAPbbwHZ3ueoqCyhJIJStqto8/BdMTh8q1A8PcPo+xrXbbP97ehSXydFWpjU0CZzO8xInM+CqSdTV688OVmBBT7O6DRh/dhYOt20nqSdK+f1RIqdRMqRXgrR90Dm+Dfsdn2+QYpeH7/8CBe+mAsq7nIsevKEjivgv1dQdzYUGH7dMlXe3FmwxZMTRyFgiZkW48mF0/XMYWqm75JfH8IUmPA1tlUMnHv+8T3N3J8d3Hkey6I3re6Djvaam1v/urhswjdsQ2jf/kVJRI1xHdPrh1lltzTWUxXai5H07N74P7KettnPDQyjWtf/ohglyJfl7jz/drP+vDrzgYsLZdtP2PRnz6B/u4t9I+U9cYCH81hddoFuBG4bxNq7v9xSfh+G/H9wKkIwF5JkR38fF3VLb73dDXhpsYS8P0Vxve7MZ14E04EkX2SumDj40Lkjz2LS9x1nZVqcK1rh1L/GaiZDB1GYwGPRi9+sA4r63odGEjAoKTZS0mTwUtoS2sTPioc1jd64KJqNZXRP9EtLFrLT5KQOd6H1JtvQ/SUQ1CUC1Z/tjp5MgXn51bAfc1VpAUVb6pqi+bsqRlrOB0ITSI0kUa1IvF7JcribPbxZnt9BYIeBZm0ap1BO2yHLMOIxjH111chmDocXg9XzZFR4fD74e5cA9GtQEulbLGbfaNMvv4+BfG3hiet9wxlUeDGdDPn68uqXVgVKKezbiBN/HHYoTnrqlORkDx0BHr/ABzVVbknbZysZ3wnRVyda6HU1UIjvpt28p2C+T+GEtYeeEh3jqcdKjl2BcWY65q9UAQb+c6+k3iePnaS+P5Pq8spOJ38fJ09RVI1OFuWo6xtJXSD+J6xh++OHN8PEt8HxtNY4pbAczC+m2Rnh8V3J9Q0Fa4LeG97YQdehj4aoSL9NZiZNMTKStp6g5/x5NsW37vWQaS1WXzPHvjihzYS/lgshbeJ75WySHm7wNXXk8SbK/xutOX4ntHtYRxE0eJn6uARaGf6ie++7GPNxVkf/78AAwCn1+RYqusbZQAAAABJRU5ErkJggg=="
|
||||
></image>
|
||||
</navigator>
|
||||
|
||||
<view class="goods-section">
|
||||
<view class="g-header b-b">
|
||||
<image class="logo"
|
||||
src="http://yjlive160322.oss-cn-beijing.aliyuncs.com/mall/images/20190807/QQ%E5%9B%BE%E7%89%8720190807191952.jpg"></image>
|
||||
<text class="name">mallplus多租户商城</text>
|
||||
<text class="name" v-if="groupActivity">团购-{{groupActivity.name}}</text>
|
||||
</view>
|
||||
<!-- 商品列表 -->
|
||||
<view class="g-item" v-for="(item, index) in cartPromotionItemList" :key="index">
|
||||
<image :src="item.productPic"></image>
|
||||
<view class="right">
|
||||
<text class="title clamp">{{ item.productName }}</text>
|
||||
<text class="spec" v-if="item.productAttr">{{ item.productAttr }}</text>
|
||||
<view class="price-box">
|
||||
<text class="price">￥{{ item.price }}</text>
|
||||
<text class="number">x {{ item.quantity }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 优惠明细 -->
|
||||
<view class="yt-list">
|
||||
<view class="yt-list-cell b-b" v-if="couponList.length > 0" @click="toggleMask('show')">
|
||||
<view class="cell-icon">券</view>
|
||||
<text class="cell-tit clamp">优惠券</text>
|
||||
<text class="cell-tip active">选择优惠券</text>
|
||||
<text class="cell-more wanjia wanjia-gengduo-d"></text>
|
||||
</view>
|
||||
<view class="yt-list-cell b-b" v-if="coupon">
|
||||
<text class="cell-tit clamp">商家促销</text>
|
||||
<view class="cell-tip hb" v-if="coupon.minPoint">满{{coupon.minPoint}}减{{coupon.amount}}</view>
|
||||
<text class="cell-tip disabled" v-if="!coupon">暂无可用优惠</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 金额明细 -->
|
||||
<view class="yt-list">
|
||||
<view class="yt-list-cell b-b">
|
||||
<text class="cell-tit clamp">商品金额</text>
|
||||
<text class="cell-tip">￥{{ calcAmount.totalAmount }}</text>
|
||||
</view>
|
||||
<view class="yt-list-cell b-b" v-if="groupActivity">
|
||||
<text class="cell-tit clamp">活动金额</text>
|
||||
<text class="cell-tip">￥{{ groupActivity.price }}</text>
|
||||
</view>
|
||||
<view class="yt-list-cell b-b">
|
||||
<text class="cell-tit clamp">优惠金额</text>
|
||||
<text class="cell-tip red">-￥{{ calcAmount.promotionAmount }}</text>
|
||||
</view>
|
||||
<view class="yt-list-cell b-b">
|
||||
<text class="cell-tit clamp">运费</text>
|
||||
<text class="cell-tip">{{calcAmount.freightAmount}}</text>
|
||||
</view>
|
||||
<view class="yt-list-cell desc-cell">
|
||||
<text class="cell-tit clamp">备注</text>
|
||||
<input class="desc" type="text" v-model="desc" placeholder="请填写备注信息" placeholder-class="placeholder"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部 -->
|
||||
<view class="footer">
|
||||
<view class="price-content">
|
||||
<text>实付款</text>
|
||||
<text class="price-tip">￥</text>
|
||||
<text class="price">{{ calcAmount.payAmount-coupon.amount }}</text>
|
||||
</view>
|
||||
<text class="submit" @click="submit">提交订单</text>
|
||||
</view>
|
||||
|
||||
<!-- 优惠券面板 -->
|
||||
<view class="mask" :class="maskState === 0 ? 'none' : maskState === 1 ? 'show' : ''" @click="toggleMask">
|
||||
<view class="mask-content" @click.stop.prevent="stopPrevent">
|
||||
<!-- 优惠券页面，仿mt -->
|
||||
<view class="coupon-item" v-if="couponList.length > 0" v-for="(item, index) in couponList" :key="index">
|
||||
<view class="con" @click="selectCoupon(item)">
|
||||
<view class="left">
|
||||
<text class="title">{{ item.name }}</text>
|
||||
<text class="time">有效期至{{item.coupon.endTime | formatCreateTime}}</text>
|
||||
</view>
|
||||
<view class="right">
|
||||
<text class="price">{{ item.coupon.amount }}</text>
|
||||
<text>满{{item.coupon.minPoint}}可用</text>
|
||||
</view>
|
||||
|
||||
<view class="circle l"></view>
|
||||
<view class="circle r"></view>
|
||||
</view>
|
||||
<text class="tips">限新用户使用</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import {mapState} from 'vuex';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
maskState: 0, //优惠券面板显示状态
|
||||
desc: '', //备注
|
||||
payType: 1, //1微信 2支付宝
|
||||
type: 1,
|
||||
groupType: '',
|
||||
groupActivityId: '',
|
||||
goodsId: 0,
|
||||
mgId: 1,
|
||||
cartId: '',
|
||||
cartIds: '',
|
||||
addressId: '',
|
||||
couponId: '',
|
||||
memberCouponId: '',
|
||||
coupon: {
|
||||
amount: 0,
|
||||
|
||||
},
|
||||
groupActivity: null,
|
||||
memberReceiveAddressList: [],
|
||||
cartPromotionItemList: [],
|
||||
calcAmount: {
|
||||
totalAmount: 0,
|
||||
freightAmount: 0,
|
||||
promotionAmount: 0,
|
||||
payAmount: 0
|
||||
},
|
||||
couponList: [],
|
||||
addressData: {
|
||||
name: null,
|
||||
phoneNumber: '',
|
||||
detailAddress: '',
|
||||
region: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
async onLoad(option) {
|
||||
let data;
|
||||
this.type = option.type;
|
||||
if (option.groupActivityId) {
|
||||
let params = {groupId: option.groupActivityId};
|
||||
data = await Api.apiCall('get', Api.order.preGroupActivityOrder, params);
|
||||
this.groupActivityId = option.groupActivityId;
|
||||
this.groupActivity = data.groupActivity;
|
||||
} else {
|
||||
if (option.groupType) {
|
||||
this.groupType = option.groupType;
|
||||
this.goodsId = option.id;
|
||||
this.mgId = option.mgid;
|
||||
|
||||
if (option.skuId) {
|
||||
let params = {
|
||||
groupId: option.groupId,
|
||||
goodsId: option.id,
|
||||
skuId: option.skuId
|
||||
};
|
||||
data = await Api.apiCall('post', Api.order.addGroup, params);
|
||||
} else {
|
||||
let params = {groupId: option.groupId, goodsId: option.id};
|
||||
data = await Api.apiCall('post', Api.order.addGroup, params);
|
||||
}
|
||||
} else {
|
||||
if (option.type == 1) {
|
||||
this.cartId = option.id;
|
||||
let params = {cartId: option.id, type: option.type};
|
||||
data = await Api.apiCall('get', Api.order.preOrder, params);
|
||||
} else if (option.type == 2) {
|
||||
let params = {cartIds: option.cartIds, type: option.type};
|
||||
data = await Api.apiCall('get', Api.order.preOrder, params);
|
||||
this.cartIds = option.cartIds;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.cartPromotionItemList = data.cartPromotionItemList;
|
||||
this.calcAmount = data.calcAmount;
|
||||
this.addressData = data.address;
|
||||
if (this.addressData) {
|
||||
this.addressId = this.addressData.id;
|
||||
}
|
||||
|
||||
this.couponList = data.couponHistoryDetailList;
|
||||
this.memberReceiveAddressList = data.memberReceiveAddressListaddress;
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState(['hasLogin', 'userInfo'])
|
||||
},
|
||||
methods: {
|
||||
selectCoupon(item) {
|
||||
this.coupon = item.coupon;
|
||||
this.couponId = item.couponId;
|
||||
this.memberCouponId = item.id;
|
||||
console.log(this.coupon);
|
||||
this.toggleMask();
|
||||
},
|
||||
//显示优惠券面板
|
||||
toggleMask(type) {
|
||||
let timer = type === 'show' ? 10 : 300;
|
||||
let state = type === 'show' ? 1 : 0;
|
||||
this.maskState = 2;
|
||||
setTimeout(() => {
|
||||
this.maskState = state;
|
||||
}, timer);
|
||||
},
|
||||
numberChange(data) {
|
||||
this.number = data.number;
|
||||
},
|
||||
changePayType(type) {
|
||||
this.payType = type;
|
||||
},
|
||||
async submit() {
|
||||
let data;
|
||||
if (!this.addressId) {
|
||||
this.$api.msg('请选择收货地址');
|
||||
return;
|
||||
}
|
||||
// 拼团
|
||||
if (this.groupType) {
|
||||
if (!this.mgId) {
|
||||
this.mgId = 1;
|
||||
}
|
||||
|
||||
let params = {
|
||||
mgId: this.mgId,
|
||||
groupType: this.groupType,
|
||||
type: 1,
|
||||
orderType: 4,
|
||||
goodsId: this.goodsId,
|
||||
addressId: this.addressId,
|
||||
couponId: this.couponId,
|
||||
memberCouponId: this.memberCouponId,
|
||||
|
||||
content: this.desc
|
||||
};
|
||||
data = await Api.apiCall('post', Api.order.acceptGroup, params);
|
||||
} else {
|
||||
// detail
|
||||
if (this.type == 1) {
|
||||
let params = {
|
||||
orderType: 1,
|
||||
type: 1,
|
||||
cartId: this.cartId,
|
||||
addressId: this.addressId,
|
||||
couponId: this.couponId,
|
||||
memberCouponId: this.memberCouponId,
|
||||
content: this.desc
|
||||
};
|
||||
if (this.groupActivityId) {
|
||||
params = {
|
||||
groupActivityId: this.groupActivityId,
|
||||
orderType: 3,
|
||||
type: 1,
|
||||
cartId: this.cartId,
|
||||
addressId: this.addressId,
|
||||
couponId: this.couponId,
|
||||
memberCouponId: this.memberCouponId,
|
||||
|
||||
content: this.desc
|
||||
};
|
||||
}
|
||||
data = await Api.apiCall('post', Api.order.bookOrder, params);
|
||||
}
|
||||
// 购物车
|
||||
if (this.type == 2) {
|
||||
let params = {
|
||||
orderType: 1,
|
||||
type: 2,
|
||||
cartIds: this.cartIds,
|
||||
addressId: this.addressId,
|
||||
couponId: this.couponId,
|
||||
|
||||
content: this.desc
|
||||
};
|
||||
data = await Api.apiCall('post', Api.order.bookOrder, params);
|
||||
}
|
||||
// 团购
|
||||
if (this.type == 5) {
|
||||
let params = {
|
||||
type: 2,
|
||||
cartIds: this.cartIds,
|
||||
addressId: this.addressId,
|
||||
couponId: this.couponId,
|
||||
|
||||
content: this.desc
|
||||
};
|
||||
data = await Api.apiCall('post', Api.order.bookOrder, params);
|
||||
}
|
||||
}
|
||||
|
||||
if (data && data.order) {
|
||||
let id = data.order.id;
|
||||
let url = `/pages/money/pay?id=${id}`;
|
||||
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
} else {
|
||||
this.$api.msg(data);
|
||||
}
|
||||
},
|
||||
stopPrevent() {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: $page-color-base;
|
||||
padding-bottom: 100 upx;
|
||||
}
|
||||
|
||||
.address-section {
|
||||
padding: 30 upx 0;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
|
||||
.order-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-shouhuodizhi {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 90 upx;
|
||||
color: #888;
|
||||
font-size: 44 upx;
|
||||
}
|
||||
|
||||
.cen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
font-size: 28 upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 34 upx;
|
||||
margin-right: 24 upx;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-top: 16 upx;
|
||||
margin-right: 20 upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
|
||||
.icon-you {
|
||||
font-size: 32 upx;
|
||||
color: $font-color-light;
|
||||
margin-right: 30 upx;
|
||||
}
|
||||
|
||||
.a-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 5 upx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-section {
|
||||
margin-top: 16 upx;
|
||||
background: #fff;
|
||||
padding-bottom: 1px;
|
||||
|
||||
.g-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 84 upx;
|
||||
padding: 0 30 upx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
width: 50 upx;
|
||||
height: 50 upx;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 30 upx;
|
||||
color: $font-color-base;
|
||||
margin-left: 24 upx;
|
||||
}
|
||||
|
||||
.g-item {
|
||||
display: flex;
|
||||
margin: 20 upx 30 upx;
|
||||
|
||||
image {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
width: 140 upx;
|
||||
height: 140 upx;
|
||||
border-radius: 4 upx;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
padding-left: 24 upx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30 upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
|
||||
.spec {
|
||||
font-size: 26 upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32 upx;
|
||||
color: $font-color-dark;
|
||||
padding-top: 10 upx;
|
||||
|
||||
.price {
|
||||
margin-bottom: 4 upx;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 26 upx;
|
||||
color: $font-color-base;
|
||||
margin-left: 20 upx;
|
||||
}
|
||||
}
|
||||
|
||||
.step-box {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.yt-list {
|
||||
margin-top: 16 upx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.yt-list-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10 upx 30 upx 10 upx 40 upx;
|
||||
line-height: 70 upx;
|
||||
position: relative;
|
||||
|
||||
&.cell-hover {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
&.b-b:after {
|
||||
left: 30 upx;
|
||||
}
|
||||
|
||||
.cell-icon {
|
||||
height: 32 upx;
|
||||
width: 32 upx;
|
||||
font-size: 22 upx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 32 upx;
|
||||
background: #f85e52;
|
||||
border-radius: 4 upx;
|
||||
margin-right: 12 upx;
|
||||
|
||||
&.hb {
|
||||
background: #ffaa0e;
|
||||
}
|
||||
|
||||
&.lpk {
|
||||
background: #3ab54a;
|
||||
}
|
||||
}
|
||||
|
||||
.cell-more {
|
||||
align-self: center;
|
||||
font-size: 24 upx;
|
||||
color: $font-color-light;
|
||||
margin-left: 8 upx;
|
||||
margin-right: -10upx;
|
||||
}
|
||||
|
||||
.cell-tit {
|
||||
flex: 1;
|
||||
font-size: 26 upx;
|
||||
color: $font-color-light;
|
||||
margin-right: 10 upx;
|
||||
}
|
||||
|
||||
.cell-tip {
|
||||
font-size: 26 upx;
|
||||
color: $font-color-dark;
|
||||
|
||||
&.disabled {
|
||||
color: $font-color-light;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
&.red {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.desc-cell {
|
||||
.cell-tit {
|
||||
max-width: 90 upx;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
flex: 1;
|
||||
font-size: $font-base;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
/* 支付列表 */
|
||||
.pay-list {
|
||||
padding-left: 40 upx;
|
||||
margin-top: 16 upx;
|
||||
background: #fff;
|
||||
|
||||
.pay-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 20 upx;
|
||||
line-height: 1;
|
||||
height: 110 upx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-weixinzhifu {
|
||||
width: 80 upx;
|
||||
font-size: 40 upx;
|
||||
color: #6bcc03;
|
||||
}
|
||||
|
||||
.icon-alipay {
|
||||
width: 80 upx;
|
||||
font-size: 40 upx;
|
||||
color: #06b4fd;
|
||||
}
|
||||
|
||||
.icon-xuanzhong2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60 upx;
|
||||
height: 60 upx;
|
||||
font-size: 40 upx;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 32 upx;
|
||||
color: $font-color-dark;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 995;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 90 upx;
|
||||
justify-content: space-between;
|
||||
font-size: 30 upx;
|
||||
background-color: #fff;
|
||||
z-index: 998;
|
||||
color: $font-color-base;
|
||||
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.price-content {
|
||||
padding-left: 30 upx;
|
||||
}
|
||||
|
||||
.price-tip {
|
||||
color: $base-color;
|
||||
margin-left: 8 upx;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 36 upx;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.submit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 280 upx;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
font-size: 32 upx;
|
||||
background-color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* 优惠券面板 */
|
||||
.mask {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: var(--window-top);
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
z-index: 9995;
|
||||
transition: 0.3s;
|
||||
|
||||
.mask-content {
|
||||
width: 100%;
|
||||
min-height: 30vh;
|
||||
max-height: 70vh;
|
||||
background: #f3f3f3;
|
||||
transform: translateY(100%);
|
||||
transition: 0.3s;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
&.none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.show {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
|
||||
.mask-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 优惠券列表 */
|
||||
.coupon-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 20 upx 24 upx;
|
||||
background: #fff;
|
||||
|
||||
.con {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 120 upx;
|
||||
padding: 0 30 upx;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border-bottom: 1px dashed #f3f3f3;
|
||||
transform: scaleY(50%);
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
height: 100 upx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32 upx;
|
||||
color: $font-color-dark;
|
||||
margin-bottom: 10 upx;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24 upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 26 upx;
|
||||
color: $font-color-base;
|
||||
height: 100 upx;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 44 upx;
|
||||
color: $base-color;
|
||||
|
||||
&:before {
|
||||
content: '￥';
|
||||
font-size: 34 upx;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 24 upx;
|
||||
color: $font-color-light;
|
||||
line-height: 60 upx;
|
||||
padding-left: 30 upx;
|
||||
}
|
||||
|
||||
.circle {
|
||||
position: absolute;
|
||||
left: -6upx;
|
||||
bottom: -10upx;
|
||||
z-index: 10;
|
||||
width: 20 upx;
|
||||
height: 20 upx;
|
||||
background: #f3f3f3;
|
||||
border-radius: 100px;
|
||||
|
||||
&.r {
|
||||
left: auto;
|
||||
right: -6upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
806
mallplusui-uniapp-wx/pages/order/createStoreOrder.vue
Normal file
806
mallplusui-uniapp-wx/pages/order/createStoreOrder.vue
Normal file
@@ -0,0 +1,806 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 地址 -->
|
||||
<navigator url="../../pagesU/address/address?source=1" class="address-section">
|
||||
<view class="order-content">
|
||||
<text class="yticon icon-shouhuodizhi"></text>
|
||||
<view class="cen" v-if="addressData">
|
||||
<view class="top">
|
||||
<text class="name">{{ addressData.name }}</text>
|
||||
<text class="mobile">{{ addressData.phoneNumber }}</text>
|
||||
</view>
|
||||
<text class="address">{{ addressData.province }}-{{ addressData.city }}-{{ addressData.region }}-{{ addressData.detailAddress }}</text>
|
||||
</view>
|
||||
<view class="cen" v-else>
|
||||
<text>请设置收货地址</text>
|
||||
<!-- <view class="top">
|
||||
<text class="name">{{ addressData.name }}</text>
|
||||
<text class="mobile">{{ addressData.phoneNumber }}</text>
|
||||
</view>
|
||||
<text class="address">{{ addressData.province }}-{{ addressData.city }}-{{ addressData.region }}-{{ addressData.detailAddress }}</text> -->
|
||||
</view>
|
||||
<text class="yticon icon-you"></text>
|
||||
</view>
|
||||
|
||||
<image
|
||||
class="a-bg"
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAAFCAYAAAAaAWmiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Rjk3RjkzMjM2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Rjk3RjkzMjQ2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGOTdGOTMyMTY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGOTdGOTMyMjY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrEOZlQAAAiuSURBVHjazJp7bFvVHce/1/deXzuJHSdOM+fhpKMllI2SkTZpV6ULYrCHQGwrf41p/LENVk3QTipSWujKoyot1aQN0FYQQxtsMCS2SVuqsfFYHxBKYQNGV9ouZdA8nDipH4mT+HFf+51rO0pN0japrw9HreLe3Pqc3/me3+f3uFdIvfVuDIAPix1C9oceicFRVQWlvRWCkL1omqb1Of9z9rXZY65rhcO6x5ove19oWkX/RAaSMLOEkg+2Zt0wEcvoWOZzYZnXeWEbzmP7XPs11//LnOiDEY9DkGRwGw5a59QUTM2As+1qiD5v0TUvvC9Bc52KpmDSnju4ic7+CIinNVQoElYtcUM8jx2L1bzwPn14DOrHZ0hzEdxOPJtW16FH45CvuBzyZU22aH7Od9LnU/E0xpMqJG6iZ309qeqYNoA1gTJ4ZdF2zY2pJNSTfYCmkb85+GnO1hIbh+DzQVndaiHYTs3ZGJpifE/DyVnzi+X7pWqen8/i+8kPYUSjEORPCd9XtUKs9Fi+KMxjVzE0n9ZNnIgkYXwK+B5LafC4JKyudcMxD2+LqblGfNcY30VxJsfhcOCJ7xr02ATkluXE96DtmrPvPxFLIUH7zY3vOc0Z39O0oGtqy1DlFIuu+Zx8P/Ffa8/hEBey4rh0uuPWS6S6CRUhyGjG0hcfOWex+c9zXSsE5HmFzseP3H294Sl847VBRGJJQHTwy9wJNKAE7otLfXi2K3hRgeB81+bar8IDEPvFMxi6cxebnMx2cjrnDmiIwUAGDTvugX9de9E1L7R9NK1jc+8gnj8dy2rOKY/JRhgV8Cr405ea0HEBOxajeaHtySPvYvD2bUgdP0lmuzkl7oLl6Wn0wX/Dd1D/xG5bNc/f+7NjY9jyzghlM5QxS/ySOGt+Wlt3WwDXBz22a86gHrqjG7Hnekhz5uciN9NVDEBxXYng87vgEoqveZ7y+XsPE99vOTyAs1SkU+bOT3NKIJHUsIb4/rsL8L0YmrMRffQ3GNn8c6L7BOnu4pW10/xR4nsK9T+5FzWda2fXcEXTfLbtYUrc7joSwguno9kilZfsLNmgtaBcxv7rmudN2i9Fc8YRlsvkr6aOvoeBHxDf//MBzVfGke9p8vVhVN2wAQ1P7rFdczYeO34Wm4+Gsr4mcqzWMqQ5IX5rex3W1pUXX/PCRlwkjpEtDyLy9B8sPxcgLWzFpy7rWlTH3eq66AbUj0fh7lyJhn27oFzVck41mTdgdnU5+3fzbczsqqVwQ14aSuCrhwZoo3UEqCLW6biZJZZZom0e0UhlSiY3rvBjd0cdfLJjTrsXYvN8e5TvPEZ2PYbw9l9CrKqAWFNB+2+W/oiTc2l9BFefC/WPdqPyuxts1/zMlIrbqVB7OZSgaSWrC2eUWHUGcLa2MVrLyho3ftvVhNYq1ye6J8XUnI3JFw8idNdOaB+GIS+vsZhf6gMvsP1OJKGFx1H9o1sQeOSBXOcfc9pQDM3Z2PGvEeykxJ0l7AGaTyux4YKVLpOvs0BO/v0UQf17LdUzwdcskuaFHRo1NIrQxq1I9ByEc2kj+ZwDZsk1z/H9I+L7us+j4fHdUFa2FF3zQtv3DyTwrTcGoVFxXOeWKZEoPeNm+E66b7zSj71r6+ERHXN21C5V85nPmo7I3scRvncfxOoyiP7y0vNdyMZ17X9xmGR+43MPwvvtm23XnPH9h68P4u8U2yuJ7wonvmu0pigValf73XhmfRCt1S5bNbd6QK/0ov+2bhjDE8T3aj58p5hujCehjsZQs+lWLNl5N0RvuS2a5z/T8cLOd8K4/72wxdaAXHq+syGT7sOM7xLxvaOe+F5lu+bqYBjDd25H4s+vQ26ugSBL1lsEC+m4C8fQvMhXZXTa/CR8N96MekrapWCdvc1t+rvn32PY3juYrc7cEjjonFuMYQm97QsBPLSq1v7pKJAPbbwHZ3ueoqCyhJIJStqto8/BdMTh8q1A8PcPo+xrXbbP97ehSXydFWpjU0CZzO8xInM+CqSdTV688OVmBBT7O6DRh/dhYOt20nqSdK+f1RIqdRMqRXgrR90Dm+Dfsdn2+QYpeH7/8CBe+mAsq7nIsevKEjivgv1dQdzYUGH7dMlXe3FmwxZMTRyFgiZkW48mF0/XMYWqm75JfH8IUmPA1tlUMnHv+8T3N3J8d3Hkey6I3re6Djvaam1v/urhswjdsQ2jf/kVJRI1xHdPrh1lltzTWUxXai5H07N74P7KettnPDQyjWtf/ohglyJfl7jz/drP+vDrzgYsLZdtP2PRnz6B/u4t9I+U9cYCH81hddoFuBG4bxNq7v9xSfh+G/H9wKkIwF5JkR38fF3VLb73dDXhpsYS8P0Vxve7MZ14E04EkX2SumDj40Lkjz2LS9x1nZVqcK1rh1L/GaiZDB1GYwGPRi9+sA4r63odGEjAoKTZS0mTwUtoS2sTPioc1jd64KJqNZXRP9EtLFrLT5KQOd6H1JtvQ/SUQ1CUC1Z/tjp5MgXn51bAfc1VpAUVb6pqi+bsqRlrOB0ITSI0kUa1IvF7JcribPbxZnt9BYIeBZm0ap1BO2yHLMOIxjH111chmDocXg9XzZFR4fD74e5cA9GtQEulbLGbfaNMvv4+BfG3hiet9wxlUeDGdDPn68uqXVgVKKezbiBN/HHYoTnrqlORkDx0BHr/ABzVVbknbZysZ3wnRVyda6HU1UIjvpt28p2C+T+GEtYeeEh3jqcdKjl2BcWY65q9UAQb+c6+k3iePnaS+P5Pq8spOJ38fJ09RVI1OFuWo6xtJXSD+J6xh++OHN8PEt8HxtNY4pbAczC+m2Rnh8V3J9Q0Fa4LeG97YQdehj4aoSL9NZiZNMTKStp6g5/x5NsW37vWQaS1WXzPHvjihzYS/lgshbeJ75WySHm7wNXXk8SbK/xutOX4ntHtYRxE0eJn6uARaGf6ie++7GPNxVkf/78AAwCn1+RYqusbZQAAAABJRU5ErkJggg=="
|
||||
></image>
|
||||
</navigator>
|
||||
|
||||
<view class="goods-section" v-for="(item1, index1) in confirmOrderResultList" :key="index1">
|
||||
<view class="g-header b-b">
|
||||
<image class="logo" src="http://yjlive160322.oss-cn-beijing.aliyuncs.com/mall/images/20190807/QQ%E5%9B%BE%E7%89%8720190807191952.jpg"></image>
|
||||
<text class="name"> 共{{ item1.cartPromotionItemList.length }}件商品,店铺 【{{item1.storeName }}】</text>
|
||||
<text class="name" v-if="groupActivity">团购-{{groupActivity.name}}</text>
|
||||
</view>
|
||||
<!-- 商品列表 -->
|
||||
<view class="g-item" v-for="(item, index) in item1.cartPromotionItemList" :key="index">
|
||||
<image :src="item.productPic"></image>
|
||||
<view class="right">
|
||||
<text class="title clamp">{{ item.productName }}</text>
|
||||
<text class="spec" v-if="item.productAttr">{{ item.productAttr }}</text>
|
||||
<view class="price-box">
|
||||
<text class="price">￥{{ item.price }}</text>
|
||||
<text class="number">x {{ item.quantity }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 金额明细 -->
|
||||
<view class="yt-list">
|
||||
<view class="yt-list-cell b-b">
|
||||
<text class="cell-tit clamp">商品金额</text>
|
||||
<text class="cell-tip">￥{{ item1.calcAmount.totalAmount }}</text>
|
||||
</view>
|
||||
|
||||
<view class="yt-list-cell b-b" v-if="item1.calcAmount.promotionAmount>0">
|
||||
<text class="cell-tit clamp">优惠金额</text>
|
||||
<text class="cell-tip red">-￥{{ item1.calcAmount.promotionAmount }}</text>
|
||||
</view>
|
||||
|
||||
<!-- <view class="yt-list-cell b-b" v-if="memberIntegration>0">
|
||||
<text class="cell-tit clamp">积分抵扣</text>
|
||||
<text class="cell-tip red">-￥{{ memberIntegration }}</text>
|
||||
</view>-->
|
||||
<view class="yt-list-cell b-b">
|
||||
<text class="cell-tit clamp">运费</text>
|
||||
<text class="cell-tip">{{item1.calcAmount.freightAmount}}</text>
|
||||
</view>
|
||||
<view class="yt-list-cell desc-cell">
|
||||
<text class="cell-tit clamp">备注</text>
|
||||
<input class="desc" type="text" v-model="desc" placeholder="请填写备注信息" placeholder-class="placeholder" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 底部 -->
|
||||
<view class="footer">
|
||||
<view class="price-content">
|
||||
<text>实付款</text>
|
||||
<text class="price-tip">￥</text>
|
||||
<text class="price">{{ totalPayAmount }}</text>
|
||||
</view>
|
||||
<text class="submit" @click="submit">提交订单</text>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import { mapState } from 'vuex';
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
maskState: 0, //优惠券面板显示状态
|
||||
desc: '', //备注
|
||||
payType: 1, //1微信 2支付宝
|
||||
type: 1,
|
||||
groupType: '',
|
||||
memberIntegration:0,
|
||||
groupActivityId:'',
|
||||
totalPayAmount: 0,
|
||||
basicGiftsVar:'',
|
||||
skillId:0,
|
||||
goodsId: 0,
|
||||
mgId: 1,
|
||||
cartId: '',
|
||||
cartIds: '',
|
||||
addressId: '',
|
||||
couponId: '',
|
||||
memberCouponId:'',
|
||||
coupon:{
|
||||
amount:0,
|
||||
coupon:{
|
||||
amount:0
|
||||
}
|
||||
},
|
||||
groupActivity:null,
|
||||
memberReceiveAddressList: [],
|
||||
basicGiftsList:[],
|
||||
cartPromotionItemList: [],
|
||||
confirmOrderResultList: [],
|
||||
calcAmount: {
|
||||
totalAmount: 0,
|
||||
freightAmount: 0,
|
||||
promotionAmount: 0,
|
||||
payAmount: 0
|
||||
},
|
||||
couponList: [],
|
||||
addressData: {
|
||||
name: null,
|
||||
phoneNumber: '',
|
||||
detailAddress: '',
|
||||
region: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
async onLoad(opt) {
|
||||
let option = JSON.parse(opt.dataJson);
|
||||
let data;
|
||||
this.type = option.type;
|
||||
if (option.groupActivityId) { // 团购
|
||||
let params = { groupId: option.groupActivityId };
|
||||
data = await Api.apiCall('get', Api.order.preGroupActivityOrder, params);
|
||||
this.groupActivityId=option.groupActivityId;
|
||||
this.groupActivity=data.groupActivity;
|
||||
this.type = 1;
|
||||
}else{
|
||||
if (option.groupType) { // 拼团
|
||||
this.groupType = option.groupType;
|
||||
this.goodsId = option.id;
|
||||
this.mgId = option.mgid;
|
||||
|
||||
if (option.skuId) {
|
||||
let params = { groupId: option.groupId, goodsId: option.id, skuId: option.skuId };
|
||||
data = await Api.apiCall('post', Api.order.addGroup, params);
|
||||
} else {
|
||||
let params = { groupId: option.groupId, goodsId: option.id };
|
||||
data = await Api.apiCall('post', Api.order.addGroup, params);
|
||||
}
|
||||
} else {
|
||||
if (option.type == 1) { // 详情
|
||||
this.cartId = option.id;
|
||||
let params = { goodsId: option.goodsId,skuId: option.goodsId, type: option.type };
|
||||
data = await Api.apiCall('get', Api.order.submitStorePreview, params);
|
||||
} else if (option.type == 2) { // 购物车
|
||||
let params = { cartIds: option.cartIds, type: option.type };
|
||||
data = await Api.apiCall('get', Api.order.submitStorePreview, params);
|
||||
this.cartIds = option.cartIds;
|
||||
}else if (option.type == 6) { // 秒杀
|
||||
let params = { skillId: option.skillId, type: option.type };
|
||||
data = await Api.apiCall('get', Api.order.submitStorePreview, params);
|
||||
this.skillId = option.skillId;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
this.totalPayAmount = data.totalPayAmount;
|
||||
/* this.memberIntegration=data.memberIntegration; */
|
||||
this.basicGiftsList = data.basicGiftsList;
|
||||
this.confirmOrderResultList = data.confirmOrderResultList;
|
||||
this.calcAmount = data.calcAmount;
|
||||
if (this.basicGiftsList) {
|
||||
let basicGiftsVar ='';
|
||||
let basicGiftsVar1 ='';
|
||||
this.basicGiftsList.forEach(item => {
|
||||
basicGiftsVar1=basicGiftsVar1+item.id+':';
|
||||
console.log('1='+item.giftsList);
|
||||
if (item.giftsList ) {
|
||||
item.giftsList.forEach(item1 => {
|
||||
basicGiftsVar1 = basicGiftsVar1 + item1.id + ',';
|
||||
});
|
||||
}
|
||||
basicGiftsVar=basicGiftsVar+basicGiftsVar1.substr(0, basicGiftsVar1.length - 1)+'@';
|
||||
basicGiftsVar1='';
|
||||
});
|
||||
this.basicGiftsVar=basicGiftsVar.substr(0, basicGiftsVar.length - 1);
|
||||
console.log(this.basicGiftsVar);
|
||||
}
|
||||
this.addressData = data.address;
|
||||
if (this.addressData) {
|
||||
this.addressId = this.addressData.id;
|
||||
}
|
||||
|
||||
this.couponList = data.couponHistoryDetailList;
|
||||
this.memberReceiveAddressList = data.memberReceiveAddressListaddress;
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState(['hasLogin', 'userInfo'])
|
||||
},
|
||||
methods: {
|
||||
getSource(){
|
||||
let source =Api.source;
|
||||
return source;
|
||||
},
|
||||
selectCoupon(item){
|
||||
this.coupon=item.coupon;
|
||||
this.couponId= item.couponId;
|
||||
this.memberCouponId=item.id;
|
||||
console.log(this.coupon);
|
||||
this.toggleMask();
|
||||
},
|
||||
//显示优惠券面板
|
||||
toggleMask(type) {
|
||||
let timer = type === 'show' ? 10 : 300;
|
||||
let state = type === 'show' ? 1 : 0;
|
||||
this.maskState = 2;
|
||||
setTimeout(() => {
|
||||
this.maskState = state;
|
||||
}, timer);
|
||||
},
|
||||
numberChange(data) {
|
||||
this.number = data.number;
|
||||
},
|
||||
changePayType(type) {
|
||||
this.payType = type;
|
||||
},
|
||||
async submit() {
|
||||
console.log('dubmit')
|
||||
let data;
|
||||
if (!this.addressId) {
|
||||
this.$api.msg('请选择收货地址');
|
||||
return;
|
||||
}
|
||||
let params = {};
|
||||
|
||||
// 拼团
|
||||
if (this.groupType) {
|
||||
if (!this.mgId) {
|
||||
this.mgId = 1;
|
||||
}
|
||||
|
||||
params = {
|
||||
mgId: this.mgId,
|
||||
groupType: this.groupType,
|
||||
type: 1,
|
||||
orderType:2,
|
||||
goodsId: this.goodsId,
|
||||
addressId: this.addressId,
|
||||
couponId: this.couponId,
|
||||
memberCouponId: this.memberCouponId,
|
||||
content: this.desc
|
||||
};
|
||||
params.source = this.getSource();
|
||||
data = await Api.apiCall('post', Api.order.acceptGroup, params);
|
||||
} else {
|
||||
// detail
|
||||
if (this.type == 1) {
|
||||
params = {basicGiftsVar:this.basicGiftsVar,orderType:1, type: 1, goodsId: option.goodsId,skuId: option.goodsId, addressId: this.addressId, couponId: this.couponId,memberCouponId: this.memberCouponId, content: this.desc };
|
||||
if (this.groupActivityId) {
|
||||
params = {groupActivityId:this.groupActivityId,orderType:3, type: 1, goodsId: option.goodsId,skuId: option.goodsId, addressId: this.addressId, couponId: this.couponId,memberCouponId: this.memberCouponId, content: this.desc };
|
||||
}
|
||||
params.source = this.getSource();
|
||||
data = await Api.apiCall('post', Api.order.generateStoreOrder, params);
|
||||
}
|
||||
// 购物车
|
||||
if (this.type == 2) {
|
||||
params = {orderType:1, type: 2, cartIds: this.cartIds, addressId: this.addressId, couponId: this.couponId, content: this.desc };
|
||||
params.source = this.getSource();
|
||||
console.log(params)
|
||||
console.log(params.source)
|
||||
data = await Api.apiCall('post', Api.order.generateStoreOrder, params);
|
||||
console.log("data=======:"+data)
|
||||
}
|
||||
|
||||
// 秒杀
|
||||
if (this.type == 6) {
|
||||
params = { type: 6, skillId: this.skillId, addressId: this.addressId, couponId: this.couponId, content: this.desc ,orderType:6};
|
||||
params.source = this.getSource();
|
||||
data = await Api.apiCall('post', Api.order.generateStoreOrder, params);
|
||||
}
|
||||
}
|
||||
|
||||
if (data && data.order) {
|
||||
let id = data.order.id;
|
||||
// let url = `/pages/money/pay?id=${id}`;
|
||||
let url = '/pages/order/payment/index?order_id=' + data.order.id + '&type=1' ;
|
||||
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
} else {
|
||||
this.$api.msg(data);
|
||||
}
|
||||
},
|
||||
stopPrevent() {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: $page-color-base;
|
||||
padding-bottom: 100upx;
|
||||
}
|
||||
|
||||
.address-section {
|
||||
padding: 30upx 0;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
|
||||
.order-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-shouhuodizhi {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 90upx;
|
||||
color: #888;
|
||||
font-size: 44upx;
|
||||
}
|
||||
|
||||
.cen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
font-size: 28upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 34upx;
|
||||
margin-right: 24upx;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-top: 16upx;
|
||||
margin-right: 20upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
|
||||
.icon-you {
|
||||
font-size: 32upx;
|
||||
color: $font-color-light;
|
||||
margin-right: 30upx;
|
||||
}
|
||||
|
||||
.a-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 5upx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-section {
|
||||
margin-top: 16upx;
|
||||
background: #fff;
|
||||
padding-bottom: 1px;
|
||||
|
||||
.g-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 84upx;
|
||||
padding: 0 30upx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 30upx;
|
||||
color: $font-color-base;
|
||||
margin-left: 24upx;
|
||||
}
|
||||
|
||||
.g-item {
|
||||
display: flex;
|
||||
margin: 20upx 30upx;
|
||||
|
||||
image {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
width: 140upx;
|
||||
height: 140upx;
|
||||
border-radius: 4upx;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
padding-left: 24upx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
|
||||
.spec {
|
||||
font-size: 26upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32upx;
|
||||
color: $font-color-dark;
|
||||
padding-top: 10upx;
|
||||
|
||||
.price {
|
||||
margin-bottom: 4upx;
|
||||
}
|
||||
.number {
|
||||
font-size: 26upx;
|
||||
color: $font-color-base;
|
||||
margin-left: 20upx;
|
||||
}
|
||||
}
|
||||
|
||||
.step-box {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yt-list {
|
||||
margin-top: 16upx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.yt-list-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10upx 30upx 10upx 40upx;
|
||||
line-height: 70upx;
|
||||
position: relative;
|
||||
|
||||
&.cell-hover {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
&.b-b:after {
|
||||
left: 30upx;
|
||||
}
|
||||
|
||||
.cell-icon {
|
||||
height: 32upx;
|
||||
width: 32upx;
|
||||
font-size: 22upx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 32upx;
|
||||
background: #f85e52;
|
||||
border-radius: 4upx;
|
||||
margin-right: 12upx;
|
||||
|
||||
&.hb {
|
||||
background: #ffaa0e;
|
||||
}
|
||||
|
||||
&.lpk {
|
||||
background: #3ab54a;
|
||||
}
|
||||
}
|
||||
|
||||
.cell-more {
|
||||
align-self: center;
|
||||
font-size: 24upx;
|
||||
color: $font-color-light;
|
||||
margin-left: 8upx;
|
||||
margin-right: -10upx;
|
||||
}
|
||||
|
||||
.cell-tit {
|
||||
flex: 1;
|
||||
font-size: 26upx;
|
||||
color: $font-color-light;
|
||||
margin-right: 10upx;
|
||||
}
|
||||
|
||||
.cell-tip {
|
||||
font-size: 26upx;
|
||||
color: $font-color-dark;
|
||||
|
||||
&.disabled {
|
||||
color: $font-color-light;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $base-color;
|
||||
}
|
||||
&.red {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.desc-cell {
|
||||
.cell-tit {
|
||||
max-width: 90upx;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
flex: 1;
|
||||
font-size: $font-base;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
/* 支付列表 */
|
||||
.pay-list {
|
||||
padding-left: 40upx;
|
||||
margin-top: 16upx;
|
||||
background: #fff;
|
||||
.pay-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 20upx;
|
||||
line-height: 1;
|
||||
height: 110upx;
|
||||
position: relative;
|
||||
}
|
||||
.icon-weixinzhifu {
|
||||
width: 80upx;
|
||||
font-size: 40upx;
|
||||
color: #6bcc03;
|
||||
}
|
||||
.icon-alipay {
|
||||
width: 80upx;
|
||||
font-size: 40upx;
|
||||
color: #06b4fd;
|
||||
}
|
||||
.icon-xuanzhong2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
font-size: 40upx;
|
||||
color: $base-color;
|
||||
}
|
||||
.tit {
|
||||
font-size: 32upx;
|
||||
color: $font-color-dark;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 995;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 90upx;
|
||||
justify-content: space-between;
|
||||
font-size: 30upx;
|
||||
background-color: #fff;
|
||||
z-index: 998;
|
||||
color: $font-color-base;
|
||||
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
|
||||
.price-content {
|
||||
padding-left: 30upx;
|
||||
}
|
||||
.price-tip {
|
||||
color: $base-color;
|
||||
margin-left: 8upx;
|
||||
}
|
||||
.price {
|
||||
font-size: 36upx;
|
||||
color: $base-color;
|
||||
}
|
||||
.submit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 280upx;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
font-size: 32upx;
|
||||
background-color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* 优惠券面板 */
|
||||
.mask {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: var(--window-top);
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
z-index: 9995;
|
||||
transition: 0.3s;
|
||||
|
||||
.mask-content {
|
||||
width: 100%;
|
||||
min-height: 30vh;
|
||||
max-height: 70vh;
|
||||
background: #f3f3f3;
|
||||
transform: translateY(100%);
|
||||
transition: 0.3s;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
&.none {
|
||||
display: none;
|
||||
}
|
||||
&.show {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
|
||||
.mask-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 优惠券列表 */
|
||||
.coupon-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 20upx 24upx;
|
||||
background: #fff;
|
||||
.con {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 120upx;
|
||||
padding: 0 30upx;
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border-bottom: 1px dashed #f3f3f3;
|
||||
transform: scaleY(50%);
|
||||
}
|
||||
}
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
height: 100upx;
|
||||
}
|
||||
.title {
|
||||
font-size: 32upx;
|
||||
color: $font-color-dark;
|
||||
margin-bottom: 10upx;
|
||||
}
|
||||
.time {
|
||||
font-size: 24upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 26upx;
|
||||
color: $font-color-base;
|
||||
height: 100upx;
|
||||
}
|
||||
.price {
|
||||
font-size: 44upx;
|
||||
color: $base-color;
|
||||
&:before {
|
||||
content: '￥';
|
||||
font-size: 34upx;
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
font-size: 24upx;
|
||||
color: $font-color-light;
|
||||
line-height: 60upx;
|
||||
padding-left: 30upx;
|
||||
}
|
||||
.circle {
|
||||
position: absolute;
|
||||
left: -6upx;
|
||||
bottom: -10upx;
|
||||
z-index: 10;
|
||||
width: 20upx;
|
||||
height: 20upx;
|
||||
background: #f3f3f3;
|
||||
border-radius: 100px;
|
||||
&.r {
|
||||
left: auto;
|
||||
right: -6upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 分类推荐楼层 */
|
||||
.hot-floor {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20upx;
|
||||
.floor-img-box {
|
||||
width: 100%;
|
||||
height: 220upx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
&:after {
|
||||
padding: 10 30upx;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8);
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 30upx;
|
||||
color: $font-color-base;
|
||||
margin-left: 24upx;
|
||||
}
|
||||
.floor-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.floor-list {
|
||||
white-space: nowrap;
|
||||
padding: 20upx;
|
||||
padding-right: 50upx;
|
||||
border-radius: 6upx;
|
||||
margin-top: -140upx;
|
||||
margin-left: 30upx;
|
||||
background: #fff;
|
||||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.scoll-wrapper {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.floor-item {
|
||||
width: 180upx;
|
||||
margin-right: 20upx;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-dark;
|
||||
line-height: 1.8;
|
||||
image {
|
||||
width: 180upx;
|
||||
height: 180upx;
|
||||
border-radius: 6upx;
|
||||
}
|
||||
.price {
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
.more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
width: 180upx;
|
||||
height: 180upx;
|
||||
border-radius: 6upx;
|
||||
background: #f3f3f3;
|
||||
font-size: $font-base;
|
||||
color: $font-color-light;
|
||||
text:first-child {
|
||||
margin-bottom: 4upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
761
mallplusui-uniapp-wx/pages/order/createStoreOrder1.vue
Normal file
761
mallplusui-uniapp-wx/pages/order/createStoreOrder1.vue
Normal file
@@ -0,0 +1,761 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 地址 -->
|
||||
<navigator url="../../pagesU/address/address?source=1" class="address-section">
|
||||
<view class="order-content">
|
||||
<text class="yticon icon-shouhuodizhi"></text>
|
||||
<view class="cen">
|
||||
<view class="top">
|
||||
<text class="name">{{orderInfo.address.user_name}}</text>
|
||||
<text class="mobile">{{orderInfo.address.user_phone}}</text>
|
||||
</view>
|
||||
<text class="address">
|
||||
{{ orderInfo.address.area_province_name ? orderInfo.address.area_province_name : '' }} {{ orderInfo.address.area_city_name ? orderInfo.address.area_city_name : '' }}{{ orderInfo.address.area_county_name ? orderInfo.address.area_county_name : '' }}{{ orderInfo.address.area_town_name ? orderInfo.address.area_town_name : '' }}{{ orderInfo.address.area_village_name ? orderInfo.address.area_village_name : '' }}{{ orderInfo.address.address ? orderInfo.address.address : '' }}
|
||||
|
||||
</text>
|
||||
</view>
|
||||
<text class="yticon icon-you"></text>
|
||||
</view>
|
||||
|
||||
<image class="a-bg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAAFCAYAAAAaAWmiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Rjk3RjkzMjM2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Rjk3RjkzMjQ2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGOTdGOTMyMTY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGOTdGOTMyMjY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrEOZlQAAAiuSURBVHjazJp7bFvVHce/1/deXzuJHSdOM+fhpKMllI2SkTZpV6ULYrCHQGwrf41p/LENVk3QTipSWujKoyot1aQN0FYQQxtsMCS2SVuqsfFYHxBKYQNGV9ouZdA8nDipH4mT+HFf+51rO0pN0japrw9HreLe3Pqc3/me3+f3uFdIvfVuDIAPix1C9oceicFRVQWlvRWCkL1omqb1Of9z9rXZY65rhcO6x5ove19oWkX/RAaSMLOEkg+2Zt0wEcvoWOZzYZnXeWEbzmP7XPs11//LnOiDEY9DkGRwGw5a59QUTM2As+1qiD5v0TUvvC9Bc52KpmDSnju4ic7+CIinNVQoElYtcUM8jx2L1bzwPn14DOrHZ0hzEdxOPJtW16FH45CvuBzyZU22aH7Od9LnU/E0xpMqJG6iZ309qeqYNoA1gTJ4ZdF2zY2pJNSTfYCmkb85+GnO1hIbh+DzQVndaiHYTs3ZGJpifE/DyVnzi+X7pWqen8/i+8kPYUSjEORPCd9XtUKs9Fi+KMxjVzE0n9ZNnIgkYXwK+B5LafC4JKyudcMxD2+LqblGfNcY30VxJsfhcOCJ7xr02ATkluXE96DtmrPvPxFLIUH7zY3vOc0Z39O0oGtqy1DlFIuu+Zx8P/Ffa8/hEBey4rh0uuPWS6S6CRUhyGjG0hcfOWex+c9zXSsE5HmFzseP3H294Sl847VBRGJJQHTwy9wJNKAE7otLfXi2K3hRgeB81+bar8IDEPvFMxi6cxebnMx2cjrnDmiIwUAGDTvugX9de9E1L7R9NK1jc+8gnj8dy2rOKY/JRhgV8Cr405ea0HEBOxajeaHtySPvYvD2bUgdP0lmuzkl7oLl6Wn0wX/Dd1D/xG5bNc/f+7NjY9jyzghlM5QxS/ySOGt+Wlt3WwDXBz22a86gHrqjG7Hnekhz5uciN9NVDEBxXYng87vgEoqveZ7y+XsPE99vOTyAs1SkU+bOT3NKIJHUsIb4/rsL8L0YmrMRffQ3GNn8c6L7BOnu4pW10/xR4nsK9T+5FzWda2fXcEXTfLbtYUrc7joSwguno9kilZfsLNmgtaBcxv7rmudN2i9Fc8YRlsvkr6aOvoeBHxDf//MBzVfGke9p8vVhVN2wAQ1P7rFdczYeO34Wm4+Gsr4mcqzWMqQ5IX5rex3W1pUXX/PCRlwkjpEtDyLy9B8sPxcgLWzFpy7rWlTH3eq66AbUj0fh7lyJhn27oFzVck41mTdgdnU5+3fzbczsqqVwQ14aSuCrhwZoo3UEqCLW6biZJZZZom0e0UhlSiY3rvBjd0cdfLJjTrsXYvN8e5TvPEZ2PYbw9l9CrKqAWFNB+2+W/oiTc2l9BFefC/WPdqPyuxts1/zMlIrbqVB7OZSgaSWrC2eUWHUGcLa2MVrLyho3ftvVhNYq1ye6J8XUnI3JFw8idNdOaB+GIS+vsZhf6gMvsP1OJKGFx1H9o1sQeOSBXOcfc9pQDM3Z2PGvEeykxJ0l7AGaTyux4YKVLpOvs0BO/v0UQf17LdUzwdcskuaFHRo1NIrQxq1I9ByEc2kj+ZwDZsk1z/H9I+L7us+j4fHdUFa2FF3zQtv3DyTwrTcGoVFxXOeWKZEoPeNm+E66b7zSj71r6+ERHXN21C5V85nPmo7I3scRvncfxOoyiP7y0vNdyMZ17X9xmGR+43MPwvvtm23XnPH9h68P4u8U2yuJ7wonvmu0pigValf73XhmfRCt1S5bNbd6QK/0ov+2bhjDE8T3aj58p5hujCehjsZQs+lWLNl5N0RvuS2a5z/T8cLOd8K4/72wxdaAXHq+syGT7sOM7xLxvaOe+F5lu+bqYBjDd25H4s+vQ26ugSBL1lsEC+m4C8fQvMhXZXTa/CR8N96MekrapWCdvc1t+rvn32PY3juYrc7cEjjonFuMYQm97QsBPLSq1v7pKJAPbbwHZ3ueoqCyhJIJStqto8/BdMTh8q1A8PcPo+xrXbbP97ehSXydFWpjU0CZzO8xInM+CqSdTV688OVmBBT7O6DRh/dhYOt20nqSdK+f1RIqdRMqRXgrR90Dm+Dfsdn2+QYpeH7/8CBe+mAsq7nIsevKEjivgv1dQdzYUGH7dMlXe3FmwxZMTRyFgiZkW48mF0/XMYWqm75JfH8IUmPA1tlUMnHv+8T3N3J8d3Hkey6I3re6Djvaam1v/urhswjdsQ2jf/kVJRI1xHdPrh1lltzTWUxXai5H07N74P7KettnPDQyjWtf/ohglyJfl7jz/drP+vDrzgYsLZdtP2PRnz6B/u4t9I+U9cYCH81hddoFuBG4bxNq7v9xSfh+G/H9wKkIwF5JkR38fF3VLb73dDXhpsYS8P0Vxve7MZ14E04EkX2SumDj40Lkjz2LS9x1nZVqcK1rh1L/GaiZDB1GYwGPRi9+sA4r63odGEjAoKTZS0mTwUtoS2sTPioc1jd64KJqNZXRP9EtLFrLT5KQOd6H1JtvQ/SUQ1CUC1Z/tjp5MgXn51bAfc1VpAUVb6pqi+bsqRlrOB0ITSI0kUa1IvF7JcribPbxZnt9BYIeBZm0ap1BO2yHLMOIxjH111chmDocXg9XzZFR4fD74e5cA9GtQEulbLGbfaNMvv4+BfG3hiet9wxlUeDGdDPn68uqXVgVKKezbiBN/HHYoTnrqlORkDx0BHr/ABzVVbknbZysZ3wnRVyda6HU1UIjvpt28p2C+T+GEtYeeEh3jqcdKjl2BcWY65q9UAQb+c6+k3iePnaS+P5Pq8spOJ38fJ09RVI1OFuWo6xtJXSD+J6xh++OHN8PEt8HxtNY4pbAczC+m2Rnh8V3J9Q0Fa4LeG97YQdehj4aoSL9NZiZNMTKStp6g5/x5NsW37vWQaS1WXzPHvjihzYS/lgshbeJ75WySHm7wNXXk8SbK/xutOX4ntHtYRxE0eJn6uARaGf6ie++7GPNxVkf/78AAwCn1+RYqusbZQAAAABJRU5ErkJggg=="></image>
|
||||
</navigator>
|
||||
|
||||
<view class="goods-section">
|
||||
<block v-for="(item, index) in orderInfo.goods_data" :key="index">
|
||||
<view class="g-header b-b">
|
||||
<image class="logo" :src="domainHost + item.shop_info.shop_logo"></image>
|
||||
<text class="name">{{item.shop_info.shop_name}}</text>
|
||||
</view>
|
||||
<!-- 商品列表 -->
|
||||
<view class="g-item" v-for="(goodsItem, goodsIndex) in item.goods_list" :key="goodsIndex">
|
||||
<image :src="domainHost + (goodsItem.sku_picture_info==null?goodsItem.goods_picture_info.pic_cover_small:goodsItem.sku_picture_info.pic_cover_small)"></image>
|
||||
<view class="right">
|
||||
<text class="title clamp">{{goodsItem.goods_info.goods_name}}</text>
|
||||
<text class="spec">{{goodsItem.sku_info.sku_name==''?'标准版':goodsItem.sku_info.sku_name}}</text>
|
||||
<view class="price-box">
|
||||
<text class="price">￥{{goodsItem.total_price}}</text>
|
||||
<block v-if="goodsItem.sale_area.code==1">
|
||||
<uni-number-box
|
||||
class="step number"
|
||||
:min="1"
|
||||
:max="goodsItem.goods_info.max_buy==0?goodsItem.goods_info.stock:goodsItem.goods_info.max_buy"
|
||||
:value="goodsItem.num"
|
||||
:goodsId="goodsItem.goods_info.Id"
|
||||
:skuId="goodsItem.sku_info.sku_id"
|
||||
@eventChange="amountChange"
|
||||
></uni-number-box>
|
||||
</block>
|
||||
<block v-else>
|
||||
<text class="store_none disabled">此区域已售罄</text>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 优惠明细 -->
|
||||
<view class="yt-list">
|
||||
|
||||
<!--
|
||||
<view class="yt-list-cell b-b" @click="toggleMask('show')">
|
||||
<view class="cell-icon">
|
||||
券
|
||||
</view>
|
||||
<text class="cell-tit clamp">优惠券</text>
|
||||
<text class="cell-tip active">
|
||||
选择优惠券
|
||||
</text>
|
||||
<text class="cell-more wanjia wanjia-gengduo-d"></text>
|
||||
</view>
|
||||
-->
|
||||
<view class="yt-list-cell b-b">
|
||||
<view class="cell-icon hb">
|
||||
减
|
||||
</view>
|
||||
<text class="cell-tit clamp">商家促销</text>
|
||||
<text class="cell-tip disabled">暂无优惠</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 金额明细 -->
|
||||
<view class="yt-list">
|
||||
<view class="yt-list-cell b-b">
|
||||
<text class="cell-tit clamp">商品金额</text>
|
||||
<text class="cell-tip">￥{{orderInfo.total_money}}</text>
|
||||
</view>
|
||||
<view class="yt-list-cell b-b">
|
||||
<text class="cell-tit clamp" style="width: 200px;">金币抵扣</text>
|
||||
<text class="cell-tip">-￥{{orderInfo.total_max_use_coin}}</text>
|
||||
<!--
|
||||
<view class="con">
|
||||
<uni-number-box
|
||||
class="use_coin"
|
||||
:min="0"
|
||||
:max="orderInfo.total_max_use_coin"
|
||||
:value="use_coin"
|
||||
@eventChange="coinChange"
|
||||
></uni-number-box>
|
||||
</view>
|
||||
-->
|
||||
</view>
|
||||
<view class="yt-list-cell b-b">
|
||||
<text class="cell-tit clamp">运费</text>
|
||||
<text class="cell-tip">{{orderInfo.shipping_money==0?'包邮':'￥'+orderInfo.shipping_money}}</text>
|
||||
</view>
|
||||
<view class="yt-list-cell desc-cell">
|
||||
<text class="cell-tit clamp">备注</text>
|
||||
<input class="desc" type="text" v-model="member_message" placeholder="请填写备注信息" placeholder-class="placeholder" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部 -->
|
||||
<view class="footer">
|
||||
<view class="price-content">
|
||||
<text>实付款</text>
|
||||
<text class="price-tip">￥</text>
|
||||
<text class="price">{{orderInfo.pay_money}}</text>
|
||||
</view>
|
||||
<text class="submit" @click="submit">提交订单</text>
|
||||
</view>
|
||||
|
||||
<!-- 优惠券面板 -->
|
||||
<view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
|
||||
<view class="mask-content" @click.stop.prevent="stopPrevent">
|
||||
<!-- 优惠券页面，仿mt -->
|
||||
<view class="coupon-item" v-for="(item,index) in couponList" :key="index">
|
||||
<view class="con">
|
||||
<view class="left">
|
||||
<text class="title">{{item.title}}</text>
|
||||
<text class="time">有效期至2019-06-30</text>
|
||||
</view>
|
||||
<view class="right">
|
||||
<text class="price">{{item.price}}</text>
|
||||
<text>满30可用</text>
|
||||
</view>
|
||||
|
||||
<view class="circle l"></view>
|
||||
<view class="circle r"></view>
|
||||
</view>
|
||||
<text class="tips">限新用户使用</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniNumberBox from '@/components/uni-number-box.vue'
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright,
|
||||
uniNumberBox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
domainHost:'',
|
||||
orderInfo:[],
|
||||
queryInfo:[],
|
||||
maskState: 0, //优惠券面板显示状态
|
||||
member_message: '', //备注
|
||||
payType: 1, //1微信 2支付宝
|
||||
couponList: [
|
||||
{
|
||||
title: '新用户专享优惠券',
|
||||
price: 5,
|
||||
},
|
||||
{
|
||||
title: '庆五一发一波优惠券',
|
||||
price: 10,
|
||||
},
|
||||
{
|
||||
title: '优惠券优惠券优惠券优惠券',
|
||||
price: 15,
|
||||
}
|
||||
],
|
||||
use_coin:0,
|
||||
}
|
||||
},
|
||||
onLoad(option){
|
||||
//商品数据
|
||||
//let data = JSON.parse(option.data);
|
||||
this.domainHost = this.$http.Config.baseUrl
|
||||
this.queryInfo = JSON.parse(decodeURIComponent(this.$Route.query.list))
|
||||
this.queryInfo = JSON.stringify({goods_data:this.queryInfo})
|
||||
|
||||
this.order_Calculate()
|
||||
},
|
||||
onShow() {
|
||||
//this.order_Calculate()
|
||||
},
|
||||
methods: {
|
||||
//显示优惠券面板
|
||||
toggleMask(type){
|
||||
let timer = type === 'show' ? 10 : 300;
|
||||
let state = type === 'show' ? 1 : 0;
|
||||
this.maskState = 2;
|
||||
setTimeout(()=>{
|
||||
this.maskState = state;
|
||||
}, timer)
|
||||
},
|
||||
coinChange(data)
|
||||
{
|
||||
this.use_coin = data.number
|
||||
},
|
||||
amountChange(data) {
|
||||
let tempInfo = JSON.parse(this.queryInfo)
|
||||
let goodsList = tempInfo.goods_data
|
||||
for(var i=0;i<goodsList.length;i++)
|
||||
{
|
||||
if(goodsList[i].goods_id== data.goodsId && goodsList[i].sku_id==data.skuId)
|
||||
{
|
||||
goodsList[i].num = data.number;
|
||||
break;
|
||||
}
|
||||
}
|
||||
tempInfo.goods_data = goodsList
|
||||
this.queryInfo = JSON.stringify(tempInfo)
|
||||
this.order_Calculate()
|
||||
},
|
||||
changePayType(type){
|
||||
this.payType = type;
|
||||
},
|
||||
submit(){
|
||||
uni.showLoading({
|
||||
title: '请稍候'
|
||||
});
|
||||
|
||||
let data = JSON.parse(this.queryInfo)
|
||||
data.address_id = this.orderInfo.address.Id
|
||||
data.member_message = this.member_message
|
||||
|
||||
data = JSON.stringify(data)
|
||||
|
||||
this.$http.orderCreate(data).then(res => {
|
||||
uni.hideLoading();
|
||||
if(res.data.status==1)
|
||||
{
|
||||
this.$Router.push({
|
||||
name: 'pay',
|
||||
params: res.data.content
|
||||
})
|
||||
}
|
||||
else
|
||||
{
|
||||
uni.showToast({
|
||||
title:res.data.message,icon:'none'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
},
|
||||
stopPrevent(){}
|
||||
,order_Calculate()
|
||||
{
|
||||
let _this = this
|
||||
let data = this.queryInfo
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
});
|
||||
|
||||
if(this.orderInfo)
|
||||
{
|
||||
if(this.orderInfo.address)
|
||||
{
|
||||
let tempInfo = JSON.parse(this.queryInfo)
|
||||
tempInfo.address_id = this.orderInfo.address.Id
|
||||
data = JSON.stringify(tempInfo)
|
||||
}
|
||||
}
|
||||
this.$http.order_Calculate(data).then(res => {
|
||||
uni.hideLoading();
|
||||
if(res.data.status==1)
|
||||
{
|
||||
res.data.content.total_max_use_coin = parseFloat(res.data.content.total_max_use_coin)
|
||||
this.orderInfo = res.data.content
|
||||
if(this.orderInfo.address==null)
|
||||
{
|
||||
uni.showModal({
|
||||
title:'提示',
|
||||
content:'请先添加收货地址才可以购买商品！',
|
||||
success(res) {
|
||||
if (res.confirm)
|
||||
{
|
||||
_this.$Router.push({name:'address'})
|
||||
}
|
||||
else
|
||||
{
|
||||
_this.$Router.back()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
uni.showToast({
|
||||
title:res.data.message,icon:'none'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: $page-color-base;
|
||||
padding-bottom: 100upx;
|
||||
}
|
||||
|
||||
.address-section {
|
||||
padding: 30upx 0;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
|
||||
.order-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-shouhuodizhi {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 90upx;
|
||||
color: #888;
|
||||
font-size: 44upx;
|
||||
}
|
||||
|
||||
.cen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
font-size: 28upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 34upx;
|
||||
margin-right: 24upx;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-top: 16upx;
|
||||
margin-right: 20upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
|
||||
.icon-you {
|
||||
font-size: 32upx;
|
||||
color: $font-color-light;
|
||||
margin-right: 30upx;
|
||||
}
|
||||
|
||||
.a-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 5upx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-section {
|
||||
margin-top: 16upx;
|
||||
background: #fff;
|
||||
padding-bottom: 1px;
|
||||
|
||||
.g-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 84upx;
|
||||
padding: 0 30upx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 30upx;
|
||||
color: $font-color-base;
|
||||
margin-left: 24upx;
|
||||
}
|
||||
|
||||
.g-item {
|
||||
display: flex;
|
||||
margin: 20upx 30upx;
|
||||
|
||||
image {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
width: 140upx;
|
||||
height: 140upx;
|
||||
border-radius: 4upx;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
padding-left: 24upx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30upx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
|
||||
.spec {
|
||||
font-size: 26upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32upx;
|
||||
color: $font-color-dark;
|
||||
padding-top: 10upx;
|
||||
|
||||
.price {
|
||||
margin-bottom: 4upx;
|
||||
width: 100upx;
|
||||
}
|
||||
.number{
|
||||
/* #ifdef APP-PLUS */
|
||||
margin-top: 40upx;
|
||||
/* #endif */
|
||||
margin-left: 160upx;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.step-box {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yt-list {
|
||||
margin-top: 16upx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.yt-list-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10upx 30upx 10upx 40upx;
|
||||
line-height: 70upx;
|
||||
position: relative;
|
||||
|
||||
&.cell-hover {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
&.b-b:after {
|
||||
left: 30upx;
|
||||
}
|
||||
|
||||
.cell-icon {
|
||||
height: 32upx;
|
||||
width: 32upx;
|
||||
font-size: 22upx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 32upx;
|
||||
background: #f85e52;
|
||||
border-radius: 4upx;
|
||||
margin-right: 12upx;
|
||||
|
||||
&.hb {
|
||||
background: #ffaa0e;
|
||||
}
|
||||
|
||||
&.lpk {
|
||||
background: #3ab54a;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cell-more {
|
||||
align-self: center;
|
||||
font-size: 24upx;
|
||||
color: $font-color-light;
|
||||
margin-left: 8upx;
|
||||
margin-right: -10upx;
|
||||
}
|
||||
|
||||
.cell-tit {
|
||||
flex: 1;
|
||||
font-size: 26upx;
|
||||
color: $font-color-light;
|
||||
margin-right: 10upx;
|
||||
}
|
||||
|
||||
.cell-tip {
|
||||
font-size: 26upx;
|
||||
color: $font-color-dark;
|
||||
|
||||
&.disabled {
|
||||
color: $font-color-light;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $base-color;
|
||||
}
|
||||
&.red{
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.desc-cell {
|
||||
.cell-tit {
|
||||
max-width: 90upx;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
flex: 1;
|
||||
font-size: $font-base;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
/* 支付列表 */
|
||||
.pay-list{
|
||||
padding-left: 40upx;
|
||||
margin-top: 16upx;
|
||||
background: #fff;
|
||||
.pay-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 20upx;
|
||||
line-height: 1;
|
||||
height: 110upx;
|
||||
position: relative;
|
||||
}
|
||||
.icon-weixinzhifu{
|
||||
width: 80upx;
|
||||
font-size: 40upx;
|
||||
color: #6BCC03;
|
||||
}
|
||||
.icon-alipay{
|
||||
width: 80upx;
|
||||
font-size: 40upx;
|
||||
color: #06B4FD;
|
||||
}
|
||||
.icon-xuanzhong2{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
font-size: 40upx;
|
||||
color: $base-color;
|
||||
}
|
||||
.tit{
|
||||
font-size: 32upx;
|
||||
color: $font-color-dark;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.footer{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 995;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 90upx;
|
||||
justify-content: space-between;
|
||||
font-size: 30upx;
|
||||
background-color: #fff;
|
||||
z-index: 998;
|
||||
color: $font-color-base;
|
||||
box-shadow: 0 -1px 5px rgba(0,0,0,.1);
|
||||
.price-content{
|
||||
padding-left: 30upx;
|
||||
}
|
||||
.price-tip{
|
||||
color: $base-color;
|
||||
margin-left: 8upx;
|
||||
}
|
||||
.price{
|
||||
font-size: 36upx;
|
||||
color: $base-color;
|
||||
}
|
||||
.submit{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content: center;
|
||||
width: 280upx;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
font-size: 32upx;
|
||||
background-color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* 优惠券面板 */
|
||||
.mask{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: var(--window-top);
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: rgba(0,0,0,0);
|
||||
z-index: 9995;
|
||||
transition: .3s;
|
||||
|
||||
.mask-content{
|
||||
width: 100%;
|
||||
min-height: 30vh;
|
||||
max-height: 70vh;
|
||||
background: #f3f3f3;
|
||||
transform: translateY(100%);
|
||||
transition: .3s;
|
||||
overflow-y:scroll;
|
||||
}
|
||||
&.none{
|
||||
display: none;
|
||||
}
|
||||
&.show{
|
||||
background: rgba(0,0,0,.4);
|
||||
|
||||
.mask-content{
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 优惠券列表 */
|
||||
.coupon-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 20upx 24upx;
|
||||
background: #fff;
|
||||
.con{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 120upx;
|
||||
padding: 0 30upx;
|
||||
&:after{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border-bottom: 1px dashed #f3f3f3;
|
||||
transform: scaleY(50%);
|
||||
}
|
||||
}
|
||||
.left{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
height: 100upx;
|
||||
}
|
||||
.title{
|
||||
font-size: 32upx;
|
||||
color: $font-color-dark;
|
||||
margin-bottom: 10upx;
|
||||
}
|
||||
.time{
|
||||
font-size: 24upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 26upx;
|
||||
color: $font-color-base;
|
||||
height: 100upx;
|
||||
}
|
||||
.price{
|
||||
font-size: 44upx;
|
||||
color: $base-color;
|
||||
&:before{
|
||||
content: '￥';
|
||||
font-size: 34upx;
|
||||
}
|
||||
}
|
||||
.tips{
|
||||
font-size: 24upx;
|
||||
color: $font-color-light;
|
||||
line-height: 60upx;
|
||||
padding-left: 30upx;
|
||||
}
|
||||
.circle{
|
||||
position: absolute;
|
||||
left: -6upx;
|
||||
bottom: -10upx;
|
||||
z-index: 10;
|
||||
width: 20upx;
|
||||
height: 20upx;
|
||||
background: #f3f3f3;
|
||||
border-radius: 100px;
|
||||
&.r{
|
||||
left: auto;
|
||||
right: -6upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.con{
|
||||
flex: 1;
|
||||
}
|
||||
.use_coin{
|
||||
position:relative;
|
||||
|
||||
|
||||
|
||||
/* #ifndef APP-PLUS */
|
||||
left: 100upx;
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef APP-PLUS */
|
||||
top: 30upx;
|
||||
left: 80upx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.store_none{
|
||||
font-size: 26upx;
|
||||
color: $font-color-dark;
|
||||
|
||||
&.disabled {
|
||||
color: $font-color-light;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $base-color;
|
||||
}
|
||||
&.red{
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
position:relative;
|
||||
left: 250upx;
|
||||
}
|
||||
</style>
|
||||
291
mallplusui-uniapp-wx/pages/order/evaluate.vue
Normal file
291
mallplusui-uniapp-wx/pages/order/evaluate.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="content-top">
|
||||
<view class="img-list">
|
||||
<view class="img-list-item" v-for="item in info.orderItemList" :key="item.id">
|
||||
<view class="img-list-item-gray">
|
||||
<image class="img-list-item-l small-img" :src="item.productPic" mode="aspectFill"></image>
|
||||
<view class="img-list-item-r small-right" @click="goodsDetail(item.productId)">
|
||||
<view class="little-right-t">
|
||||
<view class="goods-name list-goods-name">{{ item.productName }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="evaluate-num">
|
||||
<view class="evaluate-num-t">商品评分</view>
|
||||
<view class="evaluate-num-b">
|
||||
<uni-rate value="2"></uni-rate>
|
||||
<uniRate size="18" :id="item.productId" :value="score[item.productId]" @change="changeScore"></uniRate>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="evaluate-content">
|
||||
<view class="evaluate-c-t"><textarea v-model="textarea[item.productId]" placeholder="宝贝满足你的期待吗? 说说你的使用心得" /></view>
|
||||
<view class="evaluate-c-b">
|
||||
<view class="goods-img-item" v-if="images[item.productId].length" v-for="(img, key) in images[item.productId]" :key="key">
|
||||
<image class="del" mode="" @click="removeImg(item.productId, key)"></image>
|
||||
<image class="" :src="img.url" mode="" @click="clickImg(img.url)"></image>
|
||||
</view>
|
||||
<view class="upload-img" v-show="isupload[item.productId]">
|
||||
<image class="icon" mode="" @click="uploadImg(item.productId)"></image>
|
||||
<view class="">上传照片</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="button-bottom">
|
||||
<button class="btn btn-square btn-b" hover-class="btn-hover" @click="toEvaluate" :disabled="submitStatus" :loading="submitStatus">提交评论</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
|
||||
import uniRate from '@/components/uni-rate/uni-rate.vue';
|
||||
import { goods } from '@/config/mixins.js';
|
||||
export default {
|
||||
mixins: [goods],
|
||||
components: {
|
||||
mallplusCopyright,
|
||||
uniRate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
orderId: 0,
|
||||
info: {}, // 订单详情
|
||||
images: [],
|
||||
score: [], // 商品评价
|
||||
textarea: [], // 商品评价信息
|
||||
isupload: [], // 启/禁用 图片上传按钮
|
||||
rate: 5,
|
||||
submitStatus: false
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.orderId = options.order_id;
|
||||
this.orderId
|
||||
? this.orderInfo()
|
||||
: this.$common.errorToShow('获取失败', () => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
// 获取vuex中状态
|
||||
maxUploadImg() {
|
||||
return 1;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取订单详情
|
||||
async orderInfo() {
|
||||
let params = { id: this.orderId };
|
||||
this.orderInfo = await Api.apiCall('get', Api.order.orderDetail, params);
|
||||
let images = [];
|
||||
let textarea = [];
|
||||
let upload = [];
|
||||
let score = [];
|
||||
|
||||
this.orderInfo.orderItemList.forEach(item => {
|
||||
if (item.type == 1) {
|
||||
images[item.productId] = [];
|
||||
textarea[item.productId] = '';
|
||||
upload[item.productId] = true;
|
||||
score[item.productId] = 5;
|
||||
}
|
||||
});
|
||||
|
||||
this.info = this.orderInfo;
|
||||
|
||||
this.images = images;
|
||||
this.textarea = textarea;
|
||||
this.score = score;
|
||||
this.isupload = upload;
|
||||
},
|
||||
// 上传图片
|
||||
uploadImg(key) {
|
||||
this.$otherApi.uploadFiles(res => {
|
||||
if (res.code == 200) {
|
||||
let img = {
|
||||
url: res.data,
|
||||
id: res.data
|
||||
};
|
||||
this.images[key].push(img);
|
||||
this.$common.successToShow(res.msg);
|
||||
} else {
|
||||
this.$common.errorToShow(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 删除图片
|
||||
removeImg(id, key) {
|
||||
this.images[id].splice(key, 1);
|
||||
},
|
||||
// 图片点击放大
|
||||
clickImg(img) {
|
||||
// 预览图片
|
||||
uni.previewImage({
|
||||
urls: img.split()
|
||||
});
|
||||
},
|
||||
// 改变评分
|
||||
changeScore(e) {
|
||||
this.score[e.id] = e.value;
|
||||
},
|
||||
// 提交评价
|
||||
async toEvaluate() {
|
||||
this.submitStatus = true;
|
||||
|
||||
var myArray = new Array();
|
||||
this.images.forEach((item, key) => {
|
||||
let itemmm = {
|
||||
goodsId: key,
|
||||
images: item.url,
|
||||
score: this.score[key],
|
||||
textarea: this.textarea[key]
|
||||
};
|
||||
myArray.push(itemmm);
|
||||
});
|
||||
let params = {
|
||||
orderId: this.orderId,
|
||||
items: JSON.stringify(myArray)
|
||||
};
|
||||
uni.showLoading({
|
||||
title: '请稍后'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '评价成功'
|
||||
});
|
||||
}, 600);
|
||||
|
||||
let data = await Api.apiCall('post', Api.order.orderevaluate, params);
|
||||
console.log(data);
|
||||
if (data) {
|
||||
// 更改订单列表页的订单状态
|
||||
let pages = getCurrentPages(); // 当前页
|
||||
let beforePage = pages[pages.length - 2]; // 上个页面
|
||||
if (beforePage !== undefined && beforePage.route === 'pages/order/order') {
|
||||
// #ifdef MP-WEIXIN
|
||||
beforePage.$vm.isReload = true;
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
beforePage.isReload = true;
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-ALIPAY
|
||||
beforePage.rootVM.isReload = true;
|
||||
// #endif
|
||||
}
|
||||
this.submitStatus = false;
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
uni.hideLoading();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
images: {
|
||||
handler() {
|
||||
this.images.forEach((item, key) => {
|
||||
this.isupload[key] = item.length > this.maxUploadImg ? false : true;
|
||||
});
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.img-list-item {
|
||||
padding: 30upx 20upx;
|
||||
}
|
||||
.img-list-item-gray {
|
||||
background-color: #f7f7f7;
|
||||
overflow: hidden;
|
||||
padding: 18upx 20upx;
|
||||
}
|
||||
.small-right {
|
||||
width: 520upx;
|
||||
}
|
||||
.evaluate-content {
|
||||
background-color: #fff;
|
||||
padding: 20upx 0upx;
|
||||
}
|
||||
.evaluate-c-t {
|
||||
width: 100%;
|
||||
height: 240upx;
|
||||
}
|
||||
.evaluate-c-t textarea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 26upx;
|
||||
padding: 10upx;
|
||||
}
|
||||
.evaluate-c-b {
|
||||
overflow: hidden;
|
||||
}
|
||||
.upload-img {
|
||||
width: 146upx;
|
||||
height: 146upx;
|
||||
margin: 14upx;
|
||||
text-align: center;
|
||||
color: #999999;
|
||||
font-size: 22upx;
|
||||
border: 2upx solid #e1e1e1;
|
||||
/* #ifdef MP-ALIPAY */
|
||||
border-top: 8upx solid #e1e1e1;
|
||||
/* #endif */
|
||||
border-radius: 4upx;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding: 24upx 0;
|
||||
}
|
||||
.goods-img-item {
|
||||
width: 174upx;
|
||||
height: 174upx;
|
||||
padding: 14upx;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
.goods-img-item:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.goods-img-item image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.del {
|
||||
width: 30upx !important;
|
||||
height: 30upx !important;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
.evaluate-num {
|
||||
padding: 20upx 26upx;
|
||||
background-color: #fff;
|
||||
margin-top: 20upx;
|
||||
}
|
||||
.evaluate-num-t {
|
||||
color: #333;
|
||||
font-size: 28upx;
|
||||
margin-bottom: 20upx;
|
||||
}
|
||||
.button-bottom .btn {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
230
mallplusui-uniapp-wx/pages/order/logistics.vue
Normal file
230
mallplusui-uniapp-wx/pages/order/logistics.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div class="div-bg bg-white" >
|
||||
<div style="height: 0.5rem;width: 100%;background-color:#f7f7f7"></div>
|
||||
<!--物流跟踪-->
|
||||
<div style="padding-bottom: 0.5rem;">
|
||||
<div class="bg-white" style="width: 92%; margin-left: 4%;margin: auto;padding-left: 15px;padding-right: 15px;">
|
||||
<div style="font-size: 1rem;color: #111111;">物流跟踪<!--物流跟踪--></div>
|
||||
<div>
|
||||
<div class="track-rcol">
|
||||
<div class="track-list">
|
||||
<ul>
|
||||
<div v-for="(item,index) in logisticsList" :key="index">
|
||||
<li class="first" v-if="index===0">
|
||||
<div></div>
|
||||
<i class="node-icon"></i>
|
||||
<span class="txt">{{item.AcceptStation}}</span>
|
||||
<span class="time">{{item.AcceptTime}}</span>
|
||||
</li>
|
||||
<li v-if="index > 0 && index !== logisticsList.length-1">
|
||||
<i class="node-icon"></i>
|
||||
<span class="txt">{{item.AcceptStation}}</span>
|
||||
<span class="time">{{item.AcceptTime}}</span>
|
||||
</li>
|
||||
<li v-if="index === logisticsList.length-1" class="finall">
|
||||
<i class="div-spilander"></i>
|
||||
<i class="node-icon"></i>
|
||||
<span class="txt">{{item.AcceptStation}}</span>
|
||||
<span class="time">{{item.AcceptTime}}</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Api from '@/common/api';
|
||||
|
||||
export default {
|
||||
name: 'Logic',
|
||||
data () {
|
||||
return {
|
||||
logisticsList: []
|
||||
}
|
||||
},
|
||||
async onLoad(options) {
|
||||
let params = { orderId: options.order_id };
|
||||
let returnLogisticby = await Api.apiCall('get', Api.order.logisticbyapi, params);
|
||||
this.logisticsList = returnLogisticby.Traces;
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
/**
|
||||
* 加载时执行
|
||||
*/
|
||||
mounted: function () {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.message-text{
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 3rem;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
width: 50%;
|
||||
}
|
||||
.fontblack{
|
||||
color:#999999
|
||||
}
|
||||
.img2{
|
||||
width: .81rem;
|
||||
height: .8rem;
|
||||
float: right;
|
||||
}
|
||||
.addressshow2{
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
width: 75%;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.addressshow1{
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
width: 75%;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.orderTitle{
|
||||
font-size: 1rem;
|
||||
color: #333333;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
height: 2.5rem;
|
||||
}
|
||||
.orderDetail{
|
||||
font-size: 0.8rem;
|
||||
color: #666666;
|
||||
text-align:left;
|
||||
}
|
||||
.border-ceter{
|
||||
width: 92%;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.pay-button{
|
||||
width: 88%;
|
||||
height: 2.6rem;
|
||||
position:relative;
|
||||
background-color: red;
|
||||
color: white;
|
||||
|
||||
margin-left: 6%;
|
||||
}
|
||||
ul li{
|
||||
list-style:none;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
ul {
|
||||
padding-left: 1.5rem
|
||||
}
|
||||
.track-rcol{}
|
||||
.track-list{
|
||||
position:relative;
|
||||
}
|
||||
.track-list li{
|
||||
position:relative;
|
||||
padding:0px 0 1.5rem 25px;
|
||||
line-height:1rem;
|
||||
border-left:1px solid #d9d9d9;
|
||||
color: #999;
|
||||
}
|
||||
.track-list li.first{
|
||||
color:red;
|
||||
padding-top:0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-left:1px solid #d9d9d9;
|
||||
}
|
||||
.track-list li .node-icon{
|
||||
position: absolute;
|
||||
left: -5.5px;
|
||||
border-radius: 0.25rem;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
top:4px;
|
||||
background-color: #999999;
|
||||
}
|
||||
.track-list li.first .node-icon{
|
||||
background-position:0-72px;
|
||||
background-color: red;
|
||||
width: 1rem;
|
||||
z-index: 2;
|
||||
height: 1rem;
|
||||
position: absolute;
|
||||
left: -9px;
|
||||
top: 0;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.track-list li .time{
|
||||
margin-right:20px;
|
||||
position:relative;
|
||||
top:4px;
|
||||
display:inline-block;
|
||||
vertical-align:middle;
|
||||
background-color: white;
|
||||
color: #999;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
.track-list li .txt{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
vertical-align:top;
|
||||
color: #999;
|
||||
}
|
||||
.track-list li.first .time{
|
||||
text-align: left;
|
||||
width: 94%;
|
||||
color:red;
|
||||
}
|
||||
.track-list li.first .txt{
|
||||
color: red;
|
||||
text-align: left;
|
||||
width: 94%;
|
||||
}
|
||||
.track-list li.finall{
|
||||
position:relative;
|
||||
padding:0px 0 1.5rem 25px;
|
||||
line-height:18px;
|
||||
border-color: white;
|
||||
border-left:1px solid #ffffff;
|
||||
color: #999;
|
||||
}
|
||||
.track-list li.finall .div-spilander{
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
left: -1.5px;
|
||||
height: 0.5rem;
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
|
||||
</style>
|
||||
671
mallplusui-uniapp-wx/pages/order/order.vue
Normal file
671
mallplusui-uniapp-wx/pages/order/order.vue
Normal file
@@ -0,0 +1,671 @@
|
||||
<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" @click="navToDetailPage(item)">{{ item.createTime }}</text>
|
||||
<text class="state" :style="{ color: item.stateTipColor }" @click="navToDetailPage(item)">{{ item.id }}--</text>
|
||||
<text class="state" :style="{ color: item.stateTipColor }" @click="navToDetailPage(item)">{{ item.stateTip }}</text>
|
||||
<!-- <text v-if="item.status === 12" class="del-btn yticon icon-iconfontshanchu1" @click="deleteOrder(index)"></text> -->
|
||||
</view>
|
||||
|
||||
<scroll-view v-if="item.orderItemList.length > 1" class="goods-box" scroll-y>
|
||||
<view v-for="(goodsItem, goodsIndex) in item.orderItemList" :key="goodsIndex" class="goods-item">
|
||||
<img class="goods-img" :src="goodsItem.productPic" @click="navToDetailPage(item)" mode="aspectFill" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view v-if="item.orderItemList.length === 1" class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.orderItemList" :key="goodsIndex">
|
||||
<img class="goods-img" :src="goodsItem.productPic" mode="aspectFill" />
|
||||
<view class="right" @click="navToDetailPage(item)">
|
||||
<text class="title clamp">{{ goodsItem.productName }}</text>
|
||||
<text class="attr-box">{{ goodsItem.productAttr }} x {{ goodsItem.productQuantity }}</text>
|
||||
<text class="price">{{ goodsItem.productPrice }}</text><br/>
|
||||
<text class="title clamp" v-if="item.status === 5">{{ item.deliveryCompany }}:{{ item.deliverySn }}</text>
|
||||
<text class="title clamp" v-if="item.status === 3">{{ item.deliveryCompany }}:{{ item.deliverySn }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="price-box">
|
||||
共
|
||||
<text class="num">{{ item.orderItemList.length }}</text>
|
||||
件商品 实付款
|
||||
<text class="price">{{ item.payAmount }}</text>
|
||||
</view>
|
||||
<view class="action-box b-t">
|
||||
<text class="state" :style="{ color: item.stateTipColor }" v-if="item.orderType == 6">秒杀订单</text>
|
||||
<text class="state" :style="{ color: item.stateTipColor }" v-else-if="item.orderType == 2">拼团订单</text>
|
||||
<text class="state" :style="{ color: item.stateTipColor }" v-else-if="item.orderType == 3">团购订单</text>
|
||||
<text class="state" :style="{ color: item.stateTipColor }" v-else-if="item.orderType == 4">砍价订单</text>
|
||||
<text class="state" :style="{ color: item.stateTipColor }" v-else-if="item.orderType == 5">积分订单</text>
|
||||
<button v-if="item.status == 12" class="action-btn" @click="cancelOrder(item)">取消订单</button>
|
||||
<button v-if="item.status == 12" class="action-btn recom" @click="payOrder(item)">立即支付</button>
|
||||
<button v-if="item.status > 2 && item.status < 10" class="action-btn recom" @click="lookLogistics(item.id)">物流追踪</button>
|
||||
<button v-if="item.status < 5" class="action-btn recom" @click="applyRefund(item.id)">申请售后</button>
|
||||
<button v-if="item.status == 3" class="action-btn recom" @click="confimDelivery(item)">确认收货</button>
|
||||
<button class="action-btn recom" hover-class="btn-hover" v-if="item.status === 4" @click="toEvaluate(item.id)">立即评价</button>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more :status="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,
|
||||
pageNum: 1,
|
||||
orderList: [],
|
||||
headerPosition: 'fixed',
|
||||
headerTop: '0px',
|
||||
loadingType: 'loading', //加载更多状态
|
||||
navList: [
|
||||
{
|
||||
status: 0,
|
||||
text: '全部',
|
||||
loadingType: 'loading',
|
||||
orderList: []
|
||||
},
|
||||
{
|
||||
status: 12,
|
||||
text: '待付款',
|
||||
loadingType: 'loading',
|
||||
orderList: []
|
||||
},
|
||||
{
|
||||
status: 2,
|
||||
text: '待发货',
|
||||
loadingType: 'loading',
|
||||
orderList: []
|
||||
},
|
||||
{
|
||||
status: 3,
|
||||
text: '已发货',
|
||||
loadingType: 'loading',
|
||||
orderList: []
|
||||
},
|
||||
{
|
||||
status: 5,
|
||||
text: '已完成',
|
||||
loadingType: 'loading',
|
||||
orderList: []
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
/**
|
||||
* 修复app端点击除全部订单外的按钮进入时不加载数据的问题
|
||||
* 替换onLoad下代码即可
|
||||
*/
|
||||
this.tabCurrentIndex = +options.status;
|
||||
|
||||
this.loadData();
|
||||
},
|
||||
onPageScroll(e) {
|
||||
//兼容iOS端下拉时顶部漂移
|
||||
if (e.scrollTop >= 0) {
|
||||
this.headerPosition = 'fixed';
|
||||
} else {
|
||||
this.headerPosition = 'absolute';
|
||||
}
|
||||
},
|
||||
//下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.pageNum = 1;
|
||||
this.loadData('refresh');
|
||||
},
|
||||
//加载更多
|
||||
onReachBottom() {
|
||||
this.pageNum = this.pageNum+1;
|
||||
this.loadData('refresh');
|
||||
},
|
||||
computed: {
|
||||
...mapState(['hasLogin', 'userInfo'])
|
||||
},
|
||||
methods: {
|
||||
//详情
|
||||
navToDetailPage(item) {
|
||||
//测试数据没有写id，用title代替
|
||||
let id = item.id;
|
||||
uni.navigateTo({
|
||||
url: `/pages/order/orderDetail?id=${id}`
|
||||
});
|
||||
},
|
||||
//获取订单列表
|
||||
async loadData(type = 'add', loading) {
|
||||
//这里是将订单挂载到tab列表下
|
||||
let index = this.tabCurrentIndex;
|
||||
let navItem = this.navList[index];
|
||||
console.log(navItem);
|
||||
let status = navItem.status;
|
||||
let url;
|
||||
|
||||
let params = { pageNum: this.pageNum, status: status };
|
||||
let data = await Api.apiCall('get', Api.order.orderList, params);
|
||||
console.log("data:------"+JSON.stringify(data))
|
||||
let goodsList = data.records;
|
||||
let goodsListJson = JSON.stringify(goodsList)
|
||||
console.log("goodsList:"+goodsListJson)
|
||||
let orderList = goodsList.filter(item => {
|
||||
//添加不同状态下订单的表现形式
|
||||
item = Object.assign(item, this.orderStateExp(item.status));
|
||||
item.createTime = this.dateFormat(item.createTime);
|
||||
//演示数据所以自己进行状态筛选
|
||||
if (status === 0) {
|
||||
//0为全部订单
|
||||
return item;
|
||||
}
|
||||
return item.status === status;
|
||||
});
|
||||
|
||||
if (type === 'refresh') {
|
||||
this.orderList = [];
|
||||
}
|
||||
this.orderList = this.orderList.concat(orderList);
|
||||
console.log("this.orderList.length======:"+this.orderList.length)
|
||||
console.log("data.total======:"+data.total)
|
||||
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
|
||||
this.loadingType = this.orderList.length >= data.total ? 'nomore' : 'loading';
|
||||
if (type === 'refresh') {
|
||||
if (loading == 1) {
|
||||
uni.hideLoading();
|
||||
} else {
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
}
|
||||
|
||||
navItem.orderList = [];
|
||||
console.log(JSON.stringify(orderList))
|
||||
orderList.forEach(item => {
|
||||
console.log("item-----:"+item)
|
||||
navItem.orderList.push(item);
|
||||
});
|
||||
},
|
||||
|
||||
//swiper 切换
|
||||
changeTab(e) {
|
||||
this.tabCurrentIndex = e.target.current;
|
||||
//this.pageNum = 1;
|
||||
this.loadData('refresh');
|
||||
},
|
||||
//顶部tab点击
|
||||
tabClick(index) {
|
||||
this.pageNum = 1;
|
||||
this.loadData('refresh');
|
||||
this.tabCurrentIndex = index;
|
||||
},
|
||||
//删除订单
|
||||
async deleteOrder(index) {
|
||||
uni.showLoading({
|
||||
title: '请稍后'
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '删除成功'
|
||||
});
|
||||
}, 600);
|
||||
},
|
||||
async payOrder(item) {
|
||||
let url = '/pages/order/payment/index?order_id=' + item.id + '&type=1';
|
||||
this.$common.navigateTo(url);
|
||||
},
|
||||
//取消订单
|
||||
async cancelOrder(item) {
|
||||
let params = { orderId: item.id };
|
||||
let data = await Api.apiCall('post', Api.order.closeOrder, params);
|
||||
console.log(data)
|
||||
if (data) {
|
||||
this.$api.msg(data);
|
||||
this.pageNum = 1;
|
||||
this.loadData('refresh');
|
||||
this.tabCurrentIndex = 4;
|
||||
}
|
||||
},
|
||||
//订单确认收货
|
||||
async confimDelivery(item) {
|
||||
let params = { id: item.id };
|
||||
let data = await Api.apiCall('post', Api.order.confimDelivery, params);
|
||||
console.log(data);
|
||||
if (data) {
|
||||
this.$api.msg(data);
|
||||
this.pageNum = 1;
|
||||
this.loadData('refresh');
|
||||
this.tabCurrentIndex = 4;
|
||||
}
|
||||
},
|
||||
lookLogistics(orderId) {
|
||||
this.$common.navigateTo('/pages/order/logistics?order_id=' + orderId);
|
||||
},
|
||||
|
||||
// 申请售后
|
||||
applyRefund(orderId) {
|
||||
this.$common.navigateTo('../../pagesA/after_sale/index?order_id=' + orderId);
|
||||
},
|
||||
|
||||
//订单申请退款
|
||||
async applyRefund1(item) {
|
||||
let params = { id: item.id };
|
||||
let data = await Api.apiCall('post', Api.order.applyRefund, params);
|
||||
if (data) {
|
||||
console.log(data);
|
||||
this.$api.msg(data);
|
||||
}
|
||||
this.pageNum = 1;
|
||||
this.loadData('refresh');
|
||||
this.tabCurrentIndex = 5;
|
||||
},
|
||||
// 去评价
|
||||
toEvaluate(orderId) {
|
||||
this.$common.navigateTo('/pages/order/evaluate?order_id=' + orderId);
|
||||
},
|
||||
|
||||
//订单状态文字和颜色
|
||||
orderStateExp(value) {
|
||||
let stateTip = '',
|
||||
stateTipColor = '#fa436a';
|
||||
if (value === 12) {
|
||||
stateTipColor = '#909399';
|
||||
stateTip = '待付款';
|
||||
}
|
||||
if (value === 1) {
|
||||
stateTipColor = '#909399';
|
||||
stateTip = '支付成功，没有回掉';
|
||||
}
|
||||
if (value === 2) {
|
||||
stateTip = '待发货';
|
||||
} else if (value === 3) {
|
||||
stateTip = '待收货';
|
||||
} else if (value === 4) {
|
||||
stateTip = '待评价';
|
||||
} else if (value === 5) {
|
||||
stateTip = '已完成';
|
||||
} else if (value === 6) {
|
||||
stateTipColor = '#909399';
|
||||
stateTip = '维权中';
|
||||
} else if (value === 7) {
|
||||
stateTip = ' 维权已完成';
|
||||
} else if (value === 8) {
|
||||
stateTip = '待分享';
|
||||
} else if (value === 13) {
|
||||
stateTip = '申请退款';
|
||||
} else if (value === 14) {
|
||||
stateTip = '已退款';
|
||||
} else if (value === 15) {
|
||||
stateTip = '已关闭';
|
||||
} else if (value === 16) {
|
||||
stateTip = '无效订单';
|
||||
} else if (value === 18) {
|
||||
stateTip = '拼团下单';
|
||||
} else {
|
||||
stateTip = '待付款';
|
||||
}
|
||||
|
||||
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>
|
||||
590
mallplusui-uniapp-wx/pages/order/orderDetail.vue
Normal file
590
mallplusui-uniapp-wx/pages/order/orderDetail.vue
Normal file
@@ -0,0 +1,590 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
|
||||
<swiper-item class="tab-content">
|
||||
<scroll-view class="list-scroll-content" scroll-y>
|
||||
<!-- 订单列表 -->
|
||||
<view class="order-item">
|
||||
<view class="i-top b-b">
|
||||
<text class="time">{{ orderInfo.createTime }}</text>
|
||||
<text class="state" :style="{ color: orderInfo.stateTipColor }" @click="navToDetailPage(item)">{{ orderInfo.id }}--</text>
|
||||
<text class="state" :style="{ color: orderInfo.stateTipColor }">{{ orderInfo.stateTip }}</text>
|
||||
<text v-if="orderInfo.status === 9" class="del-btn yticon icon-iconfontshanchu1" @click="deleteOrder(index)"></text>
|
||||
</view>
|
||||
<view class="i-top b-b">
|
||||
<text class="state" :style="{ color: orderInfo.stateTipColor }">订单商品</text>
|
||||
</view>
|
||||
|
||||
<view v-if="goodsItem.type === 1" class="goods-box-single" v-for="(goodsItem, goodsIndex) in orderInfo.orderItemList" :key="goodsIndex">
|
||||
<img class="goods-img" :src="goodsItem.productPic" mode="aspectFill"></img>
|
||||
<view class="right">
|
||||
<text class="title clamp">{{ goodsItem.productName }}</text>
|
||||
<text class="attr-box">{{ goodsItem.productAttr }} x {{ goodsItem.productQuantity }}</text>
|
||||
<text class="price">{{ goodsItem.productPrice }} </text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="i-top b-b">
|
||||
<text class="state" :style="{ color: orderInfo.stateTipColor }">订单赠品</text>
|
||||
</view>
|
||||
<view v-if="goodsItem.type === 2" class="goods-box-single" v-for="(goodsItem, goodsIndex) in orderInfo.orderItemList" :key="goodsIndex">
|
||||
<img class="goods-img" :src="goodsItem.productPic" mode="aspectFill"></img>
|
||||
<view class="right">
|
||||
<text class="title clamp">{{ goodsItem.productName }}</text>
|
||||
<text class="attr-box">{{ goodsItem.productAttr }} x {{ goodsItem.productQuantity }}</text>
|
||||
<text class="price">{{ goodsItem.productPrice }} </text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="price-box">
|
||||
共
|
||||
<text class="num">{{ orderInfo.orderItemList.length }}</text>
|
||||
件商品, 会员折扣
|
||||
<text class="price">{{ orderInfo.vipAmount }}</text>
|
||||
优惠券抵扣
|
||||
<text class="price">{{ orderInfo.couponAmount }}</text>
|
||||
</view>
|
||||
<view class="price-box">
|
||||
积分抵扣
|
||||
<text class="price">{{ orderInfo.integrationAmount }}</text>
|
||||
,运费
|
||||
<text class="price">{{ orderInfo.freightAmount }}</text>
|
||||
<view class="yt-list-cell b-b" v-if="groupActivity">
|
||||
<text class="cell-tit clamp">活动金额</text>
|
||||
<text class="cell-tip">￥{{ groupActivity.price }}</text>
|
||||
</view>
|
||||
,实付款
|
||||
<text class="price">{{ orderInfo.payAmount }}</text>
|
||||
</view>
|
||||
<view class="action-box b-t">
|
||||
<button v-if="orderInfo.status == 12" class="action-btn" @click="cancelOrder(orderInfo)">取消订单</button>
|
||||
<button v-if="orderInfo.status == 12" class="action-btn recom" @click="payOrder(orderInfo)">立即支付</button>
|
||||
<button v-if="orderInfo.status <7" class="action-btn recom" @click="applyRefund(orderInfo.id)">申请售后</button>
|
||||
<button v-if="orderInfo.status == 3" class="action-btn recom" @click="confimDelivery(orderInfo)">确认收货</button>
|
||||
<button class='action-btn recom'
|
||||
hover-class="btn-hover"
|
||||
v-if="orderInfo.status === 4"
|
||||
@click="toEvaluate(orderInfo.id)"
|
||||
>立即评价</button>
|
||||
</view>
|
||||
</view>
|
||||
</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 Json from '@/Json';
|
||||
import { formatDate } from '@/common/date';
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright,
|
||||
uniLoadMore,
|
||||
empty
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabCurrentIndex: 0,
|
||||
orderInfo: [],
|
||||
navList: [
|
||||
{
|
||||
status: 0,
|
||||
text: '全部',
|
||||
loadingType: 'more',
|
||||
orderList: []
|
||||
},
|
||||
{
|
||||
status: 12,
|
||||
text: '待付款',
|
||||
loadingType: 'more',
|
||||
orderList: []
|
||||
},
|
||||
{
|
||||
status: 2,
|
||||
text: '待发货',
|
||||
loadingType: 'more',
|
||||
orderList: []
|
||||
},
|
||||
{
|
||||
status: 3,
|
||||
text: '已发货',
|
||||
loadingType: 'more',
|
||||
orderList: []
|
||||
},
|
||||
{
|
||||
status: 4,
|
||||
text: '已完成',
|
||||
loadingType: 'more',
|
||||
orderList: []
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
async onLoad(options) {
|
||||
let params = { id: options.id };
|
||||
this.orderInfo = await Api.apiCall('get', Api.order.orderDetail, params);
|
||||
this.orderInfo = Object.assign(this.orderInfo, this.orderStateExp(this.orderInfo.status));
|
||||
this.orderInfo.createTime = this.dateFormat(this.orderInfo.createTime);
|
||||
},
|
||||
|
||||
methods: {
|
||||
//swiper 切换
|
||||
changeTab(e) {
|
||||
this.tabCurrentIndex = e.target.current;
|
||||
this.loadData('tabChange');
|
||||
},
|
||||
//顶部tab点击
|
||||
tabClick(index) {
|
||||
this.tabCurrentIndex = index;
|
||||
},
|
||||
//删除订单
|
||||
async deleteOrder(index) {
|
||||
uni.showLoading({
|
||||
title: '请稍后'
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
|
||||
uni.hideLoading();
|
||||
}, 600);
|
||||
},
|
||||
async payOrder(item) {
|
||||
let url = '/pages/order/payment/index?order_id=' + item.id + '&type=1' ;
|
||||
this.$common.navigateTo(
|
||||
url
|
||||
)
|
||||
},
|
||||
//取消订单
|
||||
async cancelOrder(item) {
|
||||
uni.showLoading({
|
||||
title: '请稍后'
|
||||
});
|
||||
let params = { orderId: item.id };
|
||||
let data = await Api.apiCall('post', Api.order.closeOrder, params);
|
||||
|
||||
if (data) {
|
||||
this.$api.msg(data.data);
|
||||
}
|
||||
uni.hideLoading();
|
||||
},
|
||||
//订单确认收货
|
||||
async confimDelivery(item) {
|
||||
uni.showLoading({
|
||||
title: '请稍后'
|
||||
});
|
||||
let params = { id: item.id };
|
||||
let data = await Api.apiCall('post', Api.order.confimDelivery, params);
|
||||
|
||||
if (data) {
|
||||
this.$api.msg(data);
|
||||
}
|
||||
uni.hideLoading();
|
||||
},
|
||||
// 申请售后
|
||||
applyRefund(orderId) {
|
||||
this.$common.navigateTo(
|
||||
'../../pagesA/after_sale/index?order_id=' + orderId
|
||||
)
|
||||
},
|
||||
|
||||
//订单申请退款
|
||||
async applyRefund1(item) {
|
||||
uni.showLoading({
|
||||
title: '请稍后'
|
||||
});
|
||||
let params = { id: item.id };
|
||||
let data = await Api.apiCall('post', Api.order.applyRefund, params);
|
||||
console.log(data);
|
||||
if (data) {
|
||||
this.$api.msg(data.data);
|
||||
}
|
||||
uni.hideLoading();
|
||||
},
|
||||
// 去评价
|
||||
toEvaluate(orderId) {
|
||||
this.$common.navigateTo(
|
||||
'/pages/order/evaluate?order_id=' + orderId
|
||||
)
|
||||
},
|
||||
//订单状态文字和颜色
|
||||
orderStateExp(value) {
|
||||
let stateTip = '',
|
||||
stateTipColor = '#fa436a';
|
||||
if (value === 12) {
|
||||
stateTipColor = '#909399';
|
||||
return '待付款';
|
||||
}if (value === 1) {
|
||||
stateTipColor = '#909399';
|
||||
return '支付成功，没有回掉';
|
||||
}if (value === 2) {
|
||||
stateTip = '待发货';
|
||||
} else if (value === 3) {
|
||||
stateTip = '待收货';
|
||||
} else if (value === 4) {
|
||||
stateTip = '待评价';
|
||||
} else if (value === 5) {
|
||||
stateTip = '已完成';
|
||||
} else if (value === 6) {
|
||||
stateTipColor = '#909399';
|
||||
stateTip = '维权中';
|
||||
} else if (value === 7) {
|
||||
stateTip = ' 维权已完成';
|
||||
} else if (value === 8) {
|
||||
stateTip = '待分享';
|
||||
} else if (value === 13) {
|
||||
stateTip = '申请退款';
|
||||
} else if (value === 14) {
|
||||
stateTip = '已退款';
|
||||
} else if (value === 15) {
|
||||
stateTip = '已关闭';
|
||||
} else if (value === 16) {
|
||||
stateTip = '无效订单';
|
||||
} else {
|
||||
stateTip = '待付款';
|
||||
}
|
||||
|
||||
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>
|
||||
159
mallplusui-uniapp-wx/pages/order/payment/auth.vue
Normal file
159
mallplusui-uniapp-wx/pages/order/payment/auth.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="content-c">
|
||||
|
||||
<view class="load-text color-9">信息加载中.....</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: '',
|
||||
openid: '',
|
||||
orderId: '',
|
||||
state: ''
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.orderId = options.order_id
|
||||
this.money = Number(options.money)
|
||||
this.type = Number(options.type)
|
||||
this.uid = Number(options.uid)
|
||||
this.state = this.$common.getQueryString('state')
|
||||
this.getCode()
|
||||
},
|
||||
methods: {
|
||||
getCode() {
|
||||
var code = this.$common.getQueryString('code')
|
||||
code && this.getOpenId(code)
|
||||
},
|
||||
async getOpenId(code) {
|
||||
console.log(code)
|
||||
let params = {
|
||||
code: code,
|
||||
scope: 2,
|
||||
state: this.state
|
||||
}
|
||||
//模拟接口
|
||||
let res = await Api.apiCall('get',Api.order.authCodeToOpenid,params);
|
||||
console.log(res);
|
||||
if (res) {
|
||||
this.login(data);
|
||||
console.log(data);
|
||||
this.$db.set('userInfos', data.userInfo);
|
||||
this.$db.set('token', data.tokenHead+data.token);
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
|
||||
//this.openid = res.data
|
||||
// this.toPayHandler('wechatpay')
|
||||
} else {
|
||||
this.$common.errorToShow(res)
|
||||
}
|
||||
|
||||
},
|
||||
checkWXJSBridge(data) {
|
||||
let that = this
|
||||
let interval = setInterval(() => {
|
||||
if (typeof window.WeixinJSBridge != 'undefined') {
|
||||
clearTimeout(interval)
|
||||
that.onBridgeReady(data)
|
||||
}
|
||||
}, 200)
|
||||
},
|
||||
onBridgeReady(data) {
|
||||
var _this = this
|
||||
window.WeixinJSBridge.invoke(
|
||||
'getBrandWCPayRequest',
|
||||
{
|
||||
appId: data.appid, // 公众号名称，由商户传入
|
||||
timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数
|
||||
nonceStr: data.nonceStr, // 随机串
|
||||
package: data.package,
|
||||
signType: data.signType, // 微信签名方式：
|
||||
paySign: data.paySign // 微信签名
|
||||
},
|
||||
function(res) {
|
||||
if (res.err_msg === 'get_brand_wcpay_request:ok') {
|
||||
_this.$common.successToShow('支付成功')
|
||||
} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
|
||||
_this.$common.errorToShow('取消支付')
|
||||
} else {
|
||||
_this.$common.errorToShow('支付失败')
|
||||
}
|
||||
setTimeout(() => {
|
||||
_this.$common.redirectTo(
|
||||
'/pages/order/payment/result?id=' + data.id
|
||||
)
|
||||
},1000)
|
||||
}
|
||||
)
|
||||
},
|
||||
toPayHandler(code) {
|
||||
let data = {
|
||||
payment_code: code,
|
||||
payment_type: this.type
|
||||
}
|
||||
data['ids'] = (this.type == 1 || this.type == 5 || this.type == 6) ? this.orderId : this.uid
|
||||
//data['ids'] = this.type == 1 ? this.orderId : this.uid
|
||||
|
||||
if (this.type == 1 && this.orderId) {
|
||||
// 微信jsapi支付
|
||||
if (this.openid) {
|
||||
data['params'] = {
|
||||
trade_type: 'JSAPI_OFFICIAL',
|
||||
openid: this.openid
|
||||
}
|
||||
}
|
||||
} else if (this.type == 2 && this.money) {
|
||||
if (this.openid) {
|
||||
data['params'] = {
|
||||
trade_type: 'JSAPI_OFFICIAL',
|
||||
money: this.money,
|
||||
openid: this.openid
|
||||
}
|
||||
}
|
||||
}else if ((this.type == 5 || this.type == 6) && this.recharge) {
|
||||
data['params'] = {
|
||||
trade_type: 'JSAPI_OFFICIAL',
|
||||
openid: this.openid,
|
||||
formid: this.orderId
|
||||
}
|
||||
}
|
||||
this.$api.pay(data, res => {
|
||||
if (res.code == 200) {
|
||||
const data = res.data
|
||||
this.checkWXJSBridge(data)
|
||||
} else {
|
||||
this.$common.errorToShow(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
position: relative;
|
||||
height: 80vh;
|
||||
}
|
||||
.content-c {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
.load-img {
|
||||
width: 100upx;
|
||||
height: 100upx;
|
||||
}
|
||||
.load-text {
|
||||
font-size: 26upx;
|
||||
}
|
||||
</style>
|
||||
231
mallplusui-uniapp-wx/pages/order/payment/index.vue
Normal file
231
mallplusui-uniapp-wx/pages/order/payment/index.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
|
||||
<view class="price-box">
|
||||
<text>支付金额</text>
|
||||
<text class="price">{{orderInfo.payAmount}}</text>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<payments-by-h5
|
||||
:orderId="orderId"
|
||||
:recharge="recharge"
|
||||
:type="type"
|
||||
:uid="userInfo.id"
|
||||
></payments-by-h5>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<payments-by-wx
|
||||
:orderId="orderId"
|
||||
:recharge="recharge"
|
||||
:type="type"
|
||||
:uid="userInfo.id"
|
||||
></payments-by-wx>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<payments-by-ali
|
||||
:orderId="orderId"
|
||||
:recharge="recharge"
|
||||
:type="type"
|
||||
:uid="userInfo.id"
|
||||
></payments-by-ali>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef APP-PLUS||APP-PLUS-NVUE -->
|
||||
<payments-by-app
|
||||
:orderId="orderId"
|
||||
:recharge="recharge"
|
||||
:type="type"
|
||||
:uid="userInfo.id"
|
||||
></payments-by-app>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
// #ifdef H5
|
||||
import paymentsByH5 from '@/components/payments/paymentsByH5.vue'
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
import paymentsByWx from '@/components/payments/paymentsByWx.vue'
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-ALIPAY
|
||||
import paymentsByAli from '@/components/payments/paymentsByAli.vue'
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS||APP-PLUS-NVUE
|
||||
import paymentsByApp from '@/components/payments/paymentsByApp.vue'
|
||||
// #endif
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
|
||||
export default {
|
||||
|
||||
data () {
|
||||
return {
|
||||
orderId: 0,
|
||||
recharge: 0,
|
||||
type: 1, // 订单类型 1商品订单 2充值订单
|
||||
orderInfo: {}, // 订单详情
|
||||
userInfo: {}, // 用户信息
|
||||
form_id:0
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
// #ifdef H5
|
||||
paymentsByH5,
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
paymentsByWx,
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
paymentsByAli,
|
||||
// #endif
|
||||
// #ifdef APP-PLUS||APP-PLUS-NVUE
|
||||
paymentsByApp,
|
||||
// #endif
|
||||
},
|
||||
|
||||
onLoad (options) {
|
||||
this.orderId = options.order_id
|
||||
this.recharge = Number(options.recharge)
|
||||
this.type = Number(options.type)
|
||||
this.form_id = Number(options.form_id)
|
||||
|
||||
if (this.orderId && this.type == 1) {
|
||||
// 商品订单
|
||||
this.getOrderInfo()
|
||||
} else if (this.recharge && this.type == 2) {
|
||||
// 充值订单 获取用户id
|
||||
this.getUserInfo()
|
||||
} else if (this.form_id && (this.type == 5 || this.type == 6)) {
|
||||
// 表单订单 id传到订单上
|
||||
this.orderId = ''+this.form_id;
|
||||
} else {
|
||||
this.$common.errorToShow('订单支付参数错误', () => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取订单详情
|
||||
async getOrderInfo () {
|
||||
|
||||
let params = {'id':this.orderId};
|
||||
this.orderInfo = await Api.apiCall('get',Api.order.orderDetail,params);
|
||||
if(this.orderInfo.pay_status == 2){
|
||||
this.$common.redirectTo(
|
||||
'/pages/order/payment/result?order_id=' + this.orderInfo.id
|
||||
)
|
||||
}
|
||||
},
|
||||
// 获取用户信息
|
||||
getUserInfo () {
|
||||
this.$api.userInfo({}, res => {
|
||||
if (res.code == 200) {
|
||||
this.userInfo = res.data
|
||||
|
||||
} else {
|
||||
this.$common.errorToShow(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 跳转我的余额页面
|
||||
toRecharge () {
|
||||
this.$common.navigateTo('/pages/member/balance/index')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.app {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
background-color: #fff;
|
||||
height: 265upx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 28upx;
|
||||
color: #909399;
|
||||
|
||||
.price{
|
||||
font-size: 50upx;
|
||||
color: #303133;
|
||||
margin-top: 12upx;
|
||||
&:before{
|
||||
content: '￥';
|
||||
font-size: 40upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-type-list {
|
||||
margin-top: 20upx;
|
||||
background-color: #fff;
|
||||
padding-left: 60upx;
|
||||
|
||||
.type-item{
|
||||
height: 120upx;
|
||||
padding: 20upx 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-right: 60upx;
|
||||
font-size: 30upx;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.icon{
|
||||
width: 100upx;
|
||||
font-size: 52upx;
|
||||
}
|
||||
.icon-erjiye-yucunkuan {
|
||||
color: #fe8e2e;
|
||||
}
|
||||
.icon-weixinzhifu {
|
||||
color: #36cb59;
|
||||
}
|
||||
.icon-alipay {
|
||||
color: #01aaef;
|
||||
}
|
||||
.tit{
|
||||
font-size: $font-lg;
|
||||
color: $font-color-dark;
|
||||
margin-bottom: 4upx;
|
||||
}
|
||||
.con{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $font-sm;
|
||||
color: $font-color-light;
|
||||
}
|
||||
}
|
||||
.mix-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 630upx;
|
||||
height: 80upx;
|
||||
margin: 80upx auto 30upx;
|
||||
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>
|
||||
210
mallplusui-uniapp-wx/pages/order/payment/index1.vue
Normal file
210
mallplusui-uniapp-wx/pages/order/payment/index1.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class='cell-group margin-cell-group'>
|
||||
<view class='cell-item'>
|
||||
<view class='cell-item-hd'>
|
||||
<view class='cell-hd-title'>订单类型</view>
|
||||
</view>
|
||||
<view class='cell-item-ft'>
|
||||
<text class="cell-ft-p" v-if="type == 1" @click="orderDetail(orderId)">商品订单</text>
|
||||
<text class="cell-ft-p" v-if="type == 2" @click="toRecharge()">充值订单</text>
|
||||
<text class="cell-ft-p" v-if="type == 5" >快捷下单</text>
|
||||
<text class="cell-ft-p" v-if="type == 6" >付款码</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="type == 1">
|
||||
<view class='cell-item'>
|
||||
<view class='cell-item-hd'>
|
||||
<view class='cell-hd-title'>订单编号</view>
|
||||
</view>
|
||||
<view class='cell-item-ft'>
|
||||
<text class="cell-ft-p" @click="orderDetail(orderId)">{{ orderId }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='cell-item'>
|
||||
<view class='cell-item-hd'>
|
||||
<view class='cell-hd-title'>订单金额</view>
|
||||
</view>
|
||||
<view class='cell-item-ft'>
|
||||
<text class="cell-ft-p red-price">￥{{ orderInfo.payAmount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="type == 2">
|
||||
<view class='cell-item'>
|
||||
<view class='cell-item-hd'>
|
||||
<view class='cell-hd-title'>充值金额</view>
|
||||
</view>
|
||||
<view class='cell-item-ft'>
|
||||
<text class="cell-ft-p red-price">￥ {{ recharge }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<payments-by-h5
|
||||
:orderId="orderId"
|
||||
:recharge="recharge"
|
||||
:type="type"
|
||||
:uid="userInfo.id"
|
||||
></payments-by-h5>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<payments-by-wx
|
||||
:orderId="orderId"
|
||||
:recharge="recharge"
|
||||
:type="type"
|
||||
:uid="userInfo.id"
|
||||
></payments-by-wx>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<payments-by-ali
|
||||
:orderId="orderId"
|
||||
:recharge="recharge"
|
||||
:type="type"
|
||||
:uid="userInfo.id"
|
||||
></payments-by-ali>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef APP-PLUS||APP-PLUS-NVUE -->
|
||||
<payments-by-app
|
||||
:orderId="orderId"
|
||||
:recharge="recharge"
|
||||
:type="type"
|
||||
:uid="userInfo.id"
|
||||
></payments-by-app>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef H5
|
||||
import paymentsByH5 from '@/components/payments/paymentsByH5.vue'
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
import paymentsByWx from '@/components/payments/paymentsByWx.vue'
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-ALIPAY
|
||||
import paymentsByAli from '@/components/payments/paymentsByAli.vue'
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS||APP-PLUS-NVUE
|
||||
import paymentsByApp from '@/components/payments/paymentsByApp.vue'
|
||||
// #endif
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
|
||||
export default {
|
||||
|
||||
data () {
|
||||
return {
|
||||
orderId: 0,
|
||||
recharge: 0,
|
||||
type: 1, // 订单类型 1商品订单 2充值订单
|
||||
orderInfo: {}, // 订单详情
|
||||
userInfo: {}, // 用户信息
|
||||
form_id:0
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
// #ifdef H5
|
||||
paymentsByH5,
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
paymentsByWx,
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
paymentsByAli,
|
||||
// #endif
|
||||
// #ifdef APP-PLUS||APP-PLUS-NVUE
|
||||
paymentsByApp,
|
||||
// #endif
|
||||
},
|
||||
|
||||
onLoad (options) {
|
||||
this.orderId = options.order_id
|
||||
this.recharge = Number(options.recharge)
|
||||
this.type = Number(options.type)
|
||||
this.form_id = Number(options.form_id)
|
||||
|
||||
if (this.orderId && this.type == 1) {
|
||||
// 商品订单
|
||||
this.getOrderInfo()
|
||||
} else if (this.recharge && this.type == 2) {
|
||||
// 充值订单 获取用户id
|
||||
this.getUserInfo()
|
||||
} else if (this.form_id && (this.type == 5 || this.type == 6)) {
|
||||
// 表单订单 id传到订单上
|
||||
this.orderId = ''+this.form_id;
|
||||
} else {
|
||||
this.$common.errorToShow('订单支付参数错误', () => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取订单详情
|
||||
async getOrderInfo () {
|
||||
|
||||
let params = {'id':this.orderId};
|
||||
this.orderInfo = await Api.apiCall('get',Api.order.orderDetail,params);
|
||||
if(this.orderInfo.pay_status == 2){
|
||||
this.$common.redirectTo(
|
||||
'/pages/order/payment/result?order_id=' + this.orderInfo.id
|
||||
)
|
||||
}
|
||||
},
|
||||
// 获取用户信息
|
||||
getUserInfo () {
|
||||
this.$api.userInfo({}, res => {
|
||||
if (res.code == 200) {
|
||||
this.userInfo = res.data
|
||||
|
||||
} else {
|
||||
this.$common.errorToShow(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 跳转我的余额页面
|
||||
toRecharge () {
|
||||
this.$common.navigateTo('/pages/member/balance/index')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.margin-cell-group{
|
||||
margin-bottom: 20upx;
|
||||
}
|
||||
.cell-hd-title{
|
||||
color: #999;
|
||||
}
|
||||
.payment-method .cell-item-hd{
|
||||
min-width: 70upx;
|
||||
}
|
||||
.payment-method .cell-hd-icon{
|
||||
width: 70upx;
|
||||
height: 70upx;
|
||||
}
|
||||
.payment-method .cell-item-bd{
|
||||
border-left: 2upx solid #F0F0F0;
|
||||
padding-left: 30upx;
|
||||
}
|
||||
.payment-method .cell-bd-text{
|
||||
font-size: 28upx;
|
||||
color: #666;
|
||||
}
|
||||
.payment-method .address{
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
75
mallplusui-uniapp-wx/pages/order/payment/result.vue
Normal file
75
mallplusui-uniapp-wx/pages/order/payment/result.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<text class="success-icon yticon icon-xuanzhong2"></text>
|
||||
<text class="tit">支付成功</text>
|
||||
<view class="result-mid red-price">
|
||||
{{ paymentInfo.payAmount }}
|
||||
</view>
|
||||
<view class="btn-group">
|
||||
<navigator url="/pages/order/order?status=0" open-type="redirect" class="mix-btn">查看订单</navigator>
|
||||
<navigator url="/pages/index/index" open-type="switchTab" class="mix-btn hollow">返回首页</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
paymentId: 0,
|
||||
paymentInfo: {}, // 支付单详情
|
||||
orderId: 0,
|
||||
status: false
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.order) {
|
||||
let order = JSON.parse(options.order)
|
||||
this.orderId = order.id
|
||||
this.paymentInfo = order
|
||||
}
|
||||
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.success-icon {
|
||||
font-size: 160upx;
|
||||
color: #fa436a;
|
||||
margin-top: 100upx;
|
||||
}
|
||||
.tit {
|
||||
font-size: 38upx;
|
||||
color: #303133;
|
||||
}
|
||||
.btn-group {
|
||||
padding-top: 100upx;
|
||||
}
|
||||
.mix-btn {
|
||||
margin-top: 30upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 600upx;
|
||||
height: 80upx;
|
||||
font-size: $font-lg;
|
||||
color: #fff;
|
||||
background-color: $base-color;
|
||||
border-radius: 10upx;
|
||||
&.hollow {
|
||||
background: #fff;
|
||||
color: #303133;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
373
mallplusui-uniapp-wx/pages/public/index.vue
Normal file
373
mallplusui-uniapp-wx/pages/public/index.vue
Normal file
@@ -0,0 +1,373 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="login-t">
|
||||
<image class="login-logo" :src="logoImage" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="login-m">
|
||||
<view class="login-item">
|
||||
<input type="number" v-model="mobile" :maxlength="maxMobile" placeholder="请输入手机号码" focus placeholder-class="login-item-i-p" />
|
||||
</view>
|
||||
<view class="login-item flc">
|
||||
<input class="login-item-input" placeholder-class="login-item-i-p" type="text" v-model="code" placeholder="请输入验证码" />
|
||||
<view :class="sendCodeBtn" @click="sendCode" v-if="verification">发送验证码</view>
|
||||
<view class="btn btn-g" v-if="!verification">{{ timer }} 秒后重新获取</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="login-b">
|
||||
<!-- #ifdef H5|APP-PLUS|APP-PLUS-NVUE -->
|
||||
<view v-if="user_wx_id">
|
||||
<button :class="regButtonClass" @click="toBind()" hover-class="btn-hover">登录</button>
|
||||
</view>
|
||||
<view v-else>
|
||||
<button :class="regButtonClass" @click="login()" hover-class="btn-hover">登录</button>
|
||||
<view class="login-other flc">
|
||||
<view class="fz12 item" @click="selectLoginType">
|
||||
密码登录
|
||||
</view>
|
||||
<view class="fz12 item" @click="toReg">
|
||||
注册
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP -->
|
||||
<button :class="regButtonClass" @click="showTopTips()" hover-class="btn-hover">登录</button>
|
||||
<!-- #endif -->
|
||||
|
||||
</view>
|
||||
<mallplusCopyright></mallplusCopyright>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import store from '@/store/index';
|
||||
import { goBack, jumpBackPage } from '@/config/mixins.js'
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
mixins: [goBack,jumpBackPage],
|
||||
data() {
|
||||
return {
|
||||
maxMobile: 11,
|
||||
mobile: '', // 用户手机号
|
||||
code: '', // 短信验证码
|
||||
user_wx_id: '', //授权id
|
||||
verification: true, // 通过v-show控制显示获取还是倒计时
|
||||
timer: 60, // 定义初始时间为60s
|
||||
btnb: 'btn btn-square btn-c btn-all', //按钮背景
|
||||
type: '', // 有值是第三方登录账号绑定
|
||||
isWeixinBrowser: this.$common.isWeiXinBrowser()
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
if (option.user_wx_id) {
|
||||
this.user_wx_id = option.user_wx_id
|
||||
uni.setNavigationBarTitle({
|
||||
title: '绑定手机号'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// H5第三方授权登录绑定
|
||||
// if (option.type && option.type === 'bind') {
|
||||
// this.type = option.type
|
||||
// uni.setNavigationBarTitle({
|
||||
// title: '绑定手机号'
|
||||
// })
|
||||
// }
|
||||
},
|
||||
computed: {
|
||||
// 验证手机号
|
||||
rightMobile() {
|
||||
let res = {}
|
||||
if (!this.mobile) {
|
||||
res.status = false
|
||||
res.msg = '请输入手机号'
|
||||
} else if (!/^1[3456789]{1}\d{9}$/gi.test(this.mobile)) {
|
||||
res.status = false
|
||||
res.msg = '手机号格式不正确'
|
||||
} else {
|
||||
res.status = true
|
||||
}
|
||||
return res
|
||||
},
|
||||
// 动态计算发送验证码按钮样式
|
||||
sendCodeBtn() {
|
||||
let btn = 'btn btn-g'
|
||||
if (this.mobile.length === this.maxMobile && this.rightMobile.status) {
|
||||
return btn + ' btn-b'
|
||||
} else {
|
||||
return btn
|
||||
}
|
||||
},
|
||||
// 动态更改登录按钮bg
|
||||
regButtonClass() {
|
||||
return this.mobile && this.mobile.length === this.maxMobile && this.code
|
||||
? this.btnb + ' btn-b'
|
||||
: this.btnb
|
||||
},
|
||||
logoImage() {
|
||||
return '/static/missing-face.png'
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
let _this = this
|
||||
let userToken = _this.$db.get('userToken')
|
||||
if (userToken) {
|
||||
uni.switchTab({
|
||||
url: '/pages/member/index/index'
|
||||
})
|
||||
return true
|
||||
}
|
||||
_this.timer = parseInt(_this.$db.get('timer'))
|
||||
if (_this.timer != null && _this.timer > 0) {
|
||||
_this.countDown()
|
||||
_this.verification = false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 发送短信验证码
|
||||
sendCode() {
|
||||
if (!this.rightMobile.status) {
|
||||
this.$common.errorToShow(this.rightMobile.msg)
|
||||
} else {
|
||||
this.$common.loadToShow('发送中...')
|
||||
setTimeout(() => {
|
||||
this.$common.loadToHide()
|
||||
this.$api.sms({ mobile: this.mobile, code: 'login' }, res => {
|
||||
if (res.status) {
|
||||
this.timer = 60
|
||||
this.verification = false
|
||||
this.$common.successToShow(res.msg)
|
||||
this.countDown() // 执行验证码计时
|
||||
// this.btnb = 'btn btn-square btn-all btn-b';
|
||||
} else {
|
||||
this.$common.errorToShow(res.msg)
|
||||
}
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
// 去注册
|
||||
toReg() {
|
||||
this.$common.navigateTo('/pages/login/register/index')
|
||||
},
|
||||
// 验证码倒计时
|
||||
countDown() {
|
||||
let auth_timer = setInterval(() => {
|
||||
// 定时器设置每秒递减
|
||||
this.timer-- // 递减时间
|
||||
uni.setStorage({
|
||||
key: 'timer',
|
||||
data: this.timer,
|
||||
success: function() {}
|
||||
})
|
||||
if (this.timer <= 0) {
|
||||
this.verification = true // 60s时间结束还原v-show状态并清除定时器
|
||||
clearInterval(auth_timer)
|
||||
}
|
||||
}, 1000)
|
||||
},
|
||||
// 登录
|
||||
login() {
|
||||
var _this = this
|
||||
if (!_this.rightMobile.status) {
|
||||
_this.$common.errorToShow(_this.rightMobile.msg)
|
||||
} else {
|
||||
// 短信验证码登录
|
||||
if (!_this.code) {
|
||||
_this.$common.errorToShow('请输入短信验证码!')
|
||||
} else {
|
||||
let data = {
|
||||
mobile: _this.mobile,
|
||||
code: _this.code
|
||||
}
|
||||
|
||||
let invicode = _this.$db.get('invitecode')
|
||||
if (invicode) {
|
||||
data.invitecode = invicode
|
||||
}
|
||||
|
||||
_this.$api.smsLogin(data, res => {
|
||||
if (res.status) {
|
||||
this.$db.set('userToken', res.data)
|
||||
_this.redirectHandler()
|
||||
} else {
|
||||
_this.$common.errorToShow(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 重定向跳转 或者返回上一个页面
|
||||
redirectHandler() {
|
||||
this.$common.successToShow('登录成功!', () => {
|
||||
this.$db.set('timer', 0)
|
||||
this.$db.del('invitecode')
|
||||
this.handleBack()
|
||||
})
|
||||
},
|
||||
// 跳转到普通登录
|
||||
toLogin() {
|
||||
uni.navigateTo({
|
||||
url: '../../login/login/index'
|
||||
})
|
||||
},
|
||||
//提交按钮
|
||||
showTopTips: function() {
|
||||
let _this = this
|
||||
if (_this.mobile == '') {
|
||||
_this.$common.errorToShow('请输入手机号码')
|
||||
return false
|
||||
}
|
||||
if (this.code == '') {
|
||||
_this.$common.errorToShow('请输入验证码')
|
||||
return false
|
||||
}
|
||||
if (_this.user_wx_id == 0) {
|
||||
_this.$common.errorToShow('登录失败，请稍后再试', function() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
})
|
||||
return false
|
||||
}
|
||||
var platform = 2
|
||||
//1就是h5登陆（h5端和微信公众号端），2就是微信小程序登陆，3是支付宝小程序，4是app，5是pc
|
||||
// #ifdef MP-ALIPAY
|
||||
platform = 3
|
||||
// #endif
|
||||
// #ifdef APP-PLUS||APP-PLUS-NVUE
|
||||
platform = 4
|
||||
// #endif
|
||||
var data = {
|
||||
mobile: _this.mobile,
|
||||
code: _this.code,
|
||||
platform: platform, //平台id，标识是小程序登陆的
|
||||
user_wx_id: _this.user_wx_id //微信小程序接口存不了session，所以要绑定的id只能传到前台
|
||||
}
|
||||
//有推荐码的话，带上
|
||||
var invitecode = _this.$db.get('invitecode')
|
||||
if (invitecode) {
|
||||
data.invitecode = invitecode
|
||||
}
|
||||
_this.$api.smsLogin(data, function(res) {
|
||||
if (res.status) {
|
||||
_this.$db.set('userToken', res.data)
|
||||
_this.redirectHandler()
|
||||
} else {
|
||||
//报错了
|
||||
_this.$common.errorToShow(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 公众号第三方登录账号绑定
|
||||
toBind() {
|
||||
if (this.mobile == '') {
|
||||
this.$common.errorToShow('请输入手机号码')
|
||||
return false
|
||||
}
|
||||
if (this.code == '') {
|
||||
this.$common.errorToShow('请输入验证码')
|
||||
return false
|
||||
}
|
||||
|
||||
let data = {
|
||||
mobile: this.mobile,
|
||||
code: this.code,
|
||||
user_wx_id:this.user_wx_id
|
||||
}
|
||||
|
||||
// 获取邀请码
|
||||
let invicode = this.$db.get('invitecode')
|
||||
if (invicode) {
|
||||
data.invitecode = invicode
|
||||
}
|
||||
|
||||
this.$api.smsLogin(data, res => {
|
||||
if (res.status) {
|
||||
this.$db.set('userToken', res.data)
|
||||
this.redirectHandler()
|
||||
} else {
|
||||
this.$common.errorToShow(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 切换登录方式
|
||||
selectLoginType() {
|
||||
this.$common.redirectTo('./index1')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - 90upx);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
height: 100vh;
|
||||
/* #endif */
|
||||
background-color: #fff;
|
||||
|
||||
padding: 0upx 100upx;
|
||||
}
|
||||
.login-t {
|
||||
text-align: center;
|
||||
padding: 50upx 0;
|
||||
}
|
||||
.login-logo {
|
||||
width: 180upx;
|
||||
height: 180upx;
|
||||
border-radius: 20upx;
|
||||
background-color: #f8f8f8;
|
||||
/* margin: 0 auto; */
|
||||
}
|
||||
.login-m {
|
||||
margin-bottom: 100upx;
|
||||
}
|
||||
.login-item {
|
||||
border-bottom: 2upx solid #d0d0d0;
|
||||
overflow: hidden;
|
||||
padding: 10upx;
|
||||
color: #333;
|
||||
margin-bottom: 30upx;
|
||||
}
|
||||
.login-item-input {
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.login-item .btn {
|
||||
border: none;
|
||||
width: 40%;
|
||||
text-align: right;
|
||||
padding: 0;
|
||||
&.btn-b {
|
||||
background: none;
|
||||
color: #333 !important;
|
||||
}
|
||||
}
|
||||
.login-b .btn {
|
||||
color: #999;
|
||||
}
|
||||
.btn-b {
|
||||
color: #fff !important;
|
||||
}
|
||||
.login-other {
|
||||
margin-bottom: 40upx;
|
||||
.item {
|
||||
padding: 20upx 0;
|
||||
}
|
||||
}
|
||||
.btn-square {
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
}
|
||||
</style>
|
||||
605
mallplusui-uniapp-wx/pages/public/login.vue
Normal file
605
mallplusui-uniapp-wx/pages/public/login.vue
Normal file
@@ -0,0 +1,605 @@
|
||||
<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">
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="left-top-sign">{{ sysInfo.name }}LOGIN</view>
|
||||
<view class="welcome">欢迎回来！{{ sysInfo.name }}</view>
|
||||
<view class="input-content">
|
||||
<view class="input-item">
|
||||
<text class="tit">手机号码</text>
|
||||
<input type="number" v-model="phone" placeholder="请输入手机号码" />
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<text class="tit">密码</text>
|
||||
<input type="password" placeholder="请输入密码" v-model="password" @confirm="toLogin" />
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
|
||||
<view class="forget-section" @click="toForget">忘记密码?</view>
|
||||
<view class="forget-section" @click="toLoginCode">验证码登录</view>
|
||||
<br/>
|
||||
<view class="register-section">
|
||||
还没有账号?
|
||||
<text @click="toRegist">马上注册</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="confirm-btn" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true" v-if="isGetPhone == false">微信登录</button>
|
||||
<button class="confirm-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="isGetPhone == true">获取手机号</button>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="left-top-sign">{{ sysInfo.name }}LOGIN</view>
|
||||
<view class="welcome">欢迎回来！{{ sysInfo.name }}</view>
|
||||
<view class="input-content">
|
||||
<view class="input-item">
|
||||
<text class="tit">手机号码</text>
|
||||
<input type="number" v-model="phone" placeholder="请输入手机号码" />
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<text class="tit">密码</text>
|
||||
<input type="password" placeholder="请输入密码" v-model="password" @confirm="toLogin" />
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
|
||||
|
||||
<!-- <button v-if="isWeiXin == 1" class="confirm-btn" @click="wechatH5Login" :disabled="logining">微信授权登录</button> -->
|
||||
|
||||
<view class="forget-section" @click="toForget">忘记密码?</view>
|
||||
<view class="forget-section" @click="toLoginCode">验证码登录</view>
|
||||
<br/><view class="register-section">
|
||||
还没有账号?
|
||||
<text @click="toRegist">马上注册</text>
|
||||
</view>
|
||||
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
|
||||
<mallplusCopyright></mallplusCopyright>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import store from '@/store/index';
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
phone: '',
|
||||
password: '',
|
||||
isWeiXin: 0,
|
||||
sysInfo: '',
|
||||
logining: false,
|
||||
isGetPhone: false,
|
||||
info: ''
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
let isWeiXin = this.$common.isWeiXinBrowser();
|
||||
if (isWeiXin) {
|
||||
this.isWeiXin = 1;
|
||||
}
|
||||
this.sysInfo = this.$db.get('sysInfo');
|
||||
},
|
||||
computed: {
|
||||
...mapState(['hasLogin', 'userInfo'])
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login']),
|
||||
inputChange(e) {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
this[key] = e.detail.value;
|
||||
},
|
||||
toForget() {
|
||||
uni.navigateTo({
|
||||
url: '../../pagesU/user/forget'
|
||||
});
|
||||
},
|
||||
toLoginCode() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/public/loginCode'
|
||||
});
|
||||
},
|
||||
navBack() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
},
|
||||
toRegist() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/public/reg'
|
||||
});
|
||||
},
|
||||
wechatH5Login() {
|
||||
const that = this;
|
||||
let href = window.location.origin;
|
||||
let page = that.$api.prePage();
|
||||
let prePath = '/pages/index/index';
|
||||
if (page) {
|
||||
prePath = page.__page__.path;
|
||||
}
|
||||
|
||||
window.location =
|
||||
'https://open.weixin.qq.com/connect/oauth2/authorize?' +
|
||||
'appid=' +
|
||||
Api.h5Appid +
|
||||
'&redirect_uri=' +
|
||||
escape(href) +
|
||||
'&response_type=code&scope=snsapi_userinfo&state=mallplus#wechat_redirect';
|
||||
},
|
||||
wxGetUserInfo: function(res) {
|
||||
if (!res.detail.iv) {
|
||||
uni.showToast({
|
||||
title: '您取消了授权,登录失败',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
// this.login(res.detail.rawData);
|
||||
const that = this;
|
||||
let datas = '';
|
||||
let errmsg = '';
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: function(loginRes) {
|
||||
|
||||
var params = {
|
||||
code: loginRes.code,
|
||||
userInfo: res.detail.rawData,
|
||||
cloudID: res.detail.cloudID,
|
||||
encrypted_data: res.detail.encryptedData,
|
||||
iv: res.detail.iv,
|
||||
source: 2,
|
||||
signature: res.detail.signature
|
||||
};
|
||||
that.loginByWeixinNoPhone(params);
|
||||
}
|
||||
});
|
||||
},
|
||||
loginByWeixinNoPhone(datas) {
|
||||
var that = this;
|
||||
wx.request({
|
||||
url: Api.BASEURI + Api.index.appletLogin_by_weixin,
|
||||
method: 'post',
|
||||
data: datas,
|
||||
success: function(res) {
|
||||
uni.showToast({
|
||||
title: '登录成功'
|
||||
});
|
||||
that.login(res.data.data);
|
||||
that.$db.set('token', res.data.data.tokenHead + res.data.data.token);
|
||||
that.$db.set('userInfos', res.data.data.userInfo);
|
||||
|
||||
setTimeout(function() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 微信登录
|
||||
*/
|
||||
wxGetUserInfo1: function(res) {
|
||||
let ress = res;
|
||||
console.log('-----getUserInfo-----', ress);
|
||||
if (!ress.detail.iv) {
|
||||
uni.showToast({
|
||||
title: '您取消了授权,登录失败',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
const that = this;
|
||||
let datas = '';
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: function(loginRes) {
|
||||
console.log('=====login=====', loginRes);
|
||||
var params = {
|
||||
code: loginRes.code,
|
||||
userInfo: ress.detail.rawData,
|
||||
cloudID: ress.detail.cloudID,
|
||||
encrypted_data: ress.detail.encryptedData,
|
||||
iv: ress.detail.iv,
|
||||
source: 2,
|
||||
signature: ress.detail.signature
|
||||
};
|
||||
that.getAppletOpenId(params);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取openid
|
||||
*/
|
||||
getAppletOpenId(params) {
|
||||
var that = this;
|
||||
wx.request({
|
||||
url: Api.BASEURI + Api.index.getAppletOpenId,
|
||||
data: params,
|
||||
method: 'post',
|
||||
success: function(info) {
|
||||
// openid seession_key 存入缓存
|
||||
that.$db.set('openId', info.data.data.openid);
|
||||
that.$db.set('session_key', info.data.data.session_key);
|
||||
|
||||
that.info = {
|
||||
openid: info.data.data.openid,
|
||||
code: params.code,
|
||||
userInfo: params.userInfo,
|
||||
cloudID: params.cloudID,
|
||||
encrypted_data: params.encryptedData,
|
||||
iv: params.iv,
|
||||
source: 2,
|
||||
signature: params.signature
|
||||
};
|
||||
that.loginByWeixin(that.info);
|
||||
},
|
||||
fail: function(e) {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
},
|
||||
loginByWeixin(datas) {
|
||||
var that = this;
|
||||
wx.request({
|
||||
url: Api.BASEURI + Api.index.appletLogin_by_weixin,
|
||||
method: 'post',
|
||||
data: datas,
|
||||
success: function(res) {
|
||||
console.log('--loginByWeixin--', res);
|
||||
if (res.data.code == 500) {
|
||||
if (res.data.data == '登录失败 请先绑定手机号') {
|
||||
uni.showToast({
|
||||
title: res.data.data,
|
||||
icon: 'none'
|
||||
});
|
||||
that.isGetPhone = true;
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '登录成功'
|
||||
});
|
||||
that.login(res.data.data);
|
||||
that.$db.set('token', res.data.data.tokenHead + res.data.data.token);
|
||||
that.$db.set('userInfos', res.data.data.userInfo);
|
||||
|
||||
setTimeout(function() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 微信获取手机号
|
||||
*/
|
||||
getPhoneNumber(params) {
|
||||
var that = this;
|
||||
wx.request({
|
||||
url: Api.BASEURI + Api.index.getWxPhone,
|
||||
method: 'post',
|
||||
header: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
data: {
|
||||
openid: uni.getStorageSync('openId'),
|
||||
keyStr: uni.getStorageSync('session_key'),
|
||||
ivStr: params.detail.iv,
|
||||
encDataStr: params.detail.encryptedData
|
||||
},
|
||||
success: function(res) {
|
||||
console.log('--getPhoneNumber--', res);
|
||||
if (res.data.code == 200) {
|
||||
uni.setStorageSync('phone', res.data.data);
|
||||
that.info['phone'] = res.data.data;
|
||||
that.loginByWeixin(that.info);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
appLogin() {
|
||||
uni.getProvider({
|
||||
service: 'oauth',
|
||||
success: function(res) {
|
||||
console.log(res.provider);
|
||||
//支持微信、qq和微博等
|
||||
if (~res.provider.indexOf('weixin')) {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: function(loginRes) {
|
||||
console.log('-------获取openid(unionid)-----');
|
||||
console.log(JSON.stringify(loginRes));
|
||||
// 获取用户信息
|
||||
uni.getUserInfo({
|
||||
provider: 'weixin',
|
||||
success: function(info) {
|
||||
console.log('-------获取微信用户所有-----');
|
||||
console.log(JSON.stringify(info.userInfo));
|
||||
let logparams1 = { logs: JSON.stringify(info.userInfo) };
|
||||
Api.apiCall('get', Api.index.logs, logparams1);
|
||||
// 与服务器交互将数据提交到服务端数据库
|
||||
uni.request({
|
||||
url: Api.BASEURI + Api.index.appLogin,
|
||||
method: 'POST',
|
||||
header: { 'content-type': 'application/x-www-form-urlencoded' },
|
||||
data: {
|
||||
sex: info.userInfo.gender,
|
||||
city: info.userInfo.country + '-' + info.userInfo.province + '-' + info.userInfo.city,
|
||||
source: 1,
|
||||
openid: info.userInfo.openId,
|
||||
unionid: info.userInfo.openId,
|
||||
nickname: info.userInfo.nickName,
|
||||
headimgurl: info.userInfo.avatarUrl
|
||||
},
|
||||
success: res => {
|
||||
console.log(JSON.stringify(res));
|
||||
|
||||
// 登录成功 记录会员信息到本地
|
||||
if (res) {
|
||||
uni.setStorageSync('userInfo', res.data.userInfo);
|
||||
uni.setStorageSync('token', res.data.tokenHead + res.data.token);
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
} else {
|
||||
uni.showToast({ title: res.data });
|
||||
}
|
||||
},
|
||||
fail: e => {
|
||||
console.log(JSON.stringify(e));
|
||||
}
|
||||
});
|
||||
let logparams = { logs: JSON.stringify(info.userInfo) };
|
||||
Api.apiCall('get', Api.index.logs, logparams);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
async toLogin() {
|
||||
var that = this;
|
||||
let phoneReg = /^1[1-9][0-9]\d{8}$/;
|
||||
try {
|
||||
if (this.phone == '') {
|
||||
throw '请填写手机号';
|
||||
}
|
||||
if (!phoneReg.test(this.phone)) {
|
||||
throw '手机号格式有误';
|
||||
}
|
||||
if (this.password == '') {
|
||||
throw '请填写密码';
|
||||
}
|
||||
} catch (err) {
|
||||
this.$api.msg(err);
|
||||
return;
|
||||
}
|
||||
this.logining = false;
|
||||
let params = { phone: this.phone, password: this.password };
|
||||
let data = await Api.apiCall('post', Api.index.login, params);
|
||||
//this.logining = false;
|
||||
if (data) {
|
||||
console.log(data);
|
||||
that.login(data);
|
||||
uni.setStorageSync('userInfos', data.userInfo);
|
||||
uni.setStorageSync('token', data.tokenHead + data.token);
|
||||
console.log(uni.getStorageSync('token'));
|
||||
uni.switchTab({
|
||||
url: '/pages/index/user'
|
||||
});
|
||||
}
|
||||
},
|
||||
getuserinfoh5appwx() {
|
||||
var that = this;
|
||||
uni.login({
|
||||
success: res => {
|
||||
// res 对象格式
|
||||
|
||||
uni.getUserInfo({
|
||||
success: info => {
|
||||
// 与服务器交互将数据提交到服务端数据库
|
||||
uni.request({
|
||||
url: Api.BASEURI + Api.index.appLogin,
|
||||
method: 'POST',
|
||||
header: { 'content-type': 'application/x-www-form-urlencoded' },
|
||||
data: {
|
||||
sex: info.userInfo.gender,
|
||||
city: info.userInfo.country + '-' + info.userInfo.province + '-' + info.userInfo.city,
|
||||
|
||||
source: 1,
|
||||
unionid: info.userInfo.openId,
|
||||
openid: info.userInfo.openId,
|
||||
nickname: info.userInfo.nickName,
|
||||
headimgurl: info.userInfo.avatarUrl
|
||||
},
|
||||
success: res => {
|
||||
console.log(JSON.stringify(res.data.data));
|
||||
// 登录成功 记录会员信息到本地
|
||||
if (res) {
|
||||
console.log(res);
|
||||
that.login(res.data.data);
|
||||
uni.setStorageSync('userInfos', res.data.data.userInfo);
|
||||
uni.setStorageSync('token', res.data.data.tokenHead + res.data.data.token);
|
||||
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
} else {
|
||||
uni.showToast({ title: res.data });
|
||||
}
|
||||
},
|
||||
fail: e => {
|
||||
console.log(JSON.stringify(e));
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({ title: '微信登录授权失败' });
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({ title: '微信登录授权失败' });
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
.container {
|
||||
padding-top: 115px;
|
||||
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, 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>
|
||||
371
mallplusui-uniapp-wx/pages/public/loginCode.vue
Normal file
371
mallplusui-uniapp-wx/pages/public/loginCode.vue
Normal file
@@ -0,0 +1,371 @@
|
||||
<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" v-model="phone" placeholder="请输入手机号码" />
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<text class="tit">验证码</text>
|
||||
<view class="input-item-right">
|
||||
<input type="number" maxlength="6" placeholder="请输入验证码" v-model="code" @confirm="toLogin" style="width: 70%;" />
|
||||
<view class="codeText" v-if="coding == false" @click="getCode()">获取验证码</view>
|
||||
<view class="authTime" v-else>{{ auth_time }}秒</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
|
||||
<view class="forget-section" @click="toLoginPwd">密码登录</view>
|
||||
</view>
|
||||
<view class="register-section">
|
||||
还没有账号?
|
||||
<text @click="toRegist">马上注册</text>
|
||||
</view>
|
||||
<mallplusCopyright></mallplusCopyright>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import store from '@/store/index';
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
phone: '',
|
||||
code: '',
|
||||
logining: false,
|
||||
coding: false,
|
||||
auth_time: 60
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
let isWeiXin = this.$common.isWeiXinBrowser();
|
||||
if (isWeiXin) {
|
||||
this.isWeiXin = 1;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['hasLogin', 'userInfo'])
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login']),
|
||||
inputChange(e) {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
this[key] = e.detail.value;
|
||||
},
|
||||
toLoginPwd() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/public/login'
|
||||
});
|
||||
},
|
||||
navBack() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
},
|
||||
toRegist() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/public/reg'
|
||||
});
|
||||
},
|
||||
async toLogin() {
|
||||
var that = this;
|
||||
let phoneReg = /^1[1-9][0-9]\d{8}$/;
|
||||
try {
|
||||
if (this.phone == '') {
|
||||
throw '请填写手机号';
|
||||
}
|
||||
if (!phoneReg.test(this.phone)) {
|
||||
throw '手机号格式有误';
|
||||
}
|
||||
if (this.code == '') {
|
||||
throw '请填写密码';
|
||||
}
|
||||
} catch (err) {
|
||||
this.$api.msg(err);
|
||||
return;
|
||||
}
|
||||
this.logining = false;
|
||||
let params = { phone: this.phone, authCode: this.code };
|
||||
let data = await Api.apiCall('post', Api.index.loginByCode, params);
|
||||
//this.logining = false;
|
||||
if (data) {
|
||||
console.log(data);
|
||||
that.login(data)
|
||||
uni.setStorageSync('userInfos', data.userInfo);
|
||||
uni.setStorageSync('token', data.tokenHead + data.token);
|
||||
console.log(uni.getStorageSync('token'))
|
||||
uni.switchTab({
|
||||
url: '/pages/index/user'
|
||||
});
|
||||
}
|
||||
},
|
||||
// 获取验证码
|
||||
async getCode() {
|
||||
var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
|
||||
if (!myreg.test(this.phone)) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请输入正确的手机号码'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
//设置倒计时秒
|
||||
this.auth_time = 60;
|
||||
this.coding = true;
|
||||
var auth_timetimer = setInterval(() => {
|
||||
this.auth_time--;
|
||||
if (this.auth_time < 0) {
|
||||
this.coding = false;
|
||||
clearInterval(auth_timetimer);
|
||||
}
|
||||
}, 1000);
|
||||
//获取验证码
|
||||
let params = { phone: this.phone};
|
||||
let data = await Api.apiCall('post', Api.index.sendCodes, params);
|
||||
if (data) {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取openid
|
||||
*/
|
||||
getAppletOpenId(params) {
|
||||
var that = this;
|
||||
wx.request({
|
||||
url: Api.BASEURI + Api.index.getAppletOpenId,
|
||||
data: params,
|
||||
method: 'post',
|
||||
success: function(info) {
|
||||
// openid seession_key 存入缓存
|
||||
that.$db.set('openId', info.data.data.openid);
|
||||
that.$db.set('session_key', info.data.data.session_key);
|
||||
|
||||
that.info = {
|
||||
openid: info.data.data.openid,
|
||||
code: params.code,
|
||||
userInfo: params.userInfo,
|
||||
cloudID: params.cloudID,
|
||||
encrypted_data: params.encryptedData,
|
||||
iv: params.iv,
|
||||
source: 2,
|
||||
signature: params.signature
|
||||
};
|
||||
that.loginByWeixin(that.info);
|
||||
},
|
||||
fail: function(e) {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
},
|
||||
loginByWeixin(datas) {
|
||||
var that = this;
|
||||
wx.request({
|
||||
url: Api.BASEURI + Api.index.appletLogin_by_weixin,
|
||||
method: 'post',
|
||||
data: datas,
|
||||
success: function(res) {
|
||||
console.log('--loginByWeixin--', res);
|
||||
if (res.data.code == 500) {
|
||||
if (res.data.data == '手机号为空，请先绑定手机号') {
|
||||
uni.showToast({
|
||||
title: res.data.data,
|
||||
icon: 'none'
|
||||
});
|
||||
that.isGetPhone = true;
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '登录成功'
|
||||
});
|
||||
that.login(res.data.data);
|
||||
that.$db.set('token', res.data.data.tokenHead + res.data.data.token);
|
||||
that.$db.set('userInfos', res.data.data.userInfo);
|
||||
|
||||
setTimeout(function() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
.container {
|
||||
padding-top: 115px;
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
.wrapper {
|
||||
position: relative;
|
||||
z-index: 90;
|
||||
background: #fff;
|
||||
padding-bottom: 40upx;
|
||||
}
|
||||
.input-item-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.codeText {
|
||||
font-size: 28upx;
|
||||
width: 25%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fa436a;
|
||||
}
|
||||
.authTime {
|
||||
font-size: 28upx;
|
||||
width: 25%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fa436a;
|
||||
}
|
||||
.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, 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>
|
||||
256
mallplusui-uniapp-wx/pages/public/reg.vue
Normal file
256
mallplusui-uniapp-wx/pages/public/reg.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<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">注册</view>
|
||||
<view class="welcome">欢迎回来！</view>
|
||||
<view class="input-content">
|
||||
<view class="input-item">
|
||||
<text class="tit">手机号码</text>
|
||||
<input type="number" v-model="phone" placeholder="请输入手机号码" />
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<text class="tit">密码</text>
|
||||
<input type="password" placeholder="请输入密码" v-model="password" @confirm="reg" />
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<text class="tit">确认密码</text>
|
||||
<input type="password" placeholder="请输入确认密码" v-model="confimpassword" @confirm="reg" />
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<text class="tit">邀请码</text>
|
||||
<input type="number" v-model="invitecode" placeholder="请输入邀请码" />
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="reg" :disabled="logining">注册</button>
|
||||
|
||||
<view class="forget-section" @click="toForget">忘记密码?</view>
|
||||
</view>
|
||||
<view class="register-section">
|
||||
已经有账号?
|
||||
<text @click="toRegist">马上登录</text>
|
||||
</view>
|
||||
<mallplusCopyright></mallplusCopyright>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations } from 'vuex';
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
invitecode:'',
|
||||
phone: '',
|
||||
password: '',
|
||||
confimpassword: '',
|
||||
logining: false
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
|
||||
inputChange(e) {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
this[key] = e.detail.value;
|
||||
},
|
||||
navBack() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
},
|
||||
toForget(){
|
||||
uni.navigateTo({
|
||||
url: '../../pagesU/user/forget'
|
||||
})
|
||||
},
|
||||
toRegist() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/public/login'
|
||||
});
|
||||
},
|
||||
async reg() {
|
||||
let phoneReg = /^1[1-9][0-9]\d{8}$/;
|
||||
try {
|
||||
if (this.phone == '') {
|
||||
throw '请填写手机号';
|
||||
}
|
||||
if (!phoneReg.test(this.phone)) {
|
||||
throw '手机号格式有误';
|
||||
}
|
||||
if (this.password == '') {
|
||||
throw '请填写密码';
|
||||
}
|
||||
} catch (err) {
|
||||
this.$api.msg(err);
|
||||
return;
|
||||
}
|
||||
|
||||
let params ;
|
||||
//有推荐码的话，带上
|
||||
var invitecode = this.$db.get('invitecode')
|
||||
if (invitecode) {
|
||||
data.invitecode = invitecode
|
||||
params = { phone: this.phone, password: this.password, confimpassword: this.confimpassword ,source:3,invitecode:invitecode};
|
||||
}else {
|
||||
params = { phone: this.phone, password: this.password, confimpassword: this.confimpassword ,source:3,invitecode:this.invitecode};
|
||||
}
|
||||
let data = await Api.apiCall('post', Api.index.simpleReg, params);
|
||||
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/pages/public/login'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
.container {
|
||||
padding-top: 115px;
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 120vh;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
.wrapper {
|
||||
position: relative;
|
||||
z-index: 90;
|
||||
background: #fff;
|
||||
padding-bottom: 30upx;
|
||||
}
|
||||
.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, 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: 40upx;
|
||||
width: 100%;
|
||||
font-size: $font-sm + 2upx;
|
||||
color: $font-color-base;
|
||||
text-align: center;
|
||||
text {
|
||||
color: $font-color-spec;
|
||||
margin-left: 10upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
378
mallplusui-uniapp-wx/pages/search/search.vue
Normal file
378
mallplusui-uniapp-wx/pages/search/search.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="search-box">
|
||||
<!-- mSearch组件 如果使用原样式，删除组件元素 -->
|
||||
<mSearch
|
||||
class="mSearch-input-box"
|
||||
:mode="2"
|
||||
button="inside"
|
||||
:placeholder="defaultKeyword"
|
||||
@search="doSearch(false)"
|
||||
@input="inputChange"
|
||||
@confirm="doSearch(false)"
|
||||
v-model="keyword"
|
||||
></mSearch>
|
||||
<!-- 原样式 如果使用原样式，恢复下方注销代码 -->
|
||||
<!-- 原样式 end
|
||||
<view class="input-box">
|
||||
<input type="text" :placeholder="defaultKeyword" @input="inputChange" v-model="keyword" @confirm="doSearch(false)"
|
||||
placeholder-class="placeholder-class" confirm-type="search">
|
||||
</view>
|
||||
<view class="search-btn" @tap="doSearch(false)">搜索</view>
|
||||
|
||||
原样式 end -->
|
||||
</view>
|
||||
<view class="search-keyword" @touchstart="blur">
|
||||
<scroll-view class="keyword-list-box" v-show="isShowKeywordList" scroll-y>
|
||||
<view class="keyword-entry" hover-class="keyword-entry-tap" v-for="row in keywordList" :key="row.keyword">
|
||||
<view class="keyword-text" @tap="doSearch(row.keyword)"><rich-text :nodes="row.htmlStr"></rich-text></view>
|
||||
<view class="keyword-img" @tap="setkeyword(row)"><image src="/static/search/back.png"></image></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view class="keyword-box" v-show="!isShowKeywordList" scroll-y>
|
||||
<view class="keyword-block" v-if="oldKeywordList.length > 0">
|
||||
<view class="keyword-list-header">
|
||||
<view>历史搜索</view>
|
||||
<view><image @tap="oldDelete" src="/static/search/delete.png"></image></view>
|
||||
</view>
|
||||
<view class="keyword">
|
||||
<view v-for="(keyword, index) in oldKeywordList" @tap="doSearch(keyword)" :key="index">{{ keyword }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="keyword-block">
|
||||
<view class="keyword-list-header">
|
||||
<view>热门搜索</view>
|
||||
<view><image @tap="hotToggle" :src="'/static/search/attention' + forbid + '.png'"></image></view>
|
||||
</view>
|
||||
<view class="keyword" v-if="forbid == ''">
|
||||
<view v-for="(keyword, index) in hotKeywordList" @tap="doSearch(keyword)" :key="index">{{ keyword }}</view>
|
||||
</view>
|
||||
<view class="hide-hot-tis" v-else><view>当前搜热门搜索已隐藏</view></view>
|
||||
</view>
|
||||
<view class="keyword-block" v-if="goodsList.length>0">
|
||||
<view class="keyword-list-header">
|
||||
<view>搜索结果</view>
|
||||
</view>
|
||||
<view class="keyword" >
|
||||
<view v-for="(item, index) in goodsList" :key="index" @click="navToDetailPage(item)">{{ item.name }}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
//引用mSearch组件，如不需要删除即可
|
||||
import mSearch from '@/components/mehaotian-search-revision/mehaotian-search-revision.vue';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
defaultKeyword: '',
|
||||
keyword: '',
|
||||
oldKeywordList: [],
|
||||
hotKeywordList: [],
|
||||
goodsList:[],
|
||||
keywordList: [],
|
||||
forbid: '',
|
||||
isShowKeywordList: false
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.init();
|
||||
},
|
||||
components: {
|
||||
//引用mSearch组件，如不需要删除即可
|
||||
mSearch
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.loadDefaultKeyword();
|
||||
this.loadOldKeyword();
|
||||
this.loadHotKeyword();
|
||||
},
|
||||
blur() {
|
||||
uni.hideKeyboard();
|
||||
},
|
||||
//加载默认搜索关键字
|
||||
loadDefaultKeyword() {
|
||||
//定义默认搜索关键字，可以自己实现ajax请求数据再赋值,用户未输入时，以水印方式显示在输入框，直接不输入内容搜索会搜索默认关键字
|
||||
this.defaultKeyword = '默认关键字';
|
||||
},
|
||||
//加载历史搜索,自动读取本地Storage
|
||||
loadOldKeyword() {
|
||||
uni.getStorage({
|
||||
key: 'OldKeys',
|
||||
success: res => {
|
||||
var OldKeys = JSON.parse(res.data);
|
||||
this.oldKeywordList = OldKeys;
|
||||
}
|
||||
});
|
||||
},
|
||||
//加载热门搜索
|
||||
loadHotKeyword() {
|
||||
//定义热门搜索关键字，可以自己实现ajax请求数据再赋值
|
||||
this.hotKeywordList = ['手机', '商场', '包', '服装', '抱枕', '永生花', '鼠标垫', 'USB', 'USB3.0'];
|
||||
},
|
||||
//监听输入
|
||||
inputChange(event) {
|
||||
//兼容引入组件时传入参数情况
|
||||
var keyword = event.detail ? event.detail.value : event;
|
||||
if (!keyword) {
|
||||
this.keywordList = [];
|
||||
this.isShowKeywordList = false;
|
||||
return;
|
||||
}
|
||||
this.isShowKeywordList = true;
|
||||
//以下示例截取淘宝的关键字，请替换成你的接口
|
||||
uni.request({
|
||||
url: 'https://suggest.taobao.com/sug?code=utf-8&q=' + keyword, //仅为示例
|
||||
success: res => {
|
||||
this.keywordList = this.drawCorrelativeKeyword(res.data.result, keyword);
|
||||
}
|
||||
});
|
||||
},
|
||||
//高亮关键字
|
||||
drawCorrelativeKeyword(keywords, keyword) {
|
||||
var len = keywords.length,
|
||||
keywordArr = [];
|
||||
for (var i = 0; i < len; i++) {
|
||||
var row = keywords[i];
|
||||
//定义高亮#9f9f9f
|
||||
var html = row[0].replace(keyword, "<span style='color: #9f9f9f;'>" + keyword + '</span>');
|
||||
html = '<div>' + html + '</div>';
|
||||
var tmpObj = {
|
||||
keyword: row[0],
|
||||
htmlStr: html
|
||||
};
|
||||
keywordArr.push(tmpObj);
|
||||
}
|
||||
return keywordArr;
|
||||
},
|
||||
//顶置关键字
|
||||
setkeyword(data) {
|
||||
this.keyword = data.keyword;
|
||||
},
|
||||
//清除历史搜索
|
||||
oldDelete() {
|
||||
uni.showModal({
|
||||
content: '确定清除历史搜索记录？',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
this.oldKeywordList = [];
|
||||
uni.removeStorage({
|
||||
key: 'OldKeys'
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//热门搜索开关
|
||||
hotToggle() {
|
||||
this.forbid = this.forbid ? '' : '_forbid';
|
||||
},
|
||||
//详情
|
||||
navToDetailPage(item) {
|
||||
//测试数据没有写id，用title代替
|
||||
let id = item.id;
|
||||
uni.navigateTo({
|
||||
url: `../../pagesA/product/product?id=${id}`
|
||||
});
|
||||
},
|
||||
//执行搜索
|
||||
async doSearch(key) {
|
||||
key = key ? key : this.keyword ? this.keyword : this.defaultKeyword;
|
||||
this.keyword = key;
|
||||
this.saveKeyword(key); //保存为历史
|
||||
|
||||
//以下是示例跳转淘宝搜索，可自己实现搜索逻辑
|
||||
//#ifdef APP-PLUS
|
||||
plus.runtime.openURL(encodeURI('taobao://s.taobao.com/search?q=' + key));
|
||||
//#endif
|
||||
|
||||
let params = { keyword: key };
|
||||
let list =await Api.apiCall('get', Api.goods.goodsList, params);
|
||||
console.log(list.records);
|
||||
let goodsList = list.records;
|
||||
this.goodsList=goodsList;
|
||||
|
||||
},
|
||||
//保存关键字到历史记录
|
||||
saveKeyword(keyword) {
|
||||
uni.getStorage({
|
||||
key: 'OldKeys',
|
||||
success: res => {
|
||||
console.log(res.data);
|
||||
var OldKeys = JSON.parse(res.data);
|
||||
var findIndex = OldKeys.indexOf(keyword);
|
||||
if (findIndex == -1) {
|
||||
OldKeys.unshift(keyword);
|
||||
} else {
|
||||
OldKeys.splice(findIndex, 1);
|
||||
OldKeys.unshift(keyword);
|
||||
}
|
||||
//最多10个纪录
|
||||
OldKeys.length > 10 && OldKeys.pop();
|
||||
uni.setStorage({
|
||||
key: 'OldKeys',
|
||||
data: JSON.stringify(OldKeys)
|
||||
});
|
||||
this.oldKeywordList = OldKeys; //更新历史搜索
|
||||
},
|
||||
fail: e => {
|
||||
var OldKeys = [keyword];
|
||||
uni.setStorage({
|
||||
key: 'OldKeys',
|
||||
data: JSON.stringify(OldKeys)
|
||||
});
|
||||
this.oldKeywordList = OldKeys; //更新历史搜索
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
view {
|
||||
display: block;
|
||||
}
|
||||
.search-box {
|
||||
width: 100%;
|
||||
background-color: rgb(242, 242, 242);
|
||||
padding: 15upx 2.5%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.search-box .mSearch-input-box {
|
||||
width: 100%;
|
||||
}
|
||||
.search-box .input-box {
|
||||
width: 85%;
|
||||
flex-shrink: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.search-box .search-btn {
|
||||
width: 15%;
|
||||
margin: 0 0 0 2%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 28upx;
|
||||
color: #fff;
|
||||
background: linear-gradient(to right, #ff9801, #ff570a);
|
||||
border-radius: 60upx;
|
||||
}
|
||||
.search-box .input-box > input {
|
||||
width: 100%;
|
||||
height: 60upx;
|
||||
font-size: 32upx;
|
||||
border: 0;
|
||||
border-radius: 60upx;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 0 3%;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.placeholder-class {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
.search-keyword {
|
||||
width: 100%;
|
||||
background-color: rgb(242, 242, 242);
|
||||
}
|
||||
.keyword-list-box {
|
||||
height: calc(100vh - 110upx);
|
||||
padding-top: 10upx;
|
||||
border-radius: 20upx 20upx 0 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.keyword-entry-tap {
|
||||
background-color: #eee;
|
||||
}
|
||||
.keyword-entry {
|
||||
width: 94%;
|
||||
height: 80upx;
|
||||
margin: 0 3%;
|
||||
font-size: 30upx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: solid 1upx #e7e7e7;
|
||||
}
|
||||
.keyword-entry image {
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
}
|
||||
.keyword-entry .keyword-text,
|
||||
.keyword-entry .keyword-img {
|
||||
height: 80upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.keyword-entry .keyword-text {
|
||||
width: 90%;
|
||||
}
|
||||
.keyword-entry .keyword-img {
|
||||
width: 10%;
|
||||
justify-content: center;
|
||||
}
|
||||
.keyword-box {
|
||||
height: calc(100vh - 110upx);
|
||||
border-radius: 20upx 20upx 0 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.keyword-box .keyword-block {
|
||||
padding: 10upx 0;
|
||||
}
|
||||
.keyword-box .keyword-block .keyword-list-header {
|
||||
width: 100%;
|
||||
padding: 10upx 3%;
|
||||
font-size: 27upx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.keyword-box .keyword-block .keyword-list-header image {
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
}
|
||||
.keyword-box .keyword-block .keyword {
|
||||
width: 100%;
|
||||
padding: 3px 3%;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.keyword-box .keyword-block .hide-hot-tis {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 28upx;
|
||||
color: #6b6b6b;
|
||||
}
|
||||
.keyword-box .keyword-block .keyword > view {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 60upx;
|
||||
padding: 0 30upx;
|
||||
margin: 10upx 20upx 10upx 0;
|
||||
height: 60upx;
|
||||
font-size: 28upx;
|
||||
background-color: rgb(242, 242, 242);
|
||||
color: #6b6b6b;
|
||||
}
|
||||
|
||||
</style>
|
||||
707
mallplusui-uniapp-wx/pages/set/certification.vue
Normal file
707
mallplusui-uniapp-wx/pages/set/certification.vue
Normal file
@@ -0,0 +1,707 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- <view class="mask" v-if="CertificateStatus!='2'">
|
||||
<cmd-result-page src="https://gw.alipayobjects.com/zos/rmsportal/HWuSTipkjJRfTWekgTUG.svg" text="等待审核" subtext="已提交申请"></cmd-result-page>
|
||||
</view> -->
|
||||
<view class="box-cont" >
|
||||
<view class="name"><input type="text" placeholder="请输入姓名" @blur="blurname" /></view>
|
||||
<view class="name"><input type="text" placeholder="请输入身份证号码" maxlength="18" @blur="blurnumber" /></view>
|
||||
<view style="padding-left: 50upx;" v-show="numberError"><text style="color:#DD524D;">身份证号码有误</text></view>
|
||||
<view style="padding-left:10upx;">
|
||||
<text style="color:#DD524D;">{{ time }}</text>
|
||||
</view>
|
||||
<view class="idbox">
|
||||
<view class="idboxTitle">身份证照片(正面)</view>
|
||||
<view class="idboxConten">
|
||||
<view class="idboxConten_left" @click="uploadIdentityImg('front')">
|
||||
<image src="http://mp.emshop.eonfox.com/zrhzstatic/muying/camera.png"></image>
|
||||
<view class="idboxConten_left_text">选择身份证照片</view>
|
||||
</view>
|
||||
<view class="idboxConten_right">
|
||||
<image v-if="JSONS.front_image_id" :src="qiniuaddress + JSONS.front_image_id" mode="aspectFill" />
|
||||
<image v-else src="http://mp.emshop.eonfox.com/zrhzstatic/muying/idcard1.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="idboxFront" @click="uploadIdentityImg('front')">
|
||||
<image v-if="JSONS.front_image_id" :src="qiniuaddress+JSONS.front_image_id" mode="aspectFill"/>
|
||||
<view v-else>
|
||||
<view style="font-size:140upx;">+</view>
|
||||
<view>正面照片</view>
|
||||
<view>(文字清晰，四角周全)</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="idboxTitle">身份证照片(背面)</view>
|
||||
<view class="idboxConten">
|
||||
<view class="idboxConten_left" @click="uploadIdentityImg('back')">
|
||||
<image src="http://mp.emshop.eonfox.com/zrhzstatic/muying/camera.png"></image>
|
||||
<view class="idboxConten_left_text">选择身份证照片</view>
|
||||
</view>
|
||||
<view class="idboxConten_right">
|
||||
<image v-if="JSONS.back_image_id" :src="qiniuaddress + JSONS.back_image_id" mode="aspectFill" />
|
||||
<image v-else src="http://mp.emshop.eonfox.com/zrhzstatic/muying/idcard2.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="idboxBack" @click="uploadIdentityImg('back')">
|
||||
<image v-if="JSONS.back_image_id" :src="qiniuaddress+JSONS.back_image_id" mode="aspectFill" />
|
||||
<view v-else>
|
||||
<view style="font-size:140upx;">+</view>
|
||||
<view>背面照片</view>
|
||||
<view>(文字清晰，四角周全)</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="area">
|
||||
<view class="areaBox" @click="showMulLinkageTwoPicker">
|
||||
<view class="areaBox_left">
|
||||
{{ Address }}
|
||||
</view>
|
||||
<view class="areaBox_right"><image src="http://mp.emshop.eonfox.com/zrhzstatic/muying/back.png"></image></view>
|
||||
</view>
|
||||
<view class="detailAreaBox">
|
||||
<textarea type="text" placeholder="详细地址：如道路、门牌号、小区、楼栋号、单元室等" class="homeRight" v-model="addresst" v-show="inputDisplay"></textarea>
|
||||
</view>
|
||||
</view>
|
||||
<mpvue-picker ref="mpvuePicker" @onConfirm="onConfirm" @onCancel="onCancel"></mpvue-picker>
|
||||
|
||||
<button type="primary" class="primary" @click="next">确认提交</button>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cmdResultPage from "@/components/cmd-result-page/cmd-result-page.vue"
|
||||
import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
|
||||
|
||||
import city from '../../common/city.data.js';
|
||||
import eonfox from '@/components/eonfox/eonfox.js';
|
||||
import fns from '@/components/eonfox/fns.js';
|
||||
var ef = new eonfox();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
img_index: 'headImgOne',
|
||||
img_type: 'front',
|
||||
province: [],
|
||||
province_index: 0,
|
||||
province_data: '',
|
||||
citys: [],
|
||||
citys_index: 0,
|
||||
city_data: '',
|
||||
username: '',
|
||||
cardNumber: '',
|
||||
address: '',
|
||||
addresss: '',
|
||||
addressc: '',
|
||||
addresst: '',
|
||||
headImgOne: '',
|
||||
headImgTwo: '',
|
||||
Front_image_id: '',
|
||||
Back_image_id: '',
|
||||
display: true,
|
||||
displayx: true,
|
||||
numberError: false,
|
||||
time: '',
|
||||
CertificateStatus: 0,
|
||||
JSONS: {},
|
||||
qiniuaddress: '',
|
||||
phoneShow: true,
|
||||
phoneShowTwo: false,
|
||||
Address: '选择地址',
|
||||
Sprovince: '',
|
||||
Scity: '',
|
||||
Sdistrict: '',
|
||||
inputDisplay: true
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
for (var i in city) {
|
||||
this.province.push(city[i].label);
|
||||
} //省数组赋值
|
||||
var cityChildren = city[this.province_index].children; //获取该省城市
|
||||
console.log(cityChildren);
|
||||
for (var i in cityChildren) {
|
||||
this.citys.push(cityChildren[i].label);
|
||||
} //城市数组赋值
|
||||
},
|
||||
onShow() {
|
||||
var that = this;
|
||||
ef.submit({
|
||||
request: {
|
||||
s: ['APPLICATIONCONFIG'],
|
||||
Authentication: ['USERIDENTITYSELFSTATE'],
|
||||
Editstate: ['USERIDENTITYSELFEDITGET'],
|
||||
config: ['APPLICATIONCONFIG']
|
||||
},
|
||||
callback: function(data) {
|
||||
console.log(data);
|
||||
var dataList = fns.checkError(data, ['s', 'Authentication'], function(erron, error) {
|
||||
uni.showToast({
|
||||
title: error,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
//判断当前是否为编辑状态
|
||||
const editstate = data.data.Editstate.data;
|
||||
if (editstate) {
|
||||
that.JSONS = editstate;
|
||||
console.log('JSONS', that.JSONS);
|
||||
}
|
||||
//七牛云地址
|
||||
if (data.data.config && data.data.config.data.qiniu_domain) {
|
||||
that.qiniuaddress = data.data.config.data.qiniu_domain;
|
||||
}
|
||||
console.log(dataList.Authentication,'审核状')
|
||||
if (dataList.Authentication == 1) {
|
||||
that.CertificateStatus = 1;
|
||||
console.log('审核状态', that.CertificateStatus);
|
||||
}
|
||||
if (that.CertificateStatus == 1) {
|
||||
console.log('时间', data);
|
||||
var times = data.data.s.data.user_identity.expire_time / 3600;
|
||||
that.time = '认证失效时间还有' + times / 24 + '天' + (times % 24) + '小时';
|
||||
console.log('时间', that.time);
|
||||
}
|
||||
//通过审核后
|
||||
},
|
||||
error: function(err) {
|
||||
console.log('出错啦', err);
|
||||
}
|
||||
});
|
||||
},
|
||||
components: {
|
||||
mpvuePicker,
|
||||
|
||||
cmdResultPage
|
||||
},
|
||||
methods: {
|
||||
//选择地址
|
||||
onConfirm(e) {
|
||||
this.inputDisplay = true;
|
||||
console.log(e);
|
||||
this.Address = e.label;
|
||||
var arr = this.Address.split('-');
|
||||
console.log('arr', arr);
|
||||
this.Sprovince = arr[0];
|
||||
this.Scity = arr[1];
|
||||
this.Sdistrict = arr[2];
|
||||
console.log(this.Sprovince, this.Scity, this.Sdistrict);
|
||||
},
|
||||
onCancel() {
|
||||
this.inputDisplay = true;
|
||||
},
|
||||
|
||||
error(e) {
|
||||
fns.err(e.detail);
|
||||
},
|
||||
photo(type) {
|
||||
var _this = this;
|
||||
wx.getSetting({
|
||||
success(res) {
|
||||
console.log('auth', res.authSetting);
|
||||
if (!res.authSetting['scope.camera']) {
|
||||
wx.authorize({
|
||||
scope: 'scope.camera',
|
||||
success() {
|
||||
console.log('已同意授权');
|
||||
// 用户已经同意
|
||||
console.log('已同意授权', type);
|
||||
_this.takePhoto(type);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log('已授权');
|
||||
console.log('已同意授权', type);
|
||||
_this.takePhoto(type);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
takePhoto(type) {
|
||||
console.log('........', type);
|
||||
var _this = this;
|
||||
console.log('+++++++++相机分割线+++++++++++++++++++++++++');
|
||||
const ctx = uni.createCameraContext();
|
||||
console.log('ctx', ctx);
|
||||
ctx.takePhoto({
|
||||
quality: 'high',
|
||||
success: res => {
|
||||
console.log('takephoto-re', res.tempImagePath);
|
||||
var img = res.tempImagePath;
|
||||
ef.left_token(function(left_token) {
|
||||
//encodeURIComponent encodeURI
|
||||
// var uploadUrl=ef.api_server_url+"?"+encodeURI('data=[["USERIDENTITYSELFUPLOAD",[{"type":"'+_this.img_type+'"}]]]')+"&token="+left_token;
|
||||
const uploadUrl = ef.api_server_url + '?' + encodeURI(`data=[["USERIDENTITYSELFUPLOAD",[{"type":"${type}"}]]]`) + '&token=' + left_token;
|
||||
uni.uploadFile({
|
||||
url: uploadUrl,
|
||||
filePath: img,
|
||||
fileType: 'image',
|
||||
name: 'file',
|
||||
success: res => {
|
||||
console.log('上传完成:', res);
|
||||
res = JSON.parse(res.data);
|
||||
console.log(res);
|
||||
res = res.data[0];
|
||||
|
||||
// 是否成功
|
||||
if (res.errno == 0) {
|
||||
// 判断图片类型
|
||||
if (type == 'front') {
|
||||
_this.JSONS.front_image_id = res.data;
|
||||
} else {
|
||||
_this.JSONS.back_image_id = res.data;
|
||||
}
|
||||
uni.showToast({
|
||||
title: '上传成功',
|
||||
success() {
|
||||
_this.phoneShow = !_this.phoneShow;
|
||||
_this.phoneShowTwo = !_this.phoneShowTwo;
|
||||
}
|
||||
});
|
||||
console.log('JSONS.front_image_id',_this.JSONS.front_image_id)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.error,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
console.log('uploadImage fail', err);
|
||||
uni.showModal({
|
||||
content: err.errMsg,
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
fail() {
|
||||
fns.err('打开相机失败');
|
||||
},
|
||||
complete() {
|
||||
console.log('打开相机');
|
||||
}
|
||||
});
|
||||
console.log('+++++++++相机分割线+++++++++++++++++++++++++');
|
||||
},
|
||||
provinceChange: function(e) {
|
||||
console.log('省index:', e.target.value);
|
||||
this.province_index = e.target.value; //以选择序号省显示改变
|
||||
this.province_data = city[e.target.value].label; //省赋值
|
||||
console.log('province:', city[e.target.value].label);
|
||||
this.citys = []; //先清空城市
|
||||
this.citys_index = 0;
|
||||
var cityChildren = city[e.target.value].children;
|
||||
for (var i in cityChildren) {
|
||||
this.citys.push(cityChildren[i].label);
|
||||
} //城市数组更换
|
||||
},
|
||||
cityChange: function(e) {
|
||||
this.citys_index = e.target.value;
|
||||
this.city_data = city[this.province_index].children[this.citys_index].label;
|
||||
console.log('市：', e.target.value);
|
||||
console.log('市：', this.city_data);
|
||||
},
|
||||
next() {
|
||||
var that = this;
|
||||
// that.address=that.addresss+that.addressc+that.addresst;
|
||||
console.log('姓名', that.username);
|
||||
console.log('姓名', that.cardNumber);
|
||||
console.log('姓名', that.address);
|
||||
ef.submit({
|
||||
request: {
|
||||
s: [
|
||||
'USERIDENTITYSELFADD',
|
||||
[
|
||||
{
|
||||
real_name: that.username,
|
||||
card_number: that.cardNumber,
|
||||
card_address: that.addresst,
|
||||
province: that.Sprovince,
|
||||
city: that.Scity,
|
||||
district: that.Sdistrict
|
||||
}
|
||||
]
|
||||
],
|
||||
y: ['USERSELF']
|
||||
},
|
||||
callback: function(data) {
|
||||
console.log(data);
|
||||
var fns_ = fns.checkError(data, ['s'], function(erron, error) {
|
||||
fns.err('认证', error);
|
||||
return;
|
||||
});
|
||||
if (data.data.s.errno == 0) {
|
||||
uni.showToast({
|
||||
title: '已提交，等待审核',
|
||||
success() {
|
||||
setTimeout(function() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function(err) {
|
||||
fns.err('', err, 1);
|
||||
}
|
||||
});
|
||||
},
|
||||
blurname: function(event) {
|
||||
this.username = event.target.value;
|
||||
},
|
||||
blurnumber: function(event) {
|
||||
var that = this;
|
||||
that.cardNumber = event.target.value;
|
||||
console.log('身份证号码');
|
||||
if (!/[0-9]{18}/.test(that.cardNumber)) {
|
||||
that.numberError = true;
|
||||
} else {
|
||||
that.numberError = false;
|
||||
}
|
||||
},
|
||||
bluraddresss: function(event) {
|
||||
this.addresss = event.target.value;
|
||||
},
|
||||
bluraddresc: function(event) {
|
||||
this.addressc = event.target.value;
|
||||
},
|
||||
bluraddress: function(event) {
|
||||
this.addresst = event.target.value;
|
||||
},
|
||||
// 上传身份证
|
||||
uploadIdentityImg(type) {
|
||||
const _this = this;
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
success: res => {
|
||||
wx.showLoading({
|
||||
title: '上传中'
|
||||
});
|
||||
console.log('chooseImage success, temp path is', res.tempFilePaths[0]);
|
||||
const file = res.tempFilePaths[0];
|
||||
ef.left_token(function(left_token) {
|
||||
//encodeURIComponent encodeURI
|
||||
const uploadUrl = ef.api_server_url + '?' + encodeURI(`data=[["USERIDENTITYSELFUPLOAD",[{"type":"${type}"}]]]`) + '&token=' + left_token;
|
||||
uni.uploadFile({
|
||||
url: uploadUrl,
|
||||
filePath: file,
|
||||
fileType: 'image',
|
||||
name: 'file',
|
||||
success: res => {
|
||||
console.log('上传完成1:', res);
|
||||
res = JSON.parse(res.data);
|
||||
console.log(res);
|
||||
res = res.data[0];
|
||||
// 是否成功
|
||||
if (res.errno == 0) {
|
||||
// 判断图片类型
|
||||
if (type === 'front') {
|
||||
_this.JSONS.front_image_id = res.data;
|
||||
} else {
|
||||
_this.JSONS.back_image_id = res.data;
|
||||
}
|
||||
uni.showToast({
|
||||
title: '上传成功'
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.error,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
console.log('uploadImage fail', err);
|
||||
uni.showModal({
|
||||
content: err.errMsg,
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
fail: err => {
|
||||
console.log('chooseImage fail', err);
|
||||
uni.showToast({
|
||||
title: '你取消了图片上传',
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
success() {
|
||||
_this.display = !_this.display;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
ModifyThePicture() {
|
||||
var _this = this;
|
||||
_this.display = !_this.display;
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
// sourceType: ['album'],
|
||||
success: res => {
|
||||
console.log('chooseImage success, temp path is', res.tempFilePaths[0]);
|
||||
var imageSrc = res.tempFilePaths[0];
|
||||
ef.left_token(function(left_token) {
|
||||
//encodeURIComponent encodeURI
|
||||
var uploadUrl = ef.api_server_url + '?' + encodeURI('data=[["USERIDENTITYSELFUPLOAD",[{"type":"front"}]]]') + '&token=' + left_token;
|
||||
uni.uploadFile({
|
||||
url: uploadUrl,
|
||||
filePath: imageSrc,
|
||||
fileType: 'image',
|
||||
name: 'file',
|
||||
success: res => {
|
||||
console.log('上传完成:', res);
|
||||
|
||||
var dataList = fns.checkError(JSONS.parse(res.data), ['0'], function(erron, error) {
|
||||
console.log('上传错误', res.data);
|
||||
uni.showToast({
|
||||
title: error,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
console.log('dataList:', dataList[0]);
|
||||
_this.Front_image_id = dataList[0];
|
||||
if (dataList[0]) {
|
||||
uni.showToast({
|
||||
title: '上传成功',
|
||||
icon: 'none',
|
||||
duration: 1000,
|
||||
success() {
|
||||
_this.headImgOne = imageSrc;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
console.log('uploadImage fail', err);
|
||||
uni.showModal({
|
||||
content: err.errMsg,
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
fail: err => {
|
||||
console.log('chooseImage fail', err);
|
||||
uni.showToast({
|
||||
title: '你取消了图片上传',
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
success() {
|
||||
_this.display = !_this.display;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
ModifyThePictureTwo() {
|
||||
var _this = this;
|
||||
_this.displayx = !_this.displayx;
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album'],
|
||||
success: res => {
|
||||
console.log('chooseImage success, temp path is', res.tempFilePaths[0]);
|
||||
var imageSrc = res.tempFilePaths[0];
|
||||
ef.left_token(function(left_token) {
|
||||
//encodeURIComponent encodeURI
|
||||
var uploadUrl = ef.api_server_url + '?' + encodeURI('data=[["USERIDENTITYSELFUPLOAD",[{"type":"back"}]]]') + '&token=' + left_token;
|
||||
uni.uploadFile({
|
||||
url: uploadUrl,
|
||||
filePath: imageSrc,
|
||||
fileType: 'image',
|
||||
name: 'file',
|
||||
success: res => {
|
||||
console.log('上传完成:', res);
|
||||
|
||||
var dataList = fns.checkError(JSONS.parse(res.data), ['0'], function(erron, error) {
|
||||
console.log('上传错误', res.data);
|
||||
uni.showToast({
|
||||
title: error,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
console.log('dataList:', dataList[0]);
|
||||
_this.Back_image_id = dataList[0];
|
||||
if (dataList[0]) {
|
||||
uni.showToast({
|
||||
title: '上传成功',
|
||||
icon: 'none',
|
||||
duration: 1000,
|
||||
success() {
|
||||
_this.headImgTwo = imageSrc;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
console.log('uploadImage fail', err);
|
||||
uni.showModal({
|
||||
content: err.errMsg,
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
fail: err => {
|
||||
console.log('chooseImage fail', err);
|
||||
uni.showToast({
|
||||
title: '你取消了图片上传', //JSONS.stringify(err)
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
success() {
|
||||
_this.displayx = !_this.displayx;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page{
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
.homeRight{
|
||||
width: 100%;
|
||||
height:100%;
|
||||
}
|
||||
.content{
|
||||
font-size: 28upx
|
||||
}
|
||||
.name{
|
||||
display: flex;
|
||||
width: 690upx;
|
||||
margin-left :30upx;
|
||||
border-radius: 10upx;
|
||||
height: 80upx;
|
||||
justify-content :center;
|
||||
align-items :center ;
|
||||
flex-direction: row;
|
||||
padding-left :10upx;
|
||||
background-color :#FFFFFF;
|
||||
margin-top :20upx;
|
||||
}
|
||||
.primary{
|
||||
width :690upx;
|
||||
margin: 40px auto;
|
||||
color: #fff;
|
||||
background:linear-gradient(to right, #F29B87,#F8C6B5);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.name input{
|
||||
width: 100%;
|
||||
height:40upx;
|
||||
line-height: 40upx;
|
||||
float:left;
|
||||
font-size: 28upx;
|
||||
}
|
||||
textarea{
|
||||
font-size: 28upx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.idbox{
|
||||
width: 690upx;
|
||||
margin-left: 30upx;
|
||||
}
|
||||
.idboxTitle{
|
||||
width: 100%;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
font-size: 30upx;
|
||||
color: #333333;
|
||||
}
|
||||
.idboxConten{
|
||||
width: 100%;
|
||||
/* height: 230upx; */
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10upx;
|
||||
padding: 30upx 0;
|
||||
display: flex;
|
||||
}
|
||||
.idboxConten_left{
|
||||
width: 200upx;
|
||||
height: 200upx;
|
||||
background-color: #F1F1F1;
|
||||
margin-left: 30upx;
|
||||
}
|
||||
.idboxConten_left image{
|
||||
width: 120upx;
|
||||
height: 100upx;
|
||||
margin-left: 40upx;
|
||||
margin-top: 20upx;
|
||||
}
|
||||
.idboxConten_left_text{
|
||||
width: 100%;
|
||||
height: 40upx;
|
||||
margin-top: 20upx;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
}
|
||||
.idboxConten_right{
|
||||
width: 320upx;
|
||||
height: 200upx;
|
||||
margin-left: 90upx;
|
||||
}
|
||||
.idboxConten_right image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.area{
|
||||
width: 690upx;
|
||||
margin-left: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10upx;
|
||||
margin-top: 30upx;
|
||||
padding-left: 3%;
|
||||
}
|
||||
.areaBox{
|
||||
width: 100%;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
border-bottom: #E4E4E4 solid 1upx;
|
||||
display: flex;
|
||||
}
|
||||
.areaBox_left{
|
||||
width: 94%;
|
||||
color: #333333;
|
||||
}
|
||||
.areaBox_right{
|
||||
width: 6%;
|
||||
}
|
||||
.areaBox_right image{
|
||||
width: 20upx;
|
||||
height: 25upx;
|
||||
}
|
||||
.detailAreaBox{
|
||||
width: 100%;
|
||||
height: 110upx;
|
||||
color: #333333;
|
||||
padding-top: 10upx;
|
||||
}
|
||||
.mask{
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #F5F5F5;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
}
|
||||
</style>
|
||||
149
mallplusui-uniapp-wx/pages/set/set.vue
Normal file
149
mallplusui-uniapp-wx/pages/set/set.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="list-cell b-b m-t" @click="navTo('../../pagesU/user/profile')" hover-class="cell-hover" :hover-stay-time="50">
|
||||
<text class="cell-tit">个人资料</text>
|
||||
<text class="cell-more yticon icon-you"></text>
|
||||
</view>
|
||||
<view class="list-cell b-b" @click="navTo('../../pagesU/address/address')" hover-class="cell-hover" :hover-stay-time="50">
|
||||
<text class="cell-tit">收货地址</text>
|
||||
<text class="cell-more yticon icon-you"></text>
|
||||
</view>
|
||||
<view class="list-cell" @click="navTo('/pages/set/certification')" hover-class="cell-hover" :hover-stay-time="50">
|
||||
<text class="cell-tit">实名认证</text>
|
||||
<text class="cell-more yticon icon-you"></text>
|
||||
</view>
|
||||
|
||||
<view class="list-cell m-t">
|
||||
<text class="cell-tit">消息推送</text>
|
||||
<switch checked color="#fa436a" @change="switchChange" />
|
||||
</view>
|
||||
<view class="list-cell m-t b-b" @click="navTo('清除缓存')" hover-class="cell-hover" :hover-stay-time="50">
|
||||
<text class="cell-tit">清除缓存</text>
|
||||
<text class="cell-more yticon icon-you"></text>
|
||||
</view>
|
||||
<view class="list-cell b-b" @click="navTo('关于Dcloud')" hover-class="cell-hover" :hover-stay-time="50">
|
||||
<text class="cell-tit">关于{{ sysInfo.name }}</text>
|
||||
<text class="cell-more yticon icon-you"></text>
|
||||
</view>
|
||||
<view class="list-cell" @click="updateApp()">
|
||||
<text class="cell-tit">检查更新</text>
|
||||
<!-- <text class="cell-tip">当前版本 {{sysInfo.version}}</text> -->
|
||||
<text class="cell-more yticon icon-you"></text>
|
||||
</view>
|
||||
<view class="list-cell log-out-btn" @click="toLogout"><text class="cell-tit">退出登录</text></view>
|
||||
<mallplusCopyright></mallplusCopyright>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import { mapMutations } from 'vuex';
|
||||
import APPUpdate from '../../plugins/APPUpdate/index.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sysInfo: '',
|
||||
userInfo:{}
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.sysInfo = this.$db.get('sysInfo');
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['logout']),
|
||||
|
||||
navTo(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
this.$api.msg(`跳转到${url}`);
|
||||
},
|
||||
//退出登录
|
||||
toLogout() {
|
||||
uni.showModal({
|
||||
content: '确定要退出登录么',
|
||||
success: e => {
|
||||
if (e.confirm) {
|
||||
this.logout();
|
||||
this.$db.del('userInfos');
|
||||
this.$db.del('token');
|
||||
Api.apiCall('post', Api.index.logout, {});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//switch
|
||||
switchChange(e) {
|
||||
let statusTip = e.detail.value ? '打开' : '关闭';
|
||||
this.$api.msg(`${statusTip}消息推送`);
|
||||
},
|
||||
updateApp() {
|
||||
// true 没有新版本的时候有提示，默认：false
|
||||
APPUpdate(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
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;
|
||||
border-radius: 50upx;
|
||||
width: 95%;
|
||||
margin-left: 2.5%;
|
||||
background: $uni-color-primary;
|
||||
.cell-tit {
|
||||
color: #ffffff;
|
||||
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>
|
||||
Reference in New Issue
Block a user