huyuanxiang
2 years ago
parent
dfbaa472ac
commit
453c3d6c97
@ -0,0 +1,5 @@
|
||||
# 默认忽略的文件
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# 基于编辑器的 HTTP 客户端请求
|
||||
/httpRequests/
|
||||
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/nherp-shop.iml" filepath="$PROJECT_DIR$/.idea/nherp-shop.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
@ -0,0 +1,20 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
|
||||
|
||||
export const getGoodsList = (params) => request('/erp/goods/list', params, 'get')
|
||||
|
||||
export const getAddrList = (params) => request('/erp/addrManager/list', params, 'get')
|
||||
|
||||
export const getOrderList = (params) => request('/erp/order/list', params, 'get')
|
||||
export const addOrder = (params) => request('/erp/order/add', params, 'post')
|
||||
export const editOrder = (params) => request('/erp/order/edit', params, 'post')
|
||||
|
||||
|
||||
export const addAddr = (params) => request('/erp/addrManager/add', params, 'post')
|
||||
export const editAddr = (params) => request('/erp/addrManager/edit', params, 'post')
|
||||
|
||||
export const delAddr = (params) => request('/erp/addrManager/delete?id='+params, {} , 'delete')
|
||||
|
||||
export const getCode = (params) => request('/sys/randomImage/' + params, {}, 'get')
|
||||
export const login = (params) => request('/sys/login', params, 'POST')
|
||||
@ -0,0 +1,184 @@
|
||||
/*
|
||||
Animation 微动画
|
||||
基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
|
||||
*/
|
||||
|
||||
/* css 滤镜 控制黑白底色gif的 */
|
||||
.gif-black{
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
.gif-white{
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
|
||||
/* Animation css */
|
||||
[class*=animation-] {
|
||||
animation-duration: .5s;
|
||||
animation-timing-function: ease-out;
|
||||
animation-fill-mode: both
|
||||
}
|
||||
|
||||
.animation-fade {
|
||||
animation-name: fade;
|
||||
animation-duration: .8s;
|
||||
animation-timing-function: linear
|
||||
}
|
||||
|
||||
.animation-scale-up {
|
||||
animation-name: scale-up
|
||||
}
|
||||
|
||||
.animation-scale-down {
|
||||
animation-name: scale-down
|
||||
}
|
||||
|
||||
.animation-slide-top {
|
||||
animation-name: slide-top
|
||||
}
|
||||
|
||||
.animation-slide-bottom {
|
||||
animation-name: slide-bottom
|
||||
}
|
||||
|
||||
.animation-slide-left {
|
||||
animation-name: slide-left
|
||||
}
|
||||
|
||||
.animation-slide-right {
|
||||
animation-name: slide-right
|
||||
}
|
||||
|
||||
.animation-shake {
|
||||
animation-name: shake
|
||||
}
|
||||
|
||||
.animation-reverse {
|
||||
animation-direction: reverse
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0% {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-up {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.2)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(1.8)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-top {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-bottom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(100%)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0)
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: translateX(-9px)
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translateX(8px)
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translateX(-7px)
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translateX(6px)
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(-5px)
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateX(4px)
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translateX(-3px)
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(2px)
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translateX(-1px)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(100%)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
/* colorui/components/cu-custom.wxss */
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<view class="cu-custom" :style="'height:' + CustomBar + 'px'">
|
||||
<view :class="'cu-bar fixed ' + (bgImage!=''?'none-bg text-white bg-img':'') + ' ' + bgColor" :style="'height:' + CustomBar + 'px;padding-top:' + StatusBar + 'px;' + (bgImage?'background-image:url(' + bgImage+')':'')">
|
||||
<view class="action" @tap="BackPage" v-if="isBack">
|
||||
<text class="cuIcon-back"></text>
|
||||
<slot name="backText"></slot>
|
||||
</view>
|
||||
<view class="action border-custom" v-if="isCustom" :style="'width:' + Custom.width + 'px;height:' + Custom.height + 'px;margin-left:calc(750upx - ' + Custom.right + 'px)'">
|
||||
<text class="cuIcon-back" @tap="BackPage"></text>
|
||||
<text class="cuIcon-homefill" @tap="toHome"></text>
|
||||
</view>
|
||||
<view class="content" :style="'top:' + StatusBar + 'px'">
|
||||
<slot name="content"></slot>
|
||||
</view>
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
Custom: app.globalData.Custom
|
||||
};
|
||||
},
|
||||
|
||||
components: {},
|
||||
props: {
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isCustom: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
isBack: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
bgImage: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的一些选项
|
||||
*/
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
multipleSlots: true
|
||||
},
|
||||
methods: {
|
||||
BackPage() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
|
||||
toHome() {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
@import "./cu-custom.css";
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,22 @@
|
||||
export default {
|
||||
created() {
|
||||
if (this.type === 'message') {
|
||||
// 不显示遮罩
|
||||
this.maskShow = false
|
||||
// 获取子组件对象
|
||||
this.childrenMsg = null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
customOpen() {
|
||||
if (this.childrenMsg) {
|
||||
this.childrenMsg.open()
|
||||
}
|
||||
},
|
||||
customClose() {
|
||||
if (this.childrenMsg) {
|
||||
this.childrenMsg.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<view class="uni-popup-share">
|
||||
<view class="uni-share-title"><text class="uni-share-title-text">{{title}}</text></view>
|
||||
<view class="uni-share-content">
|
||||
<view class="uni-share-content-box">
|
||||
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
|
||||
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
|
||||
<text class="uni-share-text">{{item.text}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-share-button-box">
|
||||
<button class="uni-share-button" @click="close">取消</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UniPopupShare',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '分享到'
|
||||
}
|
||||
},
|
||||
inject: ['popup'],
|
||||
data() {
|
||||
return {
|
||||
bottomData: [{
|
||||
text: '微信',
|
||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
|
||||
name: 'wx'
|
||||
},
|
||||
{
|
||||
text: '支付宝',
|
||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-8.png',
|
||||
name: 'wx'
|
||||
},
|
||||
{
|
||||
text: 'QQ',
|
||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/gird-3.png',
|
||||
name: 'qq'
|
||||
},
|
||||
{
|
||||
text: '新浪',
|
||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-1.png',
|
||||
name: 'sina'
|
||||
},
|
||||
{
|
||||
text: '百度',
|
||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-7.png',
|
||||
name: 'copy'
|
||||
},
|
||||
{
|
||||
text: '其他',
|
||||
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-5.png',
|
||||
name: 'more'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
/**
|
||||
* 选择内容
|
||||
*/
|
||||
select(item, index) {
|
||||
this.$emit('select', {
|
||||
item,
|
||||
index
|
||||
}, () => {
|
||||
this.popup.close()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 关闭窗口
|
||||
*/
|
||||
close() {
|
||||
this.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.uni-popup-share {
|
||||
background-color: #fff;
|
||||
}
|
||||
.uni-share-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
}
|
||||
.uni-share-title-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
.uni-share-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.uni-share-content-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.uni-share-content-item {
|
||||
width: 90px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-share-content-item:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.uni-share-image {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.uni-share-text {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #3B4144;
|
||||
}
|
||||
|
||||
.uni-share-button-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.uni-share-button {
|
||||
flex: 1;
|
||||
border-radius: 50px;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.uni-share-button::after {
|
||||
border-radius: 50px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,36 @@
|
||||
export const ORDER_NAVS = [
|
||||
{
|
||||
name: '全部',
|
||||
icon: 'icon-daifukuan',
|
||||
url: '',
|
||||
id: -1
|
||||
},
|
||||
{
|
||||
name: '待支付',
|
||||
icon: 'icon-daifukuan',
|
||||
url: '',
|
||||
id: 0
|
||||
}, {
|
||||
name: '待发货',
|
||||
icon: 'icon-daifahuo',
|
||||
url: '',
|
||||
id: 1
|
||||
}, {
|
||||
name: '待收货',
|
||||
icon: 'icon-daishouhuo1',
|
||||
url: '',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
name: '已收货',
|
||||
icon: 'icon-daipingjia',
|
||||
url: '',
|
||||
id: 3
|
||||
},
|
||||
// {
|
||||
// name: '退款/售后',
|
||||
// icon: 'icon-shouhou',
|
||||
// url: '/pages/views/order/afterSaleList',
|
||||
// id: 4
|
||||
// },
|
||||
]
|
||||
@ -0,0 +1,70 @@
|
||||
import Vue from 'vue';
|
||||
import App from './App';
|
||||
import nodata from "./pages/commponent/public/nodata";
|
||||
import request from 'utils/request.js' //引入异步请求函数
|
||||
|
||||
|
||||
import json from './json' //测试用数据
|
||||
|
||||
|
||||
Vue.prototype.request = request.request //挂载到全局
|
||||
Vue.component("nodata", nodata);
|
||||
Vue.config.productionTip = false;
|
||||
Vue.mixin({
|
||||
methods: {
|
||||
setData: function(obj, callback) {
|
||||
let that = this;
|
||||
const handleData = (tepData, tepKey, afterKey) => {
|
||||
tepKey = tepKey.split('.');
|
||||
tepKey.forEach(item => {
|
||||
if (tepData[item] === null || tepData[item] === undefined) {
|
||||
let reg = /^[0-9]+$/;
|
||||
tepData[item] = reg.test(afterKey) ? [] : {};
|
||||
tepData = tepData[item];
|
||||
} else {
|
||||
tepData = tepData[item];
|
||||
}
|
||||
});
|
||||
return tepData;
|
||||
};
|
||||
const isFn = function(value) {
|
||||
return typeof value == 'function' || false;
|
||||
};
|
||||
Object.keys(obj).forEach(function(key) {
|
||||
let val = obj[key];
|
||||
key = key.replace(/\]/g, '').replace(/\[/g, '.');
|
||||
let front, after;
|
||||
let index_after = key.lastIndexOf('.');
|
||||
if (index_after != -1) {
|
||||
after = key.slice(index_after + 1);
|
||||
front = handleData(that, key.slice(0, index_after), after);
|
||||
} else {
|
||||
after = key;
|
||||
front = that;
|
||||
}
|
||||
if (front.$data && front.$data[after] === undefined) {
|
||||
Object.defineProperty(front, after, {
|
||||
get() {
|
||||
return front.$data[after];
|
||||
},
|
||||
set(newValue) {
|
||||
front.$data[after] = newValue;
|
||||
that.$forceUpdate();
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
front[after] = val;
|
||||
} else {
|
||||
that.$set(front, after, val);
|
||||
}
|
||||
});
|
||||
isFn(callback) && this.$nextTick(callback);
|
||||
}
|
||||
}
|
||||
});
|
||||
App.mpType = 'app';
|
||||
const app = new Vue({
|
||||
...App
|
||||
});
|
||||
app.$mount();
|
||||
@ -0,0 +1,92 @@
|
||||
{
|
||||
"name" : "商城模板",
|
||||
"appid" : "__UNI__8A51802",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
"modules" : {},
|
||||
"distribute" : {
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
],
|
||||
"abiFilters" : [ "armeabi-v7a", "arm64-v8a", "x86" ]
|
||||
},
|
||||
"ios" : {},
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
"quickapp" : {},
|
||||
"mp-weixin" : {
|
||||
"appid" : "wxa8d0f5e27ea959d2",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true,
|
||||
"permission" : {
|
||||
"scope.userLocation" : {
|
||||
"desc" : "你的位置信息将用于小程序位置接口的效果展示"
|
||||
}
|
||||
},
|
||||
"plugins" : {}
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"h5" : {
|
||||
"devServer" : {
|
||||
"disableHostCheck" : true,
|
||||
"proxy" : "https://mall.meituan.com"
|
||||
},
|
||||
"router" : {
|
||||
"mode" : "history",
|
||||
"base" : "./"
|
||||
},
|
||||
"sdkConfigs" : {
|
||||
"maps" : {
|
||||
"qqmap" : {
|
||||
"key" : "BIUBZ-UWKW3-FK53E-YIPVT-R4KG5-3DBA3"
|
||||
}
|
||||
}
|
||||
},
|
||||
"title" : "jiahui-yang商城模板"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,365 @@
|
||||
{
|
||||
"pages": [{
|
||||
"path": "pages/views/tabBar/category",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页",
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
|
||||
"app-plus": {
|
||||
"titleNView": false,
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/login/login",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarTitleText": "登录",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/login/index1",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarTitleText": "登录",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
// {
|
||||
// "path" : "pages/views/tabBar/category",
|
||||
// "style" : {
|
||||
// "navigationBarTitleText" : "分类",
|
||||
// "app-plus" : {
|
||||
// "titleNView" : false,
|
||||
// "bounce":"none"
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
{
|
||||
"path": "pages/views/tabBar/cart",
|
||||
"style": {
|
||||
"navigationBarTitleText": "购物车",
|
||||
"app-plus": {
|
||||
"titleNView": false,
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/tabBar/user",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的",
|
||||
"navigationStyle": "custom",
|
||||
"onReachBottomDistance": 50,
|
||||
"app-plus": {
|
||||
"bounce": "none",
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/setting/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设置"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/home/classList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品列表",
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
"titleNView": false,
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/goods/goodsDetails",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "商品详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/goods/goodsEvaluate",
|
||||
"style": {
|
||||
"navigationBarTitleText": "所有评价",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/order/evaluate/evaluate",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品评价",
|
||||
"navigationBarBackgroundColor": "#F8F8F8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/order/confirmOrder",
|
||||
"style": {
|
||||
"navigationBarTitleText": "确认订单",
|
||||
"navigationBarBackgroundColor": "#F8F8F8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/order/success",
|
||||
"style": {
|
||||
"navigationBarTitleText": "支付结果",
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/user/mycoupon",
|
||||
"style": {
|
||||
"navigationBarTitleText": "优惠券",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/user/mycollection",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的收藏",
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
"titleNView": false,
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/user/myaddress",
|
||||
"style": {
|
||||
"navigationBarTitleText": "收货地址",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/user/address/edit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "编辑收货地址",
|
||||
"navigationBarBackgroundColor": "#F8F8F8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/user/mypoints",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的积分",
|
||||
"navigationBarTextStyle": "white",
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/user/exchange/exchange",
|
||||
"style": {
|
||||
"navigationBarTitleText": "兑换礼品",
|
||||
"navigationBarBackgroundColor": "#F8F8F8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/user/mydistribution",
|
||||
"style": {
|
||||
"navigationBarTitleText": "分销中心",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/order/orderList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的订单",
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
"titleNView": false,
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/order/orderDetails",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情",
|
||||
"navigationBarBackgroundColor": "#F8F8F8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/order/cancelOrder",
|
||||
"style": {
|
||||
"navigationBarTitleText": "申请退款",
|
||||
"navigationBarBackgroundColor": "#F8F8F8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/order/afterSaleList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "退换/售后",
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
"titleNView": false,
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/order/afterType",
|
||||
"style": {
|
||||
"navigationBarTitleText": "选择售后类型",
|
||||
"navigationBarBackgroundColor": "#F8F8F8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/order/afterSale",
|
||||
"style": {
|
||||
"navigationBarTitleText": "申请售后",
|
||||
"navigationBarBackgroundColor": "#F8F8F8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/order/location/location",
|
||||
"style": {
|
||||
"navigationBarTitleText": "编辑取件地址",
|
||||
"navigationBarBackgroundColor": "#F8F8F8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/order/afterSaleDetails",
|
||||
"style": {
|
||||
"navigationBarTitleText": "服务单详情",
|
||||
"navigationBarBackgroundColor": "#F8F8F8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/order/stepDetails",
|
||||
"style": {
|
||||
"navigationBarTitleText": "进度详情",
|
||||
"navigationBarBackgroundColor": "#F8F8F8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/withdrawal/withdrawal",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提现",
|
||||
"navigationBarBackgroundColor": "#F8F8F8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/withdrawal/withdrawalrecord",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提现明细",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/user/mysubordinate",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的下级",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/user/extension",
|
||||
"style": {
|
||||
"navigationBarTitleText": "推广海报",
|
||||
"navigationBarBackgroundColor": "#F8F8F8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/home/search",
|
||||
"style": {
|
||||
"navigationBarTitleText": "搜索",
|
||||
"navigationBarBackgroundColor": "#F8F8F8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/home/h5map",
|
||||
"style": {
|
||||
"navigationBarTitleText": "选择位置",
|
||||
"navigationBarBackgroundColor": "#F8F8F8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/views/user/allFootprint",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的足迹",
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
"titleNView": false,
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"style": "v2",
|
||||
"sitemapLocation": "sitemap.json",
|
||||
"tabBar": {
|
||||
"backgroundColor": "#ffffff",
|
||||
"borderStyle": "white",
|
||||
"selectedColor": "#3B7A86",
|
||||
"color": "#666666",
|
||||
"list": [
|
||||
// {
|
||||
// "pagePath" : "pages/views/tabBar/home",
|
||||
// "iconPath" : "/static/images/tabBar/home.png",
|
||||
// "selectedIconPath" : "/static/images/tabBar/tab-home-green.png",
|
||||
// "text" : "首页"
|
||||
// },
|
||||
{
|
||||
"pagePath": "pages/views/tabBar/category",
|
||||
"iconPath": "/static/images/tabBar/class.png",
|
||||
"selectedIconPath": "/static/images/tabBar/tab-cate-green.png",
|
||||
"text": "首页"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/views/tabBar/cart",
|
||||
"iconPath": "/static/images/tabBar/cart.png",
|
||||
"selectedIconPath": "/static/images/tabBar/tab-cart-green.png",
|
||||
"text": "购物车"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/views/tabBar/user",
|
||||
"iconPath": "/static/images/tabBar/user.png",
|
||||
"selectedIconPath": "/static/images/tabBar/tab-user-green.png",
|
||||
"text": "我的"
|
||||
}
|
||||
]
|
||||
},
|
||||
"permission": {
|
||||
"scope.userLocation": {
|
||||
"desc": "你的位置信息将用于小程序位置接口的效果展示"
|
||||
}
|
||||
},
|
||||
"globalStyle": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "Weixin",
|
||||
"navigationBarTextStyle": "black"
|
||||
},
|
||||
"subPackages": []
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<view class="flex flex-wrap justify-center m-3">
|
||||
<image :src="list[0].pic" class="w-100" style=" height: 150rpx;" mode=""></image>
|
||||
<view class="flex w-100 bg-100 padding-xs" :style="{backgroundImage:'url('+bgi+')'}" mode="aspectFill" style="height: 230rpx;justify-content: space-evenly; ">
|
||||
<view class="good_item h-100 bg-100 " style="width: 23%;" v-for="(item,index) in list[0].childrenResource" :key="index" :style="{backgroundImage:'url('+item.bgPic+')'}">
|
||||
<image :src="item.pic" style="width: 100%; height: 65%; border-radius: 15%;" mode="aspectFill"></image>
|
||||
<view class="text-white text-center">
|
||||
<view class="text-sm">{{item.title}}</view>
|
||||
<view class="text-xs">{{item.subTitle}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import indexBackgroundImage from "@/static/images/new/pingjia.gif"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgi:indexBackgroundImage,
|
||||
|
||||
list: [{
|
||||
"id": 12355,
|
||||
"pic": "https://p0.meituan.net/mallimages/22b17afae7865debcb8bb69606fc19ae147034.gif",
|
||||
"jumpTargetType": 16,
|
||||
"needClip": false,
|
||||
"name": "1.18-1.19-广州年货节",
|
||||
"contentType": 1,
|
||||
"styleMap": {},
|
||||
"bgPic": "https://p0.meituan.net/mallimages/68839887f09ca0843be0661ba84f4de111227.gif",
|
||||
"childrenResource": [{
|
||||
"id": 12356,
|
||||
"pic": "https://p0.meituan.net/mallimages/7b69114101c5dc35ada290c89e581ce5260727.jpg",
|
||||
"jumpTargetType": 16,
|
||||
"targetUrl": "imaicai://www.maicai.com/web?future=1&url=https%3A%2F%2Fi.meituan.com%2Fawp%2Fhfe%2Fblock%2Fc0f017575182d9def2af%2F103435%2Findex.html%3FpoiId%3D1865",
|
||||
"needClip": false,
|
||||
"name": "",
|
||||
"title": "1.89元秒杀",
|
||||
"subTitle": "御寒滋补",
|
||||
"contentType": 1,
|
||||
"styleMap": {},
|
||||
"bgPic": "https://p0.meituan.net/mallimages/fde33b41cd967b40c33cae3e3b488b9f4892.png"
|
||||
},
|
||||
{
|
||||
"id": 12357,
|
||||
"pic": "https://p0.meituan.net/mallimages/b8e703d16a7a1cb491d3374962c44d51571511.png",
|
||||
"jumpTargetType": 16,
|
||||
"targetUrl": "imaicai://www.maicai.com/web?future=1&url=https%3A%2F%2Fi.meituan.com%2Fawp%2Fhfe%2Fblock%2Ff564e719cb80c51429f3%2F103673%2Findex.html%3FpoiId%3D1865",
|
||||
"needClip": false,
|
||||
"name": "",
|
||||
"title": "低至3.99元",
|
||||
"subTitle": "甜蜜水果",
|
||||
"contentType": 1,
|
||||
"styleMap": {},
|
||||
"bgPic": "https://p0.meituan.net/mallimages/fde33b41cd967b40c33cae3e3b488b9f4892.png"
|
||||
},
|
||||
{
|
||||
"id": 12358,
|
||||
"pic": "https://p0.meituan.net/mallimages/8773dc1fb4eb103ea36b3b3c6f57689b169059.jpg",
|
||||
"jumpTargetType": 16,
|
||||
"targetUrl": "imaicai://www.maicai.com/web?future=1&url=https%3A%2F%2Fi.meituan.com%2Fawp%2Fhfe%2Fblock%2F21556a8f83f1b45fc05f%2F103579%2Findex.html%3FpoiId%3D1865",
|
||||
"needClip": false,
|
||||
"name": "",
|
||||
"title": "两件85折",
|
||||
"subTitle": "品牌坚果",
|
||||
"contentType": 1,
|
||||
"styleMap": {},
|
||||
"bgPic": "https://p0.meituan.net/mallimages/fde33b41cd967b40c33cae3e3b488b9f4892.png"
|
||||
},
|
||||
{
|
||||
"id": 12359,
|
||||
"pic": "https://p0.meituan.net/mallimages/39b735d7804efdcc6a32bd90cc6b925f668358.png",
|
||||
"jumpTargetType": 16,
|
||||
"targetUrl": "imaicai://www.maicai.com/web?future=1&url=https%3A%2F%2Fi.meituan.com%2Fawp%2Fhfe%2Fblock%2F5e005b672f5681df12e2%2F103679%2Findex.html%3FpoiId%3D1865",
|
||||
"needClip": false,
|
||||
"name": "",
|
||||
"title": "买2送1",
|
||||
"subTitle": "人气酒饮",
|
||||
"contentType": 1,
|
||||
"styleMap": {},
|
||||
"bgPic": "https://p0.meituan.net/mallimages/fde33b41cd967b40c33cae3e3b488b9f4892.png"
|
||||
}
|
||||
]
|
||||
}],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
|
||||
|
||||
},
|
||||
components: {},
|
||||
props: {},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<view class="chaozhi" :style="{'background-image':'url('+ list.bgi +')'}">
|
||||
<view style="height: 30%;" class="flex justify-between padding-top-xs align-center">
|
||||
<view class="flex padding-l" style="width:80%;line-height: 60rpx;">
|
||||
<image :src="list.logo" class="logo"></image>
|
||||
<image :src="list.title" class="title"></image>
|
||||
<view class="padding-left-xs text-orange text-xs">|</view>
|
||||
<!-- :circular="true" 设置无缝滚动 -->
|
||||
<swiper class="notice_swiper padding-left-xs" :circular="true" vertical easing-function="easeInOutCubic" autoplay interval="3000">
|
||||
<swiper-item v-for="(item,index) in list.noticeList" :key="index" class="sw_item">
|
||||
<text class="sw_text " style="font-weight: 900;">{{item.title}}</text>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<view class="radius chaozhi_button text-center margin-xs">
|
||||
<view style="border: 1px solid #FFEB8F;padding:2px;border-radius: 20px;">
|
||||
<text class=" border">去抢购</text> <text class="cuIcon-right text-orange"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<swiper class="chaozhi_list" @change="Swiper" :circular="true" vertical easing-function="easeInOutCubic" autoplay interval="3000">
|
||||
<swiper-item v-for="(item,index) in list.list_good" :key="index" class="grid col-4 ">
|
||||
|
||||
<view class="flex justify-center" v-for="(good_item,index) in item" :key="index">
|
||||
<image :src="good_item.img" class="h-100 padding-xs sw_img" style="position: relative; padding-bottom: 30rpx;" mode="aspectFill"></image>
|
||||
<view class="text-bold flex align-end" style=" position: absolute; bottom:0; margin-bottom: 10rpx;">
|
||||
<view class="bg-gradual-orange text-price flex" style="border-radius: 10rpx 10rpx 0 6rpx;padding:0rpx 4rpx 0rpx 2rpx;">
|
||||
<view class=" text-l" style="padding:2rpx 8rpx;" v-html="good_item.price" ></view>
|
||||
</view>
|
||||
|
||||
<view class="oldprice text-price "v-if="good_item.oldPrice!=''">
|
||||
{{good_item.oldPrice}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import indexBackgroundImage from "@/static/images/new/chaozhi_bgi.png"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list:{
|
||||
bgi:indexBackgroundImage,
|
||||
logo:'/static/images/new/chaozhi_logo.png',
|
||||
title:'/static/images/new/chaozhi_title.png',
|
||||
noticeList: [
|
||||
{title: '32324465人正在抢购'},
|
||||
{title: '宋**婷刚刚下单啦'},
|
||||
{title: '尚**际刚刚下单啦'},
|
||||
{title: '付**白刚刚下单啦'},
|
||||
{title: '海**海刚刚下单啦'}
|
||||
],
|
||||
sw_select:0,
|
||||
list_good:[
|
||||
{img:"https://p0.meituan.net/mallimages/2fd33f00df1266428c446ab0544f170b105276.jpg",price:"9.5",oldPrice:"",},
|
||||
{img:"https://p0.meituan.net/mallimages/2bf56ad37cd865c9b936de355ac703da291588.jpg",price:"2.5",oldPrice:"3.0",},
|
||||
{img:"https://p0.meituan.net/mallimages/9a4786e764d0f53318a42d0df8628e7f516056.png",price:"9.99",oldPrice:"12.0",},
|
||||
{img:"https://p0.meituan.net/mallimages/965103a1fe16a42ce9e9e525382490be247677.jpg",price:"7.9",oldPrice:"9.0",},
|
||||
|
||||
{img:"https://p0.meituan.net/mallimages/d4bfebff42d203e6ef8df97dc9c4c53e243115.jpg",price:"19.9",oldPrice:"23.5",},
|
||||
{img:"https://p0.meituan.net/mallimages/f724bb1033b0bf84ddda34a72af89468302986.jpg",price:"6.99",oldPrice:"",},
|
||||
{img:"https://p1.meituan.net/mallimages/f9d4e9fd6e59a028f95461fcac070926829853.png",price:"0.99",oldPrice:"1.5",},
|
||||
{img:"https://p0.meituan.net/mallimages/5c71f2f5a30ea1ba19e0261796abbb4760368.jpg",price:"0.99",oldPrice:"1.2",}
|
||||
|
||||
],
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
|
||||
|
||||
},
|
||||
components: {},
|
||||
props: {
|
||||
},
|
||||
mounted(){
|
||||
// 处理数组
|
||||
this.arrgood()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 处理超值商品数组
|
||||
arrgood(){
|
||||
for(var i=0;i< this.list.list_good.length;i++){
|
||||
var price = this.list.list_good[i].price
|
||||
|
||||
let splitPrice = price.split(".");
|
||||
//2.重新赋值
|
||||
this.list.list_good[i].price = `${splitPrice[0]}.<span style="font-size:12px;">${splitPrice[1]}</span>`;
|
||||
|
||||
}
|
||||
|
||||
|
||||
this.list.list_good = this.arrTrans(4,this.list.list_good);
|
||||
},
|
||||
|
||||
|
||||
|
||||
Swiper(e) {
|
||||
|
||||
this.sw_select = e.detail.current
|
||||
},
|
||||
|
||||
arrTrans(num, arr) { // 一维数组转换为二维数组
|
||||
const iconsArr = []; // 声明数组
|
||||
arr.forEach((item, index) => {
|
||||
const page = Math.floor(index / num); // 计算该元素为第几个素组内
|
||||
if (!iconsArr[page]) { // 判断是否存在
|
||||
iconsArr[page] = [];
|
||||
}
|
||||
iconsArr[page].push(item);
|
||||
});
|
||||
return iconsArr;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.chaozhi{
|
||||
width: 94%;
|
||||
height: 285upx;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 3%;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
}
|
||||
.logo{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
}
|
||||
.title{
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
.notice_swiper{
|
||||
width: 50%;
|
||||
height: 50upx;
|
||||
}
|
||||
.notice_swiper .sw_item{
|
||||
height: 80upx;
|
||||
}
|
||||
.notice_swiper .sw_item .sw_text{
|
||||
font-size: 24upx;
|
||||
color: #EE5D37;
|
||||
display: inline-block;
|
||||
}
|
||||
.notice_swiper .sw_image{
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
float: right;
|
||||
margin-top: 20upx;
|
||||
}
|
||||
.chaozhi_button{
|
||||
width: 17%;
|
||||
height: 50rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(155deg, #fffbeb 0%, #FFEB8F 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 20px;
|
||||
margin-right: 3%;
|
||||
font-size: 13px;
|
||||
color: #FF3B3B;
|
||||
}
|
||||
.chaozhi_list{
|
||||
height: 70%;
|
||||
background-color: #FFFFFF;
|
||||
margin: 10rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.sw_img{
|
||||
position: relative;
|
||||
}
|
||||
.text-price::before{padding-top: 10%;padding-left: 5%;margin-right:0;}
|
||||
.oldprice{
|
||||
background-color: #FFE26A;
|
||||
color: #9D4900;
|
||||
text-decoration: line-through;
|
||||
font-size: 12px;
|
||||
padding-right: 10rpx;
|
||||
border-radius: 0 10rpx 6rpx 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<view class="category-list">
|
||||
<view v-for="(item, index) in homepageCategoryList" :key="index" class="category" @tap="jumpList(item)">
|
||||
<view class="class_img"><image :class="item.jumpTargetType==16? 'mix':''" :src="item.iconUrl" class="imgs "></image></view>
|
||||
<view class="text" :style="item.jumpTargetType==16? 'font-size:11px':''" >{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
"homepageCategoryList": [
|
||||
{
|
||||
"iconUrl": "https://p0.meituan.net/mallimages/7725f825efb14c613a7ef53882bf2fc342550.png",
|
||||
"name": "蔬菜豆制品",
|
||||
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40488",
|
||||
"jumpTargetType": 3
|
||||
},
|
||||
{
|
||||
"iconUrl": "https://p0.meituan.net/mallimages/65a404f1fb66da5eae1b43adac8794da41080.png",
|
||||
"name": "肉禽蛋",
|
||||
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40581",
|
||||
"jumpTargetType": 3
|
||||
},
|
||||
{
|
||||
"iconUrl": "https://p0.meituan.net/mallimages/2a9d96c2b396d97e425d60e182a5a8da13882.png",
|
||||
"name": "海鲜水产",
|
||||
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40652",
|
||||
"jumpTargetType": 3,
|
||||
"bubble": {
|
||||
"id": 1011,
|
||||
"type": 1,
|
||||
"text": "抢波龙",
|
||||
"priority": 1,
|
||||
"utime": 1610624525256
|
||||
}
|
||||
},
|
||||
{
|
||||
"iconUrl": "https://p0.meituan.net/mallimages/8bf2a444e426d0205f1e7a50a034e2d234560.png",
|
||||
"name": "水果",
|
||||
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40532",
|
||||
"jumpTargetType": 3
|
||||
},
|
||||
{
|
||||
"iconUrl": "https://p0.meituan.net/mallimages/6a5bba31dd8720e66ac5c90399b647f430483.png",
|
||||
"name": "乳品烘焙",
|
||||
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40461",
|
||||
"jumpTargetType": 3
|
||||
},
|
||||
{
|
||||
"iconUrl": "https://p1.meituan.net/mallimages/752d4d5ed15ea9b418268dbbb58f730838543.png",
|
||||
"name": "速食冻品",
|
||||
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40478",
|
||||
"jumpTargetType": 3
|
||||
},
|
||||
{
|
||||
"iconUrl": "https://p0.meituan.net/mallimages/cc71321c6617da6b7b941763208a011332548.png",
|
||||
"name": "粮油调味",
|
||||
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40472",
|
||||
"jumpTargetType": 3
|
||||
},
|
||||
{
|
||||
"iconUrl": "https://p0.meituan.net/mallimages/ac948daefceb0c71735868d1accbe22031714.png",
|
||||
"name": "酒水饮料",
|
||||
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40455",
|
||||
"jumpTargetType": 3
|
||||
},
|
||||
{
|
||||
"iconUrl": "https://p0.meituan.net/mallimages/a59a09667218f46722803f78ef720e5910801.png",
|
||||
"name": "休闲零食",
|
||||
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40485",
|
||||
"jumpTargetType": 3
|
||||
},
|
||||
{
|
||||
"iconUrl": "https://p1.meituan.net/mallimages/4f6e7f3657a9741571ad809c021ad98b48763.png",
|
||||
"name": "餐饮熟食",
|
||||
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40916",
|
||||
"jumpTargetType": 3
|
||||
},
|
||||
{
|
||||
"iconUrl": "https://p0.meituan.net/mallimages/61c91165616fcecb6148f841b35c85c46003.png",
|
||||
"name": "年货大街",
|
||||
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=41755",
|
||||
"jumpTargetType": 16
|
||||
},
|
||||
{
|
||||
"iconUrl": "https://p0.meituan.net/mallimages/5d24618a6160c550ccfe13942ba620c36288.png",
|
||||
"name": "美团奶站",
|
||||
"jumpUrl": "imaicai://www.maicai.com/web?future=1&url=https%3A%2F%2Fi.meituan.com%2Fawp%2Fhfe%2Fblock%2Fe7b70154317467246531%2F93534%2Findex.html%3FpoiId%3D1865",
|
||||
"jumpTargetType": 16
|
||||
},
|
||||
{
|
||||
"iconUrl": "https://p1.meituan.net/mallimages/4799fc4c5ed9e7b06e3eb01d5f73ae0432224.png",
|
||||
"name": "打边炉",
|
||||
"jumpUrl": "imaicai://www.maicai.com/web?future=1&url=https%3A%2F%2Fi.meituan.com%2Fawp%2Fhfe%2Fblock%2F56eae497a65b9470558c%2F97032%2Findex.html%3FpoiId%3D1865",
|
||||
"jumpTargetType": 16
|
||||
},
|
||||
{
|
||||
"iconUrl": "https://p0.meituan.net/mallimages/adf27d98c79b4ee210381b85bdb0121228333.png",
|
||||
"name": "煲靓汤",
|
||||
"jumpUrl": "imaicai://www.maicai.com/web?future=1&url=https%3A%2F%2Fi.meituan.com%2Fawp%2Fhfe%2Fblock%2F121e7c13425aa76e8d97%2F97034%2Findex.html%3FpoiId%3D1865",
|
||||
"jumpTargetType": 16
|
||||
},
|
||||
{
|
||||
"iconUrl": "https://p0.meituan.net/mallimages/36d8e40e80ead870bce26f6a5311c4996010.png",
|
||||
"name": "家居个护",
|
||||
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40482",
|
||||
"jumpTargetType": 16
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
jumpList(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/views/home/classList?classId=' + item.id
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.category-list {
|
||||
width: 94%;
|
||||
margin: 0 3%;
|
||||
padding: 0 0 30upx 0;
|
||||
border-bottom: solid 2rpx #f6f6f6;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-shadow: 0upx 0upx 10rpx #d0d0d0;
|
||||
margin-top: 20upx;
|
||||
border-radius: 10upx;
|
||||
}
|
||||
.category {
|
||||
width: 20%;
|
||||
margin-top: 50upx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.category:active{
|
||||
opacity: 0.8;
|
||||
}
|
||||
.category .class_img {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.imgs {
|
||||
width: 12vw;
|
||||
height: 12vw;
|
||||
}
|
||||
}
|
||||
.mix{
|
||||
width: 9vw !important;
|
||||
height: 9vw !important;
|
||||
}
|
||||
.text {
|
||||
margin-top: 16upx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 24upx;
|
||||
color: #3c3c3c;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<view class="grid col-2 h-100 m-3 justify-between" style=" height: 500rpx;margin-top: 20rpx;box-shadow: 0px 0px 5px #d0d0d0;border-radius: 20rpx;">
|
||||
<view class="flex flex-wrap item" v-for="(item,index) in tileList" :key="index" style="flex-direction: row; justify-content: space-between;">
|
||||
<view class="w-100 text-lg">{{item.title}}</view>
|
||||
<view class="w-100 text-sm" v-if="item.subTitle" :style="{color:item.subTitleColor}">{{item.subTitle}}</view>
|
||||
<view class="grid col-2 w-100">
|
||||
<view class="w-100 " v-for="(good,index) in item.itemList" :key="index">
|
||||
<image style="height: 120rpx; " :src="good.picUrl" mode="aspectFit"></image>
|
||||
<view class="padding-left-xs">
|
||||
<text v-if="good.sellPrice" class="text-bold" style="color: #FF1929;">{{good.sellPrice.text}}</text>
|
||||
<text v-if="good.dashPrice" class="text-gray text-xs padding-left-xs" style="text-decoration: line-through;">{{good.dashPrice.text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tileList: [
|
||||
{
|
||||
"tileId": 0,
|
||||
"title": "秒杀",
|
||||
"jumpUrl": "imaicai://www.maicai.com/web?wkwebview=1&future=1&url=https%3A%2F%2Fmall.meituan.com%2Ffe%2Fc%2Factivity%2Fseckill.html",
|
||||
"appletJumpUrl": "",
|
||||
"subjectId": 0,
|
||||
"position": 3,
|
||||
"titleColor": "#121924",
|
||||
"subTitleColor": "#FF1929",
|
||||
"tagPic": "",
|
||||
"itemList": [
|
||||
{
|
||||
"skuId": 75121,
|
||||
"picUrl": "https://p1.meituan.net/mallimages/afc8635ad295f03c99d50945f35544e0158519.jpg",
|
||||
"tagType": 4,
|
||||
"sellPrice": {
|
||||
"text": "¥22.7"
|
||||
},
|
||||
"dashPrice": {
|
||||
"text": "¥25.9",
|
||||
"styleId": "dp"
|
||||
},
|
||||
"baseCategoryId": 57
|
||||
},
|
||||
{
|
||||
"skuId": 92874,
|
||||
"picUrl": "https://p0.meituan.net/mallimages/ce107e631de932c7a572f9bfd7fe296c240498.png",
|
||||
"tagType": 4,
|
||||
"sellPrice": {
|
||||
"text": "¥7.7"
|
||||
},
|
||||
"dashPrice": {
|
||||
"text": "¥11.8",
|
||||
"styleId": "dp"
|
||||
},
|
||||
"baseCategoryId": 23
|
||||
}
|
||||
],
|
||||
"tagType": 4,
|
||||
"seckillVO": {
|
||||
"timeInterval": 1610985599000,
|
||||
"seckillingType": 1
|
||||
},
|
||||
"jumpTargetType": 10
|
||||
},
|
||||
{
|
||||
"tileId": 1152,
|
||||
"title": "新品发现",
|
||||
"subTitle": "精选好货抢鲜购",
|
||||
"jumpUrl": "imaicai://www.maicai.com/web?wkwebview=1&url=https%3A%2F%2Fmall.meituan.com%2Ffe%2Fc%2Fseasonal-skus.html",
|
||||
"appletJumpUrl": "",
|
||||
"subjectId": 0,
|
||||
"position": 5,
|
||||
"titleColor": "#121924",
|
||||
"subTitleColor": "#CC6A00",
|
||||
"tagPic": "",
|
||||
"itemList": [{
|
||||
"skuId": 61006,
|
||||
"picUrl": "https://p0.meituan.net/mallimages/275b1af3fc453162b7e405ceb38c4806241570.jpg",
|
||||
"tagType": 1,
|
||||
"baseCategoryId": 311
|
||||
},
|
||||
{
|
||||
"skuId": 1949,
|
||||
"picUrl": "https://p1.meituan.net/waimaidpoipicmining/ea9cff3d5456a862eb23e03f9f704b1a102360.jpg",
|
||||
"tagType": 1,
|
||||
"baseCategoryId": 448
|
||||
}
|
||||
],
|
||||
"tagType": 1,
|
||||
"jumpTargetType": 27
|
||||
},
|
||||
{
|
||||
"tileId": 1156,
|
||||
"title": "品质肉蛋",
|
||||
"subTitle": "猪汤骨17.9元",
|
||||
"jumpUrl": "imaicai://www.maicai.com/web?future=1&url=https%3A%2F%2Fi.meituan.com%2Fawp%2Fhfe%2Fblock%2F8d3f7baded5060a2964b%2F103729%2Findex.html%3FpoiId%3D2423",
|
||||
"appletJumpUrl": "",
|
||||
"subjectId": 0,
|
||||
"position": 6,
|
||||
"titleColor": "#121924",
|
||||
"subTitleColor": "#158A50",
|
||||
"tagPic": "",
|
||||
"itemList": [{
|
||||
"skuId": 93724,
|
||||
"picUrl": "https://p1.meituan.net/mallimages/4c7592faa7245c9518779b2ed036ca6f959671.png",
|
||||
"tagType": 1,
|
||||
"baseCategoryId": 568
|
||||
},
|
||||
{
|
||||
"skuId": 84873,
|
||||
"picUrl": "https://p1.meituan.net/mallimages/c8dfdf4fb55a839b61f25640287e2bee277992.png",
|
||||
"tagType": 1,
|
||||
"baseCategoryId": 55
|
||||
}
|
||||
],
|
||||
"tagType": 1,
|
||||
"jumpTargetType": 16
|
||||
},
|
||||
{
|
||||
"tileId": 1155,
|
||||
"title": "大寒节气餐单",
|
||||
"subTitle": "应季而食必吃榜",
|
||||
"jumpUrl": "imaicai://www.maicai.com/web?future=1&url=https%3A%2F%2Fi.meituan.com%2Fawp%2Fhfe%2Fblock%2Fe9105f026a8f066445b0%2F103559%2Findex.html%3FpoiId%3D2423",
|
||||
"appletJumpUrl": "",
|
||||
"subjectId": 0,
|
||||
"position": 7,
|
||||
"titleColor": "#121924",
|
||||
"subTitleColor": "#FF1929",
|
||||
"tagPic": "",
|
||||
"itemList": [{
|
||||
"skuId": 74132,
|
||||
"picUrl": "https://p1.meituan.net/mallimages/d4ca8cb05b0f8bdce33c11a657c222d591452.jpg",
|
||||
"tagType": 1,
|
||||
"baseCategoryId": 36
|
||||
},
|
||||
{
|
||||
"skuId": 67612,
|
||||
"picUrl": "https://p0.meituan.net/mallimages/92ee6d6f97d72a79af056df53fcfcce5152802.jpg",
|
||||
"tagType": 1,
|
||||
"baseCategoryId": 39
|
||||
}
|
||||
],
|
||||
"tagType": 1,
|
||||
"jumpTargetType": 16
|
||||
}
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.item{
|
||||
position: relative;
|
||||
padding: 15rpx 15rpx;
|
||||
}
|
||||
.item:after{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
border-right: 1px solid rgba(0,0,0,.1);
|
||||
border-bottom: 1px solid rgba(0,0,0,.1);
|
||||
border-radius: inherit;
|
||||
content: " ";
|
||||
-webkit-transform: scale(.5);
|
||||
transform: scale(.5);
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<view class="goodList">
|
||||
|
||||
<view v-for="(item, index) in list" :key="index" class="goods">
|
||||
<view class="top" @tap="jumpDetails(item)">
|
||||
<image class="cover" lazy-load="true" :src="item.url" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="bottom padding-lr-sm" >
|
||||
<!-- <view v-if="item.goodsName" class="text-xs good_skuSubTitle" style="color: #009125;">
|
||||
{{item.goodsName}}
|
||||
</view> -->
|
||||
<view class="goods_name text-df">
|
||||
{{item.goodsName}}
|
||||
</view>
|
||||
<!-- <view v-if="item.goodsName" class="text-sm good_skuSubTitle padding-bottom-xs" style="color: #D5A94D;">
|
||||
{{item.goodsName}}
|
||||
</view> -->
|
||||
<view>
|
||||
<!-- <text class="tag1" v-if="item.skuItem.v2Tags&&item.skuItem.v2Tags[0].styleText&&item.skuItem.v2Tags[0].tagType==0">
|
||||
{{item.skuItem.v2Tags[0].styleText.text}}
|
||||
</text>
|
||||
<view class="" style="width: 82rpx; height: 30rpx;" v-else-if="item.skuItem.v2Tags&&item.skuItem.v2Tags[0].image&&item.skuItem.v2Tags[0].tagType==1">
|
||||
<image :src="item.skuItem.v2Tags[0].image.url" class="w-100 h-100" mode="aspectFit"></image>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="goumai margin-top-xs flex justify-between align-center">
|
||||
<view class="g_left price">
|
||||
<text v-if="item.price" class="text1 text-bold text-sm"> {{item.price}} </text>
|
||||
<text style="color: #222">/{{ item.unit}}</text>
|
||||
<!-- <text v-if="item.skuItem.dashPrice" class="text2 text-xs"> {{item.skuItem.dashPrice.text}}</text> -->
|
||||
|
||||
</view>
|
||||
<!-- <view class="g_right" @tap="addCart(item)">
|
||||
<image src="/static/images/new/jiagou.png" style=" width: 28px;height: 28px;" mode="aspectFill"></image>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view v-if="item.type==4" class="cboardVO padding-xs" :style="{backgroundImage:'url('+item.cboardVO.cboardBackGroundPic.url+')'}">
|
||||
<view class="padding-left-sm w-100" style="height: 20%;">
|
||||
<image :src="item.cboardVO.cboardNamePic.url" style="width: 75%;height:50%;" mode="aspectFit"></image>
|
||||
<view class="text-white text-sm" style="height: 40%;">{{item.cboardVO.cboardDesc.text}}</view>
|
||||
</view>
|
||||
<view class="bg-white w-100 flex flex-direction justify-around padding-sm " style="height: 80%;border-radius: 4%;" >
|
||||
<view class="flex" style="height: 30%;position: relative;" v-for="(good_item ,index) in item.cboardVO.cboardTabVO.skuItems">
|
||||
<view class="h-100" style="width: 50%;">
|
||||
<image :src="good_item.picUrl" style="width: 100%;" class="h-100" mode="aspectFit"></image>
|
||||
<image :src="'/static/images/new/tag'+index+'.png'" class="cboardVO_tag" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="h-100 flex flex-wrap flex-direction justify-center" style="width: 50%;">
|
||||
<view class="w-100 priceColor">{{good_item.sellPrice.text}}</view>
|
||||
<view class="w-100 text-gray text-sm padding-top-xs">日售{{good_item.dailySales}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
<view class="place">
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { setTabBarBadge } from '@/utils/util.js'
|
||||
import {getCart, setCart ,resetCart, getCartNumber,setGoodsData, setGoodsHistory, setCartDetails, setGoodsDetails,getToken} from '@/utils/auth.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
good_data:{
|
||||
number: 1,
|
||||
imgList:[],
|
||||
selectSku:{},
|
||||
sku: [{
|
||||
sku_id: 1,
|
||||
skuname: '规格',
|
||||
child: [{
|
||||
tagname: '测试规格1',
|
||||
id: 2011,
|
||||
imgs: '',
|
||||
money: ''
|
||||
},
|
||||
{
|
||||
tagname: '测试规格2',
|
||||
id: 2012,
|
||||
imgs: '',
|
||||
money: ''
|
||||
}
|
||||
]
|
||||
}],
|
||||
skuArr: [{
|
||||
goods_sku_arr: ['2011'],
|
||||
goods_sku_text: '醇黑巧克力【20枚】',
|
||||
img: 'http://img10.360buyimg.com/n1/jfs/t1/86401/35/12206/357766/5e43b59cE5a7aa4dd/0753be765166c195.jpg',
|
||||
money: '175.78',
|
||||
stock: 345
|
||||
},
|
||||
{
|
||||
goods_sku_arr: ['2012'],
|
||||
goods_sku_text: '草莓味【8枚】',
|
||||
img: 'http://img11.360buyimg.com/n1/jfs/t1/74434/3/6892/331750/5d512febE54e891c4/0096ad20c3c20d23.jpg',
|
||||
money: '35.90',
|
||||
stock: 255
|
||||
},
|
||||
]
|
||||
},
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
props:{
|
||||
|
||||
propsList:{
|
||||
type:Array
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// if(this.propsList){
|
||||
// this.list = this.propsList
|
||||
// }
|
||||
},
|
||||
watch: {
|
||||
propsList: function(newVal,oldVal){
|
||||
console.log('newVal', newVal)
|
||||
this.list = newVal; //newVal即是chartData
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jumpDetails(item) {
|
||||
|
||||
setGoodsHistory(item)
|
||||
setGoodsDetails(item)
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/pages/views/goods/goodsDetails?id=' + item.id
|
||||
});
|
||||
},
|
||||
addCart(e) {
|
||||
console.log(e)
|
||||
|
||||
// 此处应该判断是否登录 如果没登录 跳转到登录页
|
||||
if(!getToken()){
|
||||
uni.navigateTo({ //登录
|
||||
url:'/pages/login/index1'
|
||||
})
|
||||
return
|
||||
}
|
||||
setCartDetails(e.skuItem)
|
||||
|
||||
setGoodsDetails(e.skuItem)
|
||||
var data = this.good_data
|
||||
data.status= 0;
|
||||
data.img = e.skuItem.picUrl;
|
||||
data.title = e.skuItem.skuTitle.text;
|
||||
data.money = parseFloat(e.skuItem.sellPrice.text.substr(1));
|
||||
|
||||
data.imgList.push(e.skuItem.picUrl);
|
||||
data.imgList.push(e.skuItem.detailPagePic);
|
||||
data.xiaoliang = e.skuItem.skuId;
|
||||
data.goods_id = e.skuItem.skuId;
|
||||
|
||||
|
||||
|
||||
if(data.skuArr){
|
||||
let sku = data.skuArr
|
||||
|
||||
for(let i=0;i<sku.length;i++){
|
||||
sku[i].img = data.img
|
||||
sku[i].goods_sku_text = data.title+"测试规格"+i;
|
||||
sku[i].money = data.money
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
if(data.sku){
|
||||
let sku = data.sku[0].child
|
||||
|
||||
for(let i=0;i<sku.length;i++){
|
||||
sku[i].imgs = data.img
|
||||
sku[i].tagname = data.title+"测试规格"+i;
|
||||
sku[i].money = data.money
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
data.selectSku.goods_sku_text = data.skuArr[0].goods_sku_text
|
||||
data.selectSku.img = data.skuArr[0].img
|
||||
data.selectSku.money = data.skuArr[0].money
|
||||
|
||||
|
||||
let colCart = getCart();
|
||||
if(colCart.length){
|
||||
const hasItem = colCart.some(v => v.goods_id === data.goods_id)
|
||||
if (!hasItem) {
|
||||
colCart.push(data)
|
||||
} else {
|
||||
for(let y = 0;y < colCart.length; y++){
|
||||
const item = colCart[y]
|
||||
if (data.goods_id === item.goods_id) {
|
||||
item.number ++
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
colCart = [data]
|
||||
}
|
||||
resetCart(colCart)
|
||||
/**
|
||||
* 模拟获取购物车的数量 getCart
|
||||
*/
|
||||
// let cartNum = getCart()
|
||||
setTabBarBadge(colCart.length)
|
||||
|
||||
|
||||
// 存储商品数据
|
||||
uni.showToast({
|
||||
title: '加入购物车成功 !',
|
||||
icon: 'none'
|
||||
});
|
||||
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.good_skuSubTitle {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.goodList {
|
||||
padding: 20rpx;
|
||||
column-count: 2;
|
||||
/*分为两列 用于瀑布流*/
|
||||
column-gap: 20rpx;
|
||||
|
||||
background: #F8F8F8;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tag1 {
|
||||
font-size: 20rpx;
|
||||
border: 1px solid #FF5560;
|
||||
color: #FF5560;
|
||||
border-radius: 15%;
|
||||
padding: 0 4rpx;
|
||||
}
|
||||
.cboardVO{
|
||||
height: 65vw;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.cboardVO_tag{
|
||||
width: 50rpx;height: 50rpx;position: absolute;
|
||||
left: 0;top: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.loading {
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
font-size: 24upx;
|
||||
width: 100%;
|
||||
margin-bottom: 20upx;
|
||||
}
|
||||
|
||||
.goods {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
margin-bottom: 20upx;
|
||||
break-inside: avoid;
|
||||
/*用于瀑布流*/
|
||||
border-radius: 10upx;
|
||||
box-sizing: content-box;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.goods .top {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.top .cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top .tags {
|
||||
width: 65upx;
|
||||
height: 65upx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods_name {
|
||||
/* height: 66upx; */
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
font-weight: bold;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
|
||||
.bottom .price .text1 {
|
||||
font-size: 36upx;
|
||||
font-weight: bold;
|
||||
color: $mycolor;
|
||||
}
|
||||
|
||||
.bottom .price .text2 {
|
||||
font-size: 22upx;
|
||||
color: #a0a0a0;
|
||||
text-decoration: line-through;
|
||||
padding-left: 15upx;
|
||||
}
|
||||
|
||||
.g_left {
|
||||
font-size: 24upx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.g_left text {
|
||||
display: inline-block;
|
||||
height: 35upx;
|
||||
line-height: 35upx;
|
||||
border-radius: 10upx;
|
||||
color: $mycolor;
|
||||
}
|
||||
|
||||
.g_right {
|
||||
font-size: 28upx;
|
||||
color: $mycolor;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,419 @@
|
||||
<template>
|
||||
<view class="header">
|
||||
<!-- 头部 -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<div class="status-bar" :style="{height:statusBarHeight+'px'}"></div>
|
||||
<!-- #endif -->
|
||||
<view class="place">
|
||||
</view>
|
||||
<view style="position: absolute;top: 0;right: 3%;left: 3%;z-index: 99;">
|
||||
<view class="text-lg">
|
||||
<view class="left" @tap="nearAddress">
|
||||
<image src="/static/images/home/weizhi.png"></image>
|
||||
<view style="font-weight: 800;">{{'送至：'+city || '请选择位置'}} <text class="cuIcon-right" style="padding-left:10upx">
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right" v-if="weatherName && weatherName!==''">
|
||||
<image :src="todyWeather.img"></image>
|
||||
<text>{{ weatherName }} /{{ high }}℃</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 搜索 -->
|
||||
<search style="width: 100%;"></search>
|
||||
</view>
|
||||
|
||||
<!-- 轮播图 -->
|
||||
|
||||
<swiper class="screen-swiper square-dot" :indicator-dots="false" :circular="true" :autoplay="true" interval="5000"
|
||||
duration="500" @change="Swiper">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index">
|
||||
<image :src="item.img" mode="aspectFill"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="indicator">
|
||||
<view v-for="(item, index) in swiperList" :key="index" :class="currentSwiper == index ? 'on' : 'dots'"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import qqmapsdk from "../../../utils/qqmap-wx-jssdk.min";
|
||||
import search from "../public/search";
|
||||
import {
|
||||
hfKey,
|
||||
txMapKey
|
||||
} from '../../../utils/keys.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentSwiper: 0,
|
||||
|
||||
|
||||
|
||||
city: '北京',
|
||||
weatherData: [{
|
||||
type: '阴',
|
||||
img: "/static/images/weather/yin.png"
|
||||
}, {
|
||||
type: '晴',
|
||||
img: "/static/images/weather/qing.png"
|
||||
}, {
|
||||
type: '多云',
|
||||
img: "/static/images/weather/duoyun.png"
|
||||
}, {
|
||||
type: '雨',
|
||||
img: "/static/images/weather/xiaoyu.png"
|
||||
}, {
|
||||
type: '小雨',
|
||||
img: "/static/images/weather/xiaoyu.png"
|
||||
}, {
|
||||
type: '中雨',
|
||||
img: "/static/images/weather/xiaoyu.png"
|
||||
}, {
|
||||
type: '大雨',
|
||||
img: "/static/images/weather/dayu.png"
|
||||
}, {
|
||||
type: '暴雨',
|
||||
img: "/static/images/weather/leiyu.png"
|
||||
}, {
|
||||
type: '雷阵雨',
|
||||
img: "/static/images/weather/leiyu.png"
|
||||
}, {
|
||||
type: '雨夹雪',
|
||||
img: "/static/images/weather/xiaoxue.png"
|
||||
}, {
|
||||
type: '雪',
|
||||
img: "/static/images/weather/xue.png"
|
||||
}, {
|
||||
type: '小雪',
|
||||
img: "/static/images/weather/xue.png"
|
||||
}, {
|
||||
type: '中雪',
|
||||
img: "/static/images/weather/xiaoxue.png"
|
||||
}, {
|
||||
type: '大雪',
|
||||
img: "/static/images/weather/daxue.png"
|
||||
}],
|
||||
high: '',
|
||||
weatherName: '',
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
todyWeather: {},
|
||||
statusBarHeight: 20
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
search
|
||||
},
|
||||
props: {
|
||||
colors: {
|
||||
type: String
|
||||
},
|
||||
locations: {
|
||||
type: Object
|
||||
},
|
||||
swiperList: {
|
||||
type: Array
|
||||
},
|
||||
|
||||
},
|
||||
created() {
|
||||
console.log('key', hfKey, txMapKey)
|
||||
// #ifndef H5
|
||||
this.getUserPosition();
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
if (this.locations.latlng) {
|
||||
this.latitude = this.locations.latlng.lat || ''
|
||||
this.longitude = this.locations.latlng.lng || ''
|
||||
this.city = this.locations.poiname
|
||||
this.getWeather(this.latitude, this.longitude);
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
watch: {
|
||||
locations(value) {
|
||||
this.latitude = this.locations.latlng.lat || ''
|
||||
this.longitude = this.locations.latlng.lng || ''
|
||||
this.city = this.locations.poiname
|
||||
this.getWeather(this.latitude, this.longitude);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 轮播图
|
||||
Swiper(e) {
|
||||
// console.log(e)
|
||||
this.currentSwiper = e.detail.current
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
getUserPosition() {
|
||||
/**
|
||||
* 在这里执行获取用户的位置
|
||||
*/
|
||||
//获取用户位置
|
||||
let that = this;
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
geocode: true,
|
||||
success: res => {
|
||||
console.log('获取经纬度成功', res);
|
||||
that.setData({
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
that.setData({
|
||||
latitude: '',
|
||||
longitude: ''
|
||||
});
|
||||
},
|
||||
complete: () => {
|
||||
// 解析地址
|
||||
that.getCity();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getCity() {
|
||||
const QQMapWX = new qqmapsdk({
|
||||
//腾讯地图 需要用户自己去申请key
|
||||
key: txMapKey
|
||||
});
|
||||
let that = this;
|
||||
QQMapWX.reverseGeocoder({
|
||||
location: {
|
||||
latitude: that.latitude,
|
||||
longitude: that.longitude
|
||||
},
|
||||
success: function(res) {
|
||||
console.log('解析地址成功', res);
|
||||
let province = res.result.ad_info.province; // 市
|
||||
|
||||
let city = res.result.address;
|
||||
that.setData({
|
||||
city: city
|
||||
});
|
||||
let position = {};
|
||||
position.lat = that.latitude;
|
||||
position.lng = that.longitude;
|
||||
position.name = city;
|
||||
that.getWeather(that.latitude, that.longitude);
|
||||
},
|
||||
fail: function(res) {
|
||||
console.log(res);
|
||||
},
|
||||
complete: function(res) {
|
||||
console.log(res);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getWeather(la, lo) { //获取天气信息
|
||||
let url = 'https://free-api.heweather.net/s6/weather/now?key=' + hfKey + '&location=' + lo + ',' + la;
|
||||
uni.request({
|
||||
url: url,
|
||||
method: 'GET',
|
||||
success: res => {
|
||||
console.log(res);
|
||||
let today = res.data.HeWeather6[0].now; //获取到今天的天气
|
||||
let h = today.fl;
|
||||
this.setData({
|
||||
high: h,
|
||||
//高温
|
||||
weatherName: today.cond_txt
|
||||
});
|
||||
this.weatherData.forEach(e => {
|
||||
if (e.type == today.cond_txt) {
|
||||
this.setData({
|
||||
todyWeather: e
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (this.todyWeather.type == '' || !this.todyWeather.type) {
|
||||
let data = this.weatherData[0];
|
||||
this.setData({
|
||||
todyWeather: data
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
nearAddress() { //设置位置信息
|
||||
// #ifdef MP
|
||||
const _this = this; // 处理拒绝再次打开调用设置
|
||||
uni.getSetting({
|
||||
success(res) {
|
||||
if (res && res.authSetting && res.authSetting.hasOwnProperty('scope.userLocation')) {
|
||||
uni.openSetting({
|
||||
success() {
|
||||
_this.getUserPosition();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
uni.navigateTo({
|
||||
url: '/pages/views/home/h5map'
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
swiperChange(e) {
|
||||
this.setData({
|
||||
currentSwiper: e.detail.current,
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.header {
|
||||
line-height: 80upx;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.place {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .3), rgba(255, 255, 255, .5), #ffffff);
|
||||
}
|
||||
|
||||
.left {
|
||||
color: #333;
|
||||
float: left;
|
||||
height: 80upx;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
z-index: 800;
|
||||
}
|
||||
|
||||
.left image {
|
||||
width: 30upx;
|
||||
height: 30upx;
|
||||
float: left;
|
||||
margin-right: 6upx;
|
||||
}
|
||||
|
||||
.left view {
|
||||
width: 60vw;
|
||||
height: 40upx;
|
||||
line-height: 40upx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.right {
|
||||
height: 80upx;
|
||||
float: right;
|
||||
font-size: 26upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right image {
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
}
|
||||
|
||||
.right text {
|
||||
margin-left: 10upx;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
margin-top: 10upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
width: 100%;
|
||||
height: 45vw;
|
||||
overflow: hidden;
|
||||
/* border-radius: 15upx; */
|
||||
/* box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2); */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.swiper-box swiper {
|
||||
width: 100%;
|
||||
height: 45vw;
|
||||
}
|
||||
|
||||
.swiper-box swiper swiper-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.swiper-box swiper swiper-item image {
|
||||
width: 95%;
|
||||
height: 45vw;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
border-radius: 10px;
|
||||
transition: height .3s;
|
||||
}
|
||||
|
||||
.swiper-item-side {
|
||||
width: 95%;
|
||||
height: 40vw !important;
|
||||
transition: height .3s;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
bottom: 20upx;
|
||||
left: 20upx;
|
||||
right: 20upx;
|
||||
// background-color: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 3upx;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dots {
|
||||
width: 12upx;
|
||||
height: 12upx;
|
||||
border-radius: 100%;
|
||||
margin: 0 10upx;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.on {
|
||||
width: 30upx;
|
||||
height: 12upx;
|
||||
border-radius: 20upx;
|
||||
margin: 0 10upx;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,503 @@
|
||||
<template>
|
||||
<view style="background: #F8F8F8;overflow: hidden;">
|
||||
<!-- 宫格类样式 -->
|
||||
<view class="recommend_goods" v-if="modes == true">
|
||||
<view v-for="(item, index) in newList" :key="index" class="goods">
|
||||
<view class="top" @tap="jumpDetails(item)" >
|
||||
<image class="cover" lazy-load="true" :src="item.img" mode="scaleToFill"></image>
|
||||
<image class="tags" lazy-load="true" v-if="item.baoyou" :src="tagImg[0]"></image>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="goods_name" @tap="jumpDetails(item)">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="price">
|
||||
<text class="text1">￥ {{item.money}}</text>
|
||||
<text class="text2">￥ {{item.hmoney}}</text>
|
||||
</view>
|
||||
<view class="goumai">
|
||||
<view class="g_left">
|
||||
<text v-if="item.youhui == true" >优惠券</text>
|
||||
<text v-if="item.baoyou == true" >包邮</text>
|
||||
</view>
|
||||
<view class="g_right" @tap="addCart(item)">
|
||||
<text class="iconfont icon-gouwuche"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="place">
|
||||
</view>
|
||||
</view>
|
||||
<!-- 列表类样式 -->
|
||||
<view class="list_mode" v-if="modes == false">
|
||||
<view class="goods_list" v-if="newList.length !== 0">
|
||||
<view v-for="(item, index) in newList" :key="index" class="goods_item">
|
||||
<image :src="item.img" lazy-load="true" @tap="jumpDetails(item)"></image>
|
||||
<!-- 商品标签 -->
|
||||
<image class="tags" :src="tagImg[item.type-1]"></image>
|
||||
<view class="goods_right">
|
||||
<view class="goods_name" @tap="jumpDetails(item)">{{item.title}}</view>
|
||||
<view class="numbers">
|
||||
<text v-if="item.youhui == true" >优惠券</text>
|
||||
<text v-if="item.baoyou == true" >包邮</text>
|
||||
</view>
|
||||
<view class="price">
|
||||
<text class="money">￥{{item.money}}</text>
|
||||
<text class="hx_money">￥{{item.hmoney}}</text>
|
||||
<text class="iconfont icon-gouwuche gouwuche" @tap="addCart(item)"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<nodata :colors="colors" title="暂无分类商品" v-if="newList.length == 0"></nodata>
|
||||
<view class="loading" v-if="loading == true">加载中...</view>
|
||||
<view class="loading" v-if="loading == false">—— 到底啦 ——</view>
|
||||
<!-- 选择规格 -->
|
||||
<sku :skuList="nowList" :showModal="showModal" :colors="colors" @onhide="onhide" :bottoms="bottoms"></sku>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
import {setCart, getCart} from '@/utils/auth.js'
|
||||
import sku from '../public/sku.vue'
|
||||
export default {
|
||||
components:{
|
||||
sku
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showModal: false,
|
||||
nowList: {},
|
||||
newList: [],
|
||||
sku: "",
|
||||
tagImg:[
|
||||
'/static/images/home/five.png',
|
||||
],
|
||||
};
|
||||
},
|
||||
props: {
|
||||
colors: {
|
||||
type: String
|
||||
},
|
||||
dataList: {
|
||||
type: Array
|
||||
},
|
||||
modes: {
|
||||
//控制显示宫格类样式或者列表类样式
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
loading:{
|
||||
type:Boolean,
|
||||
default: true
|
||||
},
|
||||
bottoms:{
|
||||
type:String,
|
||||
default: '0'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.setDataList(this.dataList)
|
||||
},
|
||||
watch:{
|
||||
dataList(value){
|
||||
this.setDataList(value)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setDataList(newVal){
|
||||
const newList = [].concat(...Array.from(newVal.reduce((total, cur, index) => { //瀑布流处理
|
||||
total[index % 2].push(cur);
|
||||
return total;
|
||||
}, {
|
||||
0: [],
|
||||
1: [],
|
||||
length: 2
|
||||
})));
|
||||
this.setData({
|
||||
newList: newList
|
||||
});
|
||||
},
|
||||
onhide(){
|
||||
this.showModal = false
|
||||
},
|
||||
addCart(item) {
|
||||
//加入购物车弹出对话框
|
||||
console.log('点击了',item)
|
||||
this.showModal = true
|
||||
this.nowList = item
|
||||
},
|
||||
jumpDetails(e) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/views/goods/goodsDetails'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
.recommend_goods {
|
||||
padding: 20upx;
|
||||
column-count: 2; /*分为两列 用于瀑布流*/
|
||||
column-gap: 20upx;
|
||||
}
|
||||
.loading{
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
font-size: 24upx;
|
||||
width: 100%;
|
||||
margin-bottom: 20upx;
|
||||
}
|
||||
.goods {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
margin-bottom: 20upx;
|
||||
break-inside: avoid; /*用于瀑布流*/
|
||||
border-radius: 10upx;
|
||||
box-sizing: content-box;
|
||||
&:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.goods .top {
|
||||
height: 45vw;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.top .cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top .tags {
|
||||
width: 65upx;
|
||||
height: 65upx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
padding: 15upx;
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods_name {
|
||||
/* height: 66upx; */
|
||||
font-size: 24upx;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
font-weight: bold;
|
||||
}
|
||||
.bottom .price{
|
||||
margin-top: 15upx;
|
||||
}
|
||||
.bottom .price .text1{
|
||||
font-size: 32upx;
|
||||
font-weight: bold;
|
||||
color: $mycolor;
|
||||
}
|
||||
.bottom .price .text2{
|
||||
font-size: 22upx;
|
||||
color: #a0a0a0;
|
||||
text-decoration: line-through;
|
||||
padding-left: 15upx;
|
||||
}
|
||||
.goumai{
|
||||
margin-top: 10upx;
|
||||
}
|
||||
.g_left{
|
||||
font-size: 24upx;
|
||||
float: left;
|
||||
align-items: center;
|
||||
}
|
||||
.g_left text{
|
||||
display: inline-block;
|
||||
height: 35upx;
|
||||
line-height: 35upx;
|
||||
padding: 0 10upx;
|
||||
background-color: #FAEFF7;
|
||||
border-radius: 10upx;
|
||||
margin-right: 20upx;
|
||||
color: $mycolor;
|
||||
}
|
||||
.g_right{
|
||||
float: right;
|
||||
font-size: 28upx;
|
||||
color: $mycolor;
|
||||
}
|
||||
.mask{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #000;
|
||||
z-index: 900;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.sku{
|
||||
width: 100vw;
|
||||
min-height: 30vh;
|
||||
position: fixed;
|
||||
bottom: -100%;
|
||||
z-index: 910;
|
||||
left: 0;
|
||||
background-color: #ffffff;
|
||||
padding: 20upx 4%;
|
||||
border-top-left-radius: 10upx;
|
||||
border-top-right-radius: 10upx;
|
||||
border-bottom: 1upx solid #eee;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.shows{
|
||||
/* #ifdef MP */
|
||||
bottom: 0!important;
|
||||
/* #endif */
|
||||
/* #ifdef H5 */
|
||||
bottom: 100upx!important;
|
||||
/* #endif */
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.sku_top{
|
||||
overflow: hidden;
|
||||
}
|
||||
.sku_top image{
|
||||
height: 170upx;
|
||||
width: 170upx;
|
||||
float: left;
|
||||
margin-right: 15upx;
|
||||
border-radius: 8upx;
|
||||
}
|
||||
.sku_top .sku_title{
|
||||
font-size: 24upx;
|
||||
line-height: 35upx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
font-weight: bold;
|
||||
}
|
||||
.sku_top .moneys{
|
||||
font-size: 28upx;
|
||||
line-height: 40upx;
|
||||
overflow: hidden;
|
||||
margin-top: 20upx;
|
||||
}
|
||||
.sku_top .kucun{
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sku_list{
|
||||
margin-top: 20upx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 40upx;
|
||||
}
|
||||
.sku_name{
|
||||
font-size: 24upx;
|
||||
color: #666;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sku_tag{
|
||||
overflow: hidden;
|
||||
margin-top: 20upx;
|
||||
}
|
||||
.sku_tag .tag_s{
|
||||
height: 50upx;
|
||||
line-height: 50upx;
|
||||
padding: 0 20upx;
|
||||
text-align: center;
|
||||
font-size: 22upx;
|
||||
color: #333;
|
||||
background-color: #F5F5F5;
|
||||
border: 1upx solid rgba(0, 0, 0, .05);
|
||||
float: left;
|
||||
border-radius: 30upx;
|
||||
margin-right: 20upx;
|
||||
transition: all 0.2s;
|
||||
margin-bottom: 20upx;
|
||||
}
|
||||
.number{
|
||||
margin-top: 10upx;
|
||||
border-top: 1upx solid #ccc;
|
||||
width: 100%;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
padding-top: 10upx;
|
||||
}
|
||||
.number .n_left{
|
||||
float: left;
|
||||
font-size: 28upx;
|
||||
color: #333;
|
||||
}
|
||||
.number .n_right{
|
||||
float: right;
|
||||
height: 60upx;
|
||||
width: 200upx;
|
||||
background-color: #F5F5F5;
|
||||
margin-top: 10upx;
|
||||
border-radius: 5upx;
|
||||
}
|
||||
.n_right .jian,.jia{
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
text-align: center;
|
||||
line-height: 60upx;
|
||||
font-size: 42upx;
|
||||
}
|
||||
.jian{
|
||||
float: left;
|
||||
}
|
||||
.jia{
|
||||
float: right;
|
||||
}
|
||||
.jian:active{
|
||||
background-color: #eee;
|
||||
}
|
||||
.jia:active{
|
||||
background-color: #eee;
|
||||
}
|
||||
.n_right input{
|
||||
width: 76upx;
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin-top: 6upx;
|
||||
}
|
||||
.btn_box{
|
||||
margin-top: 40upx;
|
||||
}
|
||||
.btn_box .addcart_btn, .submit{
|
||||
width: 40vw;
|
||||
height: 56upx;
|
||||
line-height: 56upx;
|
||||
border-radius: 42upx;
|
||||
font-size: 24upx;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
float: left;
|
||||
margin-left: 30upx;
|
||||
margin-bottom: 30upx;
|
||||
}
|
||||
.btn_box view:active{
|
||||
opacity: 0.8;
|
||||
}
|
||||
/* 列表类样式 */
|
||||
.list_mode{
|
||||
padding: 20upx 4% 0upx;
|
||||
z-index: 10;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.goods_list {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods_list .goods_item {
|
||||
align-items: center;
|
||||
border-bottom: 1upx solid #eee;
|
||||
padding-bottom: 10upx;
|
||||
margin-bottom: 15upx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
&:last-of-type{
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.goods_item image {
|
||||
width: 200upx;
|
||||
height: 200upx;
|
||||
float: left;
|
||||
border-radius: 10upx;
|
||||
margin-right: 5upx;
|
||||
}
|
||||
.goods_item .tags{
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.goods_right {
|
||||
/* float: left; */
|
||||
padding: 0 10upx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods_right .goods_name {
|
||||
font-size: 28upx;
|
||||
overflow: hidden;
|
||||
font-weight: bold;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
color: #333;
|
||||
min-height: 50upx;
|
||||
}
|
||||
.goods_right .numbers{
|
||||
font-size: 20upx;
|
||||
line-height: 30upx;
|
||||
overflow: hidden;
|
||||
margin-top: 30upx;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
}
|
||||
.goods_right .numbers text{
|
||||
display: inline-block;
|
||||
height: 35upx;
|
||||
line-height: 35upx;
|
||||
padding: 0 10upx;
|
||||
background-color: #FAEFF7;
|
||||
border-radius: 10upx;
|
||||
margin-right: 20upx;
|
||||
color: $mycolor;
|
||||
}
|
||||
.goods_right .price{
|
||||
line-height: 40upx;
|
||||
font-size: 24upx;
|
||||
overflow: hidden;
|
||||
margin-top: 20upx;
|
||||
}
|
||||
.price .money{
|
||||
margin-right: 20upx;
|
||||
font-size: 32upx;
|
||||
font-weight: bold;
|
||||
color: $mycolor;
|
||||
}
|
||||
.hx_money{
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
font-size: 22upx;
|
||||
}
|
||||
.gouwuche{
|
||||
font-size: 32upx;
|
||||
float: right;
|
||||
margin-right: 20upx;
|
||||
color: $mycolor;
|
||||
}
|
||||
.nodata{
|
||||
color: #999;
|
||||
text-align: center;
|
||||
font-size: 24upx;
|
||||
margin-top: 20upx;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<view class="set_time">
|
||||
<uni-popup ref="popup" type="bottom" @change="onhide">
|
||||
<view class="popup_box">
|
||||
<image class="close" @click="closePopup" src="/static/images/search/close.png" mode=""></image>
|
||||
<view class="box">
|
||||
<view class="left">
|
||||
<p :class="[timeCurrent == index?'timeCurrent':'']" v-for="(item,index) in dateList" :key="index" @click="setTimeCurrent(item,index)">{{item.month}}月{{item.day}}日(<text v-if="index == 0">今天</text><text v-else>星期{{item.week}}</text>)</p>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="a_p_m" v-for="(item,index) in nowList" :key="index">
|
||||
<p>{{item.name}}</p>
|
||||
<view :class="['tag',tagCurrent == index ?'tag_active':'']" @click="setTagCurrent(item,index)">
|
||||
{{item.time}}
|
||||
</view>
|
||||
</view>
|
||||
<view style="font-size: 24upx;color: #999;line-height: 60upx;" v-if="nowList.length == 0">
|
||||
请您预定明天~
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue'
|
||||
export default{
|
||||
name:'set-time',
|
||||
data(){
|
||||
return{
|
||||
dateList:[],
|
||||
ApmList:[
|
||||
{name:'上午',time:'09:00-15:00',status: 0},
|
||||
{name:'下午',time:'15:00-21:00',status: 1},
|
||||
],
|
||||
nowList:[],
|
||||
timeCurrent: 0,
|
||||
tagCurrent: 0,
|
||||
nowTime:'',
|
||||
day:'' ,//日期数据
|
||||
}
|
||||
},
|
||||
props:{
|
||||
shows:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
components:{
|
||||
uniPopup
|
||||
},
|
||||
watch:{
|
||||
shows(value){
|
||||
console.log(value)
|
||||
value == true&&this.$refs.popup.open()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getNowDate()
|
||||
this.setTimeCurrent(this.dateList[0],0) //默认传递给父元素第一项
|
||||
},
|
||||
methods:{
|
||||
closePopup(){
|
||||
this.$refs.popup.close()
|
||||
this.$emit('onClose')
|
||||
},
|
||||
onhide(e){ //弹出收回触发事件
|
||||
if(e.show == false){
|
||||
this.$emit('onClose')
|
||||
}
|
||||
},
|
||||
setTimeCurrent(item,index){
|
||||
this.nowList = []
|
||||
var dd = new Date();
|
||||
// 获取当前的时间
|
||||
let nowTime = dd.getHours()
|
||||
// 根据当前时间算出是否可选上午和下午
|
||||
this.timeCurrent = index
|
||||
if(index == 0){
|
||||
this.setNowTime(nowTime)
|
||||
}else{
|
||||
this.nowList = this.ApmList
|
||||
}
|
||||
let week = index == 0 ?'今天':'星期'+item.week
|
||||
this.day = item.month+'月'+item.day+'日'+week
|
||||
let time = ''
|
||||
if(this.nowList.length == 0){ //必须判断当前时间段是否还在设置的时间区间内 如果不在了就设置为第二天
|
||||
let items = this.dateList[index+1]
|
||||
let weeks = index+1 == 0 ?'今天':'星期'+items.week
|
||||
time = items.month+'月'+items.day+'日'+ weeks + this.ApmList[0].time //取默认值
|
||||
console.log('执行了')
|
||||
/**
|
||||
* 过了当天的设定的时间点之后 就不允许再点击了
|
||||
*/
|
||||
this.timeCurrent = 1
|
||||
this.nowList = this.ApmList
|
||||
}else{
|
||||
time = this.day+' '+ this.nowList[0].time
|
||||
}
|
||||
this.$emit('onComplete',time) //把选中的项返回给父元素
|
||||
},
|
||||
setTagCurrent(item,index){
|
||||
this.tagCurrent = index
|
||||
let time = this.day+' '+item.time
|
||||
this.$emit('onComplete',time)
|
||||
this.$emit('onClose')
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
getNowDate(){ //获取当前日期和未来七天
|
||||
var dd = new Date();
|
||||
// 获取当前的时间
|
||||
let nowTime = dd.getHours()
|
||||
// 根据当前时间算出是否可选上午和下午
|
||||
this.setNowTime(nowTime)
|
||||
var arr=[];
|
||||
for(var i=0;i<7;i++){
|
||||
let m = dd.getMonth()+1
|
||||
let month = m < 10 ? '0' + m: m;
|
||||
let d = dd.getDate()
|
||||
let day = d < 10 ? '0' + d: d;
|
||||
let week = dd.getDay()
|
||||
let time = {}
|
||||
time.day = day
|
||||
time.month = month
|
||||
time.week = this.setWeek(week)
|
||||
arr.push(time)
|
||||
dd.setDate(dd.getDate()+1);
|
||||
}
|
||||
this.dateList = arr
|
||||
},
|
||||
setNowTime(value){
|
||||
if(value <= 12){ //在中午十二点之前 还可以选择9-15
|
||||
this.nowList = this.ApmList
|
||||
}else if(value <= 17){ //在下午十六点之前 还可以选择15-21
|
||||
this.nowList.push(this.ApmList[1])
|
||||
}else{
|
||||
this.nowList = []
|
||||
}
|
||||
},
|
||||
setWeek(value){
|
||||
switch (value){
|
||||
case 0:
|
||||
return '日';
|
||||
break;
|
||||
case 1:
|
||||
return '一';
|
||||
break;
|
||||
case 2:
|
||||
return '二';
|
||||
break;
|
||||
case 3:
|
||||
return '三';
|
||||
break;
|
||||
case 4:
|
||||
return '四';
|
||||
break;
|
||||
case 5:
|
||||
return '五';
|
||||
break;
|
||||
case 6:
|
||||
return '六';
|
||||
break;
|
||||
default:
|
||||
return '一'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.popup_box{
|
||||
// height: 50vh;
|
||||
width: 100vw;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20upx 20upx 0 0;
|
||||
position: relative;
|
||||
.close{
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
position: absolute;
|
||||
top: 20upx;
|
||||
right: 20upx;
|
||||
background-color: #DDDDDD;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.box{
|
||||
display: flex;
|
||||
padding: 20upx 0;
|
||||
.left{
|
||||
overflow: hidden;
|
||||
margin-top: 70upx;
|
||||
padding-bottom: 30upx;
|
||||
width: 260upx;
|
||||
height: calc(55vh - 70upx);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #F8F8F8;
|
||||
p{
|
||||
padding: 0 20upx;
|
||||
min-width: 100%;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
font-size: 26upx;
|
||||
color: #8D8D8D;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.timeCurrent{
|
||||
background-color: #FFFFFF;
|
||||
color: #202020;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
margin-top: 70upx;
|
||||
margin-left: 10upx;
|
||||
.a_p_m{
|
||||
margin-bottom: 20upx;
|
||||
p{
|
||||
font-size: 26upx;
|
||||
color: #8D8D8D;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.tag{
|
||||
height: 80upx;
|
||||
line-height: 70upx;
|
||||
padding: 5upx 20upx;
|
||||
color: #000000;
|
||||
border-radius: 8upx;
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
.tag_active{
|
||||
background-color: #FDF3F2;
|
||||
color: #F40603;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<view class="loading">
|
||||
<view class="bg-white">
|
||||
<image src="https://image.weilanwl.com/gif/loading-white.gif" mode="aspectFit" class="gif-white response"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
components: {},
|
||||
props: {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.loading{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
background-color: #fff;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.bg-white{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.bg-white image{
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<view class="nav_abr" :style="{background:bgColor}">
|
||||
<view class="status_bar" :style="'height: '+ statusBarHeight"></view>
|
||||
<view class="toBar" :style="'height:'+toBarHeight">
|
||||
<block v-if="showLeft == true">
|
||||
<image src="/static/images/home/lefts.png" v-if="leftBg == true" class="left_img" @tap="toback"></image>
|
||||
<text class="iconfont icon-fanhui left_icon" @tap="toback" v-if="leftBg == false" style="color: #202020;"></text>
|
||||
</block>
|
||||
<!-- #ifndef H5 -->
|
||||
<text class="title" :style="'color:' + textcolor" v-if="showTitle == true">{{navTitle}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<text class="title bolds" :style="'color:' + textcolor" v-if="showTitle == true">{{navTitle}}</text>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: app.globalData.statusHeight + 'px',
|
||||
toBarHeight: app.globalData.toBar + 'px'
|
||||
};
|
||||
},
|
||||
|
||||
components: {},
|
||||
props: {
|
||||
textcolor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
bgColor:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
showTitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showLeft: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
navTitle: {
|
||||
type: String,
|
||||
default: '登录'
|
||||
},
|
||||
leftBg:{
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toback() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.status_bar{
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
.toBar{
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.left_icon{
|
||||
font-size: 32upx;
|
||||
position: absolute;
|
||||
left: 20upx;
|
||||
font-weight: 500;
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
line-height: 50upx;
|
||||
}
|
||||
.toBar .title{
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 30upx;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.left_img{
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
position: absolute;
|
||||
padding: 10upx;
|
||||
left: 20upx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 100;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.bolds{
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<view class="nodata">
|
||||
<text class="iconfont icon-zanwushuju" :style="'color:' + colors"></text>
|
||||
<view class="texts">
|
||||
{{title}}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
components: {},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '暂无数据'
|
||||
},
|
||||
colors: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.nodata{
|
||||
width: 100vw;
|
||||
height: 50vw;
|
||||
}
|
||||
.nodata .iconfont{
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 160upx;
|
||||
color: pink;
|
||||
width: 100%;
|
||||
margin-top: 100upx;
|
||||
}
|
||||
.texts{
|
||||
margin-top: 20upx;
|
||||
height: 40upx;
|
||||
line-height: 40upx;
|
||||
text-align: center;
|
||||
color: #9c9c9c;
|
||||
font-size: 24upx;
|
||||
letter-spacing: 5upx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view class="search">
|
||||
<view class="input-box" @tap="jumpSearch">
|
||||
<input placeholder="搜索关键词" class="inputs" disabled placeholder-style="color:#c0c0c0;font-size:24upx;"></input>
|
||||
<view class="icon search">
|
||||
<image src="/static/images/home/search.png" class="search_img"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
components: {},
|
||||
props: {},
|
||||
methods: {
|
||||
jumpSearch() {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '功能开发中，敬请期待'
|
||||
})
|
||||
return
|
||||
uni.navigateTo({
|
||||
url: '/pages/views/home/search'
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.search{
|
||||
z-index: 900;
|
||||
}
|
||||
.input-box {
|
||||
width: 100%;
|
||||
height: 60upx;
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 30upx;
|
||||
margin-bottom: 20upx;
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.input-box .icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 10upx;
|
||||
right: 20upx;
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
font-size: 32upx;
|
||||
color: #c0c0c0;
|
||||
}
|
||||
.search .search_img{
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
display: block;
|
||||
}
|
||||
.input-box .inputs {
|
||||
padding-left: 28upx;
|
||||
height: 28upx;
|
||||
font-size: 28upx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<view class="tabs">
|
||||
<view v-for="(item, index) in tabList" :key="index" class="tabs_list" @tap="setTabs(item,index)"
|
||||
:style="'color:' + (active == index ?colors :'') + ';font-weight:' + (active == index ?'bold' : '500')">
|
||||
{{item.name}}
|
||||
<view class="active" :style="'background:' + colors" v-if="active == index"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
components: {},
|
||||
props: {
|
||||
colors: {
|
||||
type: String
|
||||
},
|
||||
tabList: {
|
||||
type: Array
|
||||
},
|
||||
active: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setTabs(item,index) {
|
||||
this.$emit('setTabs',item,index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.tabs{
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
}
|
||||
.tabs_list{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28upx;
|
||||
position: relative;
|
||||
color: #333;
|
||||
}
|
||||
.active{
|
||||
font-weight: bold;
|
||||
color: #DD4F42;
|
||||
width: 50upx;
|
||||
height: 5upx;
|
||||
border-radius: 20upx;
|
||||
background-color: #DD4F42;
|
||||
position: absolute;
|
||||
bottom: 10upx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<view class="item_cell">
|
||||
<view>
|
||||
{{cellname}}
|
||||
</view>
|
||||
<image src="/static/images/home/right.png"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
components: {},
|
||||
props: {
|
||||
cellname: {
|
||||
type: String
|
||||
},
|
||||
linkUrl: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.item_cell{
|
||||
background-color: #fff;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
padding: 0 4%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.item_cell:after{
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
bottom: 0;
|
||||
left: 4%;
|
||||
content: "";
|
||||
-webkit-transform: scaleY(.5);
|
||||
transform: scaleY(.5);
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
}
|
||||
.item_cell:active{
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.item_cell view{
|
||||
width: 93%;
|
||||
float: left;
|
||||
}
|
||||
.item_cell image{
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view class="top_nav" @tap="jumpNext">
|
||||
<text :class="'iconfont ' + icons + ' icon'" :style="'color:' + colors"></text>
|
||||
<text class="name"><slot></slot></text>
|
||||
<image src="/static/images/home/right.png" class="right_icon" v-if="rightshow == true"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
components: {},
|
||||
props: {
|
||||
icons: {
|
||||
type: String
|
||||
},
|
||||
linkUrl: {
|
||||
type: String //跳转的页面地址
|
||||
},
|
||||
colors: {
|
||||
type: String
|
||||
},
|
||||
rightshow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jumpNext() {
|
||||
console.log(this.linkUrl);
|
||||
if (this.linkUrl && this.linkUrl !== '') {
|
||||
uni.navigateTo({
|
||||
url: this.linkUrl
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.top_nav {
|
||||
line-height: 60upx;
|
||||
padding: 20upx 30upx;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top_nav::after {
|
||||
position: absolute;
|
||||
left: 30upx;
|
||||
right: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
bottom: 0;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
border-bottom: 1px solid #E4E7ED;
|
||||
}
|
||||
|
||||
.top_nav:active {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.top_nav .icon {
|
||||
align-self: center;
|
||||
width: 56upx;
|
||||
max-height: 60upx;
|
||||
font-size: 38upx;
|
||||
}
|
||||
|
||||
.top_nav .name {
|
||||
flex: 1;
|
||||
font-size: 28upx;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.top_nav .right_icon {
|
||||
float: right;
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<view class="my_money">
|
||||
<list-cell icons="icon-qianbao" :colors="colors" :rightshow="false">我的账户</list-cell>
|
||||
<view class="menu_btnbox">
|
||||
<view class="menu_btns" @tap="withdrawa">
|
||||
<view class="p1">{{balance}}</view>
|
||||
<view class="p2">余额</view>
|
||||
</view>
|
||||
<view class="menu_btns" @tap="mycoupon">
|
||||
<view class="p1">{{coupon}}</view>
|
||||
<view class="p2">优惠券</view>
|
||||
</view>
|
||||
<view class="menu_btns" @tap="mypoints">
|
||||
<view class="p1">{{integral}}</view>
|
||||
<view class="p2">积分</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import listCell from "./list-cell";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
components: {
|
||||
listCell
|
||||
},
|
||||
props: {
|
||||
balance: {
|
||||
//余额
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
coupon: {
|
||||
//优惠券
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
integral: {
|
||||
//积分
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
colors: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
mycoupon() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/views/user/mycoupon'
|
||||
});
|
||||
},
|
||||
|
||||
mypoints() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/views/user/mypoints'
|
||||
});
|
||||
},
|
||||
withdrawa(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/views/withdrawal/withdrawal'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.my_money {
|
||||
background-color: #fff;
|
||||
margin-bottom: 20upx;
|
||||
}
|
||||
.menu_btnbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.menu_btns {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
margin: 30upx 0;
|
||||
font-size: 24upx;
|
||||
color: #75787d;
|
||||
line-height: 40upx;
|
||||
}
|
||||
.menu_btns .p1{
|
||||
font-size: 30upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<view class="footprint">
|
||||
<list-cell icons="icon-zuji" linkUrl="/pages/views/user/allFootprint" :rightshow="true" :colors="colors">浏览历史</list-cell>
|
||||
<view class="footprint_box">
|
||||
<view class="nodata" v-if="logList.length == 0">
|
||||
<view>
|
||||
<text class="iconfont icon-zanwu1" :style="'color:' + colors"></text>
|
||||
</view>
|
||||
<view class="tips">先去浏览一些吧</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class="footprint_scroll">
|
||||
<view v-for="(item, index) in logList" :key="index" @click="jumpNext(item)" class="scroll_box">
|
||||
<image :src="item.url" mode="aspectFill"></image>
|
||||
<view>{{item.goodsName}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import listCell from "./list-cell";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
components: {
|
||||
listCell
|
||||
},
|
||||
props: {
|
||||
logList: {
|
||||
type: Array
|
||||
},
|
||||
colors: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jumpNext(item){
|
||||
uni.navigateTo({
|
||||
url:'/pages/views/goods/goodsDetails'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/*我的足迹*/
|
||||
.footprint {
|
||||
background-color: #fff;
|
||||
margin-bottom: 20upx;
|
||||
}
|
||||
|
||||
.footprint .nodata {
|
||||
padding: 48upx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footprint .nodata text {
|
||||
font-size: 40upx;
|
||||
}
|
||||
|
||||
.footprint .nodata .tips {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
padding-top: 20upx;
|
||||
}
|
||||
|
||||
.footprint_scroll {
|
||||
background-color: #F8F8F8;
|
||||
width: auto;
|
||||
overflow-x: scroll;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scroll_box {
|
||||
width: 152upx;
|
||||
background-color: #fff;
|
||||
margin-top: 10upx;
|
||||
margin-right: 10upx;
|
||||
border-radius: 8upx;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.scroll_box:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.scroll_box image {
|
||||
width: 152upx;
|
||||
height: 152upx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.scroll_box view {
|
||||
font-size: 24upx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 40upx;
|
||||
padding: 10upx 5upx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view class="my_order">
|
||||
<list-cell icons="icon-order" linkUrl="/pages/views/order/orderList" :colors="colors">全部订单</list-cell>
|
||||
<view class="order_btnbox">
|
||||
<view v-for="(item, index) in orderText" :key="index" class="order_btns" @tap="jumpOrder(item,index)">
|
||||
<view>
|
||||
<text :class="'iconfont ' + item.icon" :style="'color:' + colors"></text>
|
||||
</view>
|
||||
<view style="color:#666">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import listCell from "./list-cell";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
components: {
|
||||
listCell
|
||||
},
|
||||
props: {
|
||||
orderText: {
|
||||
type: Array
|
||||
},
|
||||
colors: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jumpOrder(item,index) {
|
||||
if(item.url !== ''){
|
||||
uni.navigateTo({
|
||||
url: item.url
|
||||
});
|
||||
}else{
|
||||
uni.navigateTo({
|
||||
url: '/pages/views/order/orderList?tabIndex=' + (index + 1)
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.my_order{
|
||||
background-color: #fff;
|
||||
margin-bottom: 20upx;
|
||||
}
|
||||
.order_btnbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.order_btns {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
margin: 10upx 0 20upx;
|
||||
padding: 20upx 0 10upx;
|
||||
font-size: 24upx;
|
||||
color: #75787d;
|
||||
line-height: 40upx;
|
||||
}
|
||||
.order_btns text{
|
||||
font-size: 36upx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<view class="my_server">
|
||||
<list-cell :icons="'iconfont ' + icons" :colors="colors" :rightshow="false">{{titles}}</list-cell>
|
||||
<view class="server_box">
|
||||
<view v-for="(item, index) in serverList" :key="index" class="server_list" @tap="jumpLink(item)">
|
||||
<view>
|
||||
<text :class="'iconfont ' + item.icon" :style="'color:' + colors"></text>
|
||||
</view>
|
||||
<view class="server_text">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import listCell from "./list-cell";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
components: {
|
||||
listCell
|
||||
},
|
||||
props: {
|
||||
serverList: {
|
||||
type: Array
|
||||
},
|
||||
colors: {
|
||||
type: String
|
||||
},
|
||||
titles: {
|
||||
type: String,
|
||||
default: '我的服务'
|
||||
},
|
||||
icons: {
|
||||
type: String,
|
||||
default: 'icon-fuwu'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jumpLink(row) {
|
||||
const whiteUrls = ['pages/views/user/myaddress', 'setting/index']
|
||||
if (!whiteUrls.some(v => row.url.includes(v))) {
|
||||
uni.showToast({
|
||||
icon:'none',
|
||||
title: '功能正在开发中，敬请期待'
|
||||
})
|
||||
return
|
||||
}
|
||||
//页面跳转
|
||||
uni.navigateTo({
|
||||
url: row.url
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
/* 我的服务 */
|
||||
.my_server {
|
||||
background-color: #fff;
|
||||
margin-bottom: 20upx;
|
||||
}
|
||||
|
||||
.server_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 30upx;
|
||||
}
|
||||
.server_box::after{
|
||||
width: 25%;
|
||||
content: '';
|
||||
border:1px solid transparent;
|
||||
}
|
||||
.server_list {
|
||||
max-width: 25%;
|
||||
min-width: 25%;
|
||||
text-align: center;
|
||||
margin-top: 30upx;
|
||||
}
|
||||
.server_list:active{
|
||||
opacity: 0.8;
|
||||
}
|
||||
.server_list text{
|
||||
font-size: 56upx;
|
||||
line-height: 60upx;
|
||||
display: inline-block;
|
||||
}
|
||||
.server_text{
|
||||
font-size: 24upx;
|
||||
color: #3c3c3c;
|
||||
margin-top: 15upx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,331 @@
|
||||
<template>
|
||||
<view class="login" :style="'background: url(' + bgImg[imgIndex] + '); background-size: cover;background-repeat:no-repeat; background-position: center;'">
|
||||
<view class="logo">
|
||||
<image src="/static/images/log.png"></image>
|
||||
</view>
|
||||
<view class="login_from">
|
||||
<input placeholder="请输入手机号" v-model="tel" type="number" maxlength="11" placeholder-style="color: #333"></input>
|
||||
<view class="codes">
|
||||
<input placeholder="请输入短信验证码" v-model="smscode" maxlength="6" type="number" placeholder-style="color: #333"></input>
|
||||
<view @click="getCode" :style="{opacity: isCode == true ? '1':'0.8'}">{{codeName}}</view>
|
||||
</view>
|
||||
<view class="login_btn" @click="onlogin">登录</view>
|
||||
</view>
|
||||
<view class="wxLogin">
|
||||
<view>—— 快速登录 ——</view>
|
||||
<image src="/static/images/wx.png"></image>
|
||||
<!-- #ifdef MP -->
|
||||
<button open-type="getUserInfo" @getuserinfo="getUserInfo">1</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP -->
|
||||
<button open-type="getUserInfo" @click="onAuthorize"></button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { setUserInfo,setToken } from "../../utils/auth";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isCanUse: uni.getStorageSync('isCanUse'),
|
||||
nickName: '',
|
||||
avatarUrl: '',
|
||||
bgImg: ['https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/img_flower_4.jpg', 'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/img_flower_1.jpg', 'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/img_flower_3.jpg', 'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/img_flower_2.jpg'],
|
||||
imgTime: '',
|
||||
imgIndex: 0,
|
||||
codeName: '验证码',
|
||||
isCode: true,
|
||||
tel:'12345678912',
|
||||
smscode:'123456'
|
||||
};
|
||||
},
|
||||
props: {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.wxlogin(); //小程序获取用户code
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {
|
||||
this.setbImg(); //动态切换背景
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {
|
||||
clearInterval(this.imgTime);
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {
|
||||
clearInterval(this.imgTime);
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {},
|
||||
methods: {
|
||||
getUserInfo() {
|
||||
console.log('点了');
|
||||
let _this = this;
|
||||
uni.getUserInfo({
|
||||
provider: 'weixin',
|
||||
success: function (infoRes) {
|
||||
console.log(infoRes);
|
||||
_this.setData({
|
||||
nickName: infoRes.userInfo.nickName,
|
||||
//昵称
|
||||
avatarUrl: infoRes.userInfo.avatarUrl //头像
|
||||
});
|
||||
let date = new Date().getTime()
|
||||
setToken(date) //模拟存储token
|
||||
setUserInfo(infoRes.userInfo); //模拟存储用户信息
|
||||
try {
|
||||
uni.setStorageSync('isCanUse', 1); //记录是否第一次授权 false:表示不是第一次授权
|
||||
uni.switchTab({
|
||||
url: '/pages/views/tabBar/home'
|
||||
});
|
||||
} catch (e) {
|
||||
console.log('缓存失败');
|
||||
}
|
||||
},
|
||||
|
||||
fail(res) {}
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
setbImg() {
|
||||
clearInterval(this.imgTime);
|
||||
let that = this;
|
||||
console.log('执行了');
|
||||
let imgTime = setInterval(() => {
|
||||
let imgIndex = that.imgIndex + 1;
|
||||
if (imgIndex >= that.bgImg.length) {
|
||||
imgIndex = 0;
|
||||
}
|
||||
that.setData({
|
||||
imgIndex: imgIndex
|
||||
});
|
||||
}, 15000);
|
||||
this.setData({
|
||||
imgTime: imgTime
|
||||
});
|
||||
},
|
||||
onlogin(){ //登录 模拟存储token
|
||||
let date = new Date().getTime()
|
||||
setToken(date)
|
||||
let user = { //模拟存储用户信息
|
||||
avatarUrl: '/static/images/face.jpg',
|
||||
nickName: '用户2020'
|
||||
}
|
||||
setUserInfo(user)
|
||||
|
||||
uni.showLoading({
|
||||
title:'登录中...'
|
||||
})
|
||||
setTimeout(()=>{
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title:'登陆成功'
|
||||
})
|
||||
}, 500)
|
||||
setTimeout(()=>{
|
||||
uni.navigateBack(-1)
|
||||
},1500)
|
||||
},
|
||||
getCode() { //获取用户短信验证码
|
||||
if(this.isCode == false){
|
||||
return
|
||||
}
|
||||
if (this.tel == '') {
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.tel)) {
|
||||
uni.showToast({
|
||||
title: '请填写正确手机号码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
this.getPhoneCode()
|
||||
},
|
||||
getPhoneCode() {
|
||||
let timer = ''
|
||||
let date = 120
|
||||
let that = this
|
||||
if (that.isCode == true) {
|
||||
uni.showToast({
|
||||
title: '验证码发送成功~',
|
||||
icon: 'none'
|
||||
})
|
||||
clearInterval(timer)
|
||||
setInterval(() => {
|
||||
if (date >= 1) {
|
||||
date--
|
||||
that.codeName = date + '秒重试'
|
||||
that.isCode = false
|
||||
} else {
|
||||
that.isCode = true
|
||||
that.codeName = '验证码'
|
||||
clearInterval(timer)
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
wxlogin() {
|
||||
// 1.wx获取登录用户code
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: function (loginRes) {
|
||||
console.log('这是用户的code', loginRes);
|
||||
}
|
||||
});
|
||||
},
|
||||
onAuthorize(){ //微信公众号授权登录
|
||||
uni.showToast({
|
||||
title:'对接你的公众号登录方法',
|
||||
icon:"none"
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.login{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: all 0.6s ease-in-out;
|
||||
background-color: #333;
|
||||
}
|
||||
.logo image{
|
||||
height: 160upx;
|
||||
width: 160upx;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
margin-top: 150upx;
|
||||
}
|
||||
.login_from{
|
||||
width: 80vw;
|
||||
margin: 0 auto;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
.login_from .codes{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.login_from input{
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
margin-bottom: 60upx;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
box-sizing: border-box;
|
||||
padding: 0 30upx;
|
||||
border-radius: 10upx;
|
||||
font-size: 26upx;
|
||||
color: #333;
|
||||
}
|
||||
.codes input{
|
||||
width: 75%;
|
||||
}
|
||||
.codes view{
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
width: 130upx;
|
||||
margin-bottom: 60upx;
|
||||
color: #FFFFFF;
|
||||
background-color: rgba(70, 143, 152, 0.8);
|
||||
text-align: center;
|
||||
font-size: 24upx;
|
||||
border-radius: 10upx;
|
||||
}
|
||||
.login_btn{
|
||||
width: 500upx;
|
||||
height: 80upx;
|
||||
margin: 0 auto;
|
||||
background-color: rgba(70, 143, 152, 0.8);
|
||||
margin-top: 60px;
|
||||
text-align: center;
|
||||
line-height: 80upx;
|
||||
border-radius: 40upx;
|
||||
color: #fff;
|
||||
}
|
||||
.login_btn:active{
|
||||
opacity: 0.9;
|
||||
}
|
||||
.wxLogin{
|
||||
height: 200upx;
|
||||
width: 300upx;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
bottom: 5vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.wxLogin view{
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 24upx;
|
||||
margin-bottom: 20upx;
|
||||
}
|
||||
.wxLogin image{
|
||||
height: 100upx;
|
||||
width: 100upx;
|
||||
display: block;
|
||||
z-index: 10;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.wxLogin button{
|
||||
width: 100upx!important;
|
||||
height: 100upx;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
padding: 0!important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,647 @@
|
||||
.carousel {
|
||||
height: 100vw;
|
||||
width: 100vw;
|
||||
position: absolute;
|
||||
top: 0upx;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.carousel swiper {
|
||||
height: 100%;
|
||||
}
|
||||
.top_nav{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 80;
|
||||
}
|
||||
.image-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: 100vw;
|
||||
overflow: hidden;
|
||||
border-bottom: 1upx solid rgba(0, 0, 0, 0.01);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper-item image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.place {
|
||||
height: 100vw;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods_info {
|
||||
padding: 30upx 4%;
|
||||
padding-bottom: 20upx;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.goods_info .goods_name {
|
||||
font-size: 30upx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.goods_info .goods_price {
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.goods_price .money {
|
||||
font-size: 42upx;
|
||||
font-weight: bold;
|
||||
color: $mycolor;
|
||||
}
|
||||
|
||||
.goods_price .h_money {
|
||||
font-size: 28upx;
|
||||
margin-left: 20upx;
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
}
|
||||
.other{
|
||||
padding: 0 4%;
|
||||
height: 60upx;
|
||||
line-height: 60upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
}
|
||||
.baoyou {
|
||||
height: 30upx;
|
||||
font-size: 20upx;
|
||||
/* #ifdef MP */
|
||||
line-height: 30upx;
|
||||
/* #endif */
|
||||
/* #ifdef H5 */
|
||||
line-height: 35upx;
|
||||
/* #endif */
|
||||
background-color: #FF546E;
|
||||
padding: 0 10upx;
|
||||
color: #FFFFFF;
|
||||
margin-left: 30upx;
|
||||
border-radius: 4upx;
|
||||
}
|
||||
|
||||
.shoucang,
|
||||
.go_btn {
|
||||
width: 80upx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 20upx;
|
||||
top: 74%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.go_btn {
|
||||
top: 50% !important;
|
||||
}
|
||||
|
||||
.shoucang .sc_icons text {
|
||||
font-size: 45upx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.shoucang .sc_text {
|
||||
font-size: 22upx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.share {
|
||||
display: flex;
|
||||
padding: 0 4%;
|
||||
background-color: #FAEFF7;
|
||||
font-size: 24upx;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.share_btn {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.share view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
position: relative;
|
||||
align-content: center;
|
||||
}
|
||||
.share view text {
|
||||
margin-right: 10upx;
|
||||
}
|
||||
|
||||
.shop {
|
||||
padding: 20upx 4%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
border-bottom: 1upx dashed #eee;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.shop .shop_img {
|
||||
width: 140upx;
|
||||
height: 120upx;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8upx;
|
||||
}
|
||||
|
||||
.shop_center {
|
||||
overflow: hidden;
|
||||
margin-left: 20upx;
|
||||
}
|
||||
|
||||
.shop_center .shop_name {
|
||||
font-size: 28upx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.shop_center .shop_address {
|
||||
font-size: 24upx;
|
||||
color: #666;
|
||||
margin-top: 20upx;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.sku_pon {
|
||||
padding: 0 4%;
|
||||
}
|
||||
|
||||
.cell {
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-bottom: 1upx solid #eee;
|
||||
}
|
||||
|
||||
.cell .text1 {
|
||||
width: 30%;
|
||||
color: #999;
|
||||
font-size: 24upx;
|
||||
}
|
||||
|
||||
.cell .text2 {
|
||||
width: 65%;
|
||||
color: #999;
|
||||
font-size: 24upx;
|
||||
}
|
||||
|
||||
.cell image {
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
/* display: block; */
|
||||
float: right;
|
||||
}
|
||||
|
||||
.details {
|
||||
padding: 20upx 4%;
|
||||
margin-top: 20upx;
|
||||
border-top: 10upx solid #ddd;
|
||||
margin-bottom: 120upx;
|
||||
}
|
||||
|
||||
.details_title {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.details_content {
|
||||
margin-top: 30upx;
|
||||
margin-bottom: 50upx;
|
||||
}
|
||||
|
||||
.operation {
|
||||
height: 100upx;
|
||||
width: 100vw;
|
||||
line-height: 100upx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
background-color: #F0F0F0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 0 20upx;
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
.operation .home,
|
||||
.cart {
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
text-align: center;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
|
||||
.operation .home text,
|
||||
.cart text {
|
||||
font-size: 40upx;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.operation .btns {
|
||||
display: flex;
|
||||
width: 70vw;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.operation .btns .addcart {
|
||||
height: 70upx;
|
||||
line-height: 70upx;
|
||||
text-align: center;
|
||||
border: 2upx solid #A160F0;
|
||||
padding: 0 40upx;
|
||||
border-radius: 40upx 0 0 40upx;
|
||||
font-size: 24upx;
|
||||
color: #A160F0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.operation .btns .dingjin {
|
||||
height: 70upx;
|
||||
line-height: 70upx;
|
||||
text-align: center;
|
||||
padding: 0 40upx;
|
||||
border-radius: 0 40upx 40upx 0;
|
||||
border-left: none;
|
||||
font-size: 24upx;
|
||||
color: #fff;
|
||||
background-color: #A160F0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 优惠券 */
|
||||
.coupon {
|
||||
background-color: #fff;
|
||||
border-radius: 10upx 10upx 0 0;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: -1000upx;
|
||||
z-index: 999;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.mask {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #000;
|
||||
z-index: 900;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.scrolls {
|
||||
width: 100vw;
|
||||
height: 60vh;
|
||||
padding-top: 10upx;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
/* 播放视频的轮播图样式 */
|
||||
.place_tow {
|
||||
width: 100vw;
|
||||
height: 100vw;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.place_tow .videocover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.playbtn {
|
||||
width: 100upx!important;
|
||||
height: 100upx!important;
|
||||
display: block;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
z-index: 999;
|
||||
overflow: hidden;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* 静音按钮 */
|
||||
.shengyin {
|
||||
position: absolute;
|
||||
bottom: 40upx;
|
||||
right: 40upx;
|
||||
z-index: 10;
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
}
|
||||
|
||||
.shengyin image {
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
// 商品评论
|
||||
.evaluate{
|
||||
padding: 0 4%;
|
||||
border-top: 10upx solid #ddd;
|
||||
.eva_title{
|
||||
height: 70upx;
|
||||
margin-top: 10upx;
|
||||
line-height: 70upx;
|
||||
font-size: 30upx;
|
||||
font-weight: bold;
|
||||
color: #202020;
|
||||
text{
|
||||
font-weight: normal;
|
||||
}
|
||||
.seeAll{
|
||||
float: right;
|
||||
font-size: 24upx;
|
||||
color: #999999;
|
||||
transform: translateY(6upx);
|
||||
&:active{
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.evaluate_box{
|
||||
.pingjia {
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
.pingjia_box {
|
||||
overflow: hidden;
|
||||
margin-top: 20upx;
|
||||
padding-bottom: 20upx;
|
||||
overflow: hidden;
|
||||
border-bottom: 1upx solid #f2f2f2;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 10upx;
|
||||
}
|
||||
.box_top {
|
||||
display: flex;
|
||||
.head {
|
||||
height: 80upx;
|
||||
max-width: 80upx;
|
||||
min-width: 80upx;
|
||||
flex: 1;
|
||||
border-radius: 50%;
|
||||
float: left;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
margin-left: 20upx;
|
||||
position: relative;
|
||||
.name {
|
||||
font-size: 26upx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
.p2 {
|
||||
margin-top: 20upx;
|
||||
font-size: 24upx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: rgba(156, 156, 156, 1);
|
||||
.text2 {
|
||||
margin-left: 50upx;
|
||||
}
|
||||
}
|
||||
.p3 {
|
||||
height: 35upx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 200upx;
|
||||
top: 8upx;
|
||||
image {
|
||||
width: 35upx;
|
||||
height: 35upx;
|
||||
float: left;
|
||||
margin-left: 5upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tag_box {
|
||||
margin-top: 20upx;
|
||||
overflow: hidden;
|
||||
.tags {
|
||||
font-size: 22upx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
background-color: #FAEFF7;
|
||||
color: #FF546E;
|
||||
float: left;
|
||||
height: 50upx;
|
||||
line-height: 50upx;
|
||||
padding: 0 15upx;
|
||||
border-radius: 25upx;
|
||||
text-align: center;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
}
|
||||
.ping_neirong {
|
||||
font-size: 28upx;
|
||||
margin-top: 20upx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
line-height: 50upx;
|
||||
}
|
||||
.ping_img {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-top: 20upx;
|
||||
&::after {
|
||||
content: '';
|
||||
max-width: 29vw;
|
||||
min-width: 29vw;
|
||||
}
|
||||
image {
|
||||
max-width: 29vw;
|
||||
min-width: 29vw;
|
||||
height: 29vw;
|
||||
border-radius: 10upx;
|
||||
margin-bottom: 20upx;
|
||||
}
|
||||
}
|
||||
.huifu {
|
||||
padding: 20upx;
|
||||
background-color: #f3f3f3;
|
||||
border-radius: 10upx;
|
||||
font-size: 24upx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: rgba(77, 77, 77, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.go_top{
|
||||
position: fixed;
|
||||
bottom: 12vh;
|
||||
right: -200upx;
|
||||
width: 80upx;
|
||||
z-index: 200;
|
||||
transition: all 0.3s;
|
||||
.ontop {
|
||||
width: 70upx;
|
||||
height: 70upx;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.ontop:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.ontop image {
|
||||
width: 45upx;
|
||||
height: 55upx;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding-top: 15upx;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.center_poter{
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
.close_btn{
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
background-color: rgba($color: #000000, $alpha: .3);
|
||||
position: absolute;
|
||||
top: 5upx;
|
||||
right: 5upx;
|
||||
z-index: 500;
|
||||
padding: 5upx;
|
||||
border-radius: 6upx;
|
||||
z-index: 999;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
/* 预览视频弹窗 */
|
||||
.mask {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.previewvideo {
|
||||
width: 100vw;
|
||||
height: 100vw;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
background-color: #000;
|
||||
z-index: 900;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.close {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: flex-end;
|
||||
position: absolute;
|
||||
top: 140upx;
|
||||
right: 20upx;
|
||||
z-index: 900;
|
||||
image {
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
display: block;
|
||||
justify-content: center;
|
||||
margin-left: 30upx;
|
||||
margin-bottom: 20upx;
|
||||
border-radius: 50%;
|
||||
padding: 10upx;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.videos {
|
||||
height: 100vw;
|
||||
width: 100vw;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nowvideos {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<view class="after_type">
|
||||
<view class="goods_data">
|
||||
<image :src="goodData.img" mode=""></image>
|
||||
<view class="right">
|
||||
<p class="goods_name">{{goodData.title}}</p>
|
||||
<p class="goods_sku">{{goodData.goods_sku_text}}</p>
|
||||
<p class="goods_price">
|
||||
<text :style="{color:colors}">￥{{goodData.money}}</text>
|
||||
<text style="font-size: 24upx;color: #333333;">数量 x {{goodData.number}}</text>
|
||||
</p>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 分割线 -->
|
||||
<view class="place"></view>
|
||||
<!-- 选择退货类型 -->
|
||||
<view class="_type">
|
||||
<!-- 退货 -->
|
||||
<view class="type_list" @click="jumpNext(1,'退货')">
|
||||
<view class="type_left">
|
||||
<image class="type_img" src="/static/images/after/tuihuo.png" mode=""></image>
|
||||
<text class="type_text">退货</text>
|
||||
</view>
|
||||
<view class="type_right">
|
||||
<view class="left_p">
|
||||
<p style="text-align: right;">退回收到的商品</p>
|
||||
<p style="color:#E1251B">支持7天无理由退货</p>
|
||||
<p style="color:#E1251B">(拆封后不支持)</p>
|
||||
</view>
|
||||
<image src="/static/images/home/right.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 换货 -->
|
||||
<view class="type_list" v-for="(item,index) in lists" :key="index" @click="jumpNext(item.type,item.name)">
|
||||
<view class="type_left">
|
||||
<image class="type_img" :src="item.icon" mode=""></image>
|
||||
<text class="type_text">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="type_right">
|
||||
<view class="left_p">
|
||||
<p>{{item.tips}}</p>
|
||||
</view>
|
||||
<image src="/static/images/home/right.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var app = getApp();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
colors:"",
|
||||
goodData: {},
|
||||
lists:[
|
||||
{name:'换货',type: 2,icon:'/static/images/after/huanhuo.png',tips:'更换收到的商品'},
|
||||
{name:'维修',type: 3,icon:'/static/images/after/weixiu.png',tips:'维修收到的商品'},
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
let goodData = JSON.parse(option.goodData)
|
||||
this.setData({
|
||||
goodData: goodData,
|
||||
colors: app.globalData.newColor
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
jumpNext(index,typeText){
|
||||
uni.setStorageSync('goodData',JSON.stringify(this.goodData)) // 存储商品信息
|
||||
uni.navigateTo({
|
||||
url: '/pages/views/order/afterSale?type='+index+'&typeText='+typeText
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.after_type {
|
||||
padding: 20upx 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.goods_data {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
padding: 0 4%;
|
||||
image {
|
||||
width: 140upx;
|
||||
height: 140upx;
|
||||
border-radius: 8upx;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 20upx;
|
||||
width: 80%;
|
||||
|
||||
.goods_name {
|
||||
font-size: 26upx;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.goods_sku {
|
||||
font-size: 24upx;
|
||||
color: #999999;
|
||||
margin-top: 5upx;
|
||||
}
|
||||
|
||||
.goods_price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 28upx;
|
||||
color: #999;
|
||||
margin-top: 5upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.place{
|
||||
height: 20upx;
|
||||
width: 100%;
|
||||
margin-top: 20upx;
|
||||
border-bottom: 2upx dashed #EEEEEE;
|
||||
}
|
||||
._type{
|
||||
margin: 0 4%;
|
||||
border-radius: 20upx;
|
||||
box-shadow: 0upx 0upx 10upx #DDDDDD;
|
||||
margin-top: 30upx;
|
||||
box-sizing: border-box;
|
||||
padding: 20upx;
|
||||
.type_list{
|
||||
height: 152upx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1upx solid #EEEEEE;
|
||||
padding: 20upx 0;
|
||||
&:last-of-type{
|
||||
border-bottom: none;
|
||||
}
|
||||
&:active{
|
||||
opacity: .8;
|
||||
}
|
||||
.type_left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.type_img{
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
display: block;
|
||||
}
|
||||
.type_text{
|
||||
font-size: 30upx;
|
||||
font-weight: bold;
|
||||
color: #202020;
|
||||
margin-left: 20upx;
|
||||
}
|
||||
}
|
||||
.type_right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.left_p{
|
||||
margin-right: 10upx;
|
||||
p{
|
||||
height: 30upx;
|
||||
line-height: 30upx;
|
||||
font-size: 24upx;
|
||||
text-align: center;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
image{
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
display: block;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<view class="cencal_order">
|
||||
<view class="remark">
|
||||
<textarea maxlength="-1" placeholder="请在此处输入您的退单理由" placeholder-class="textarea_p"></textarea>
|
||||
</view>
|
||||
<view class="tag_box">
|
||||
<view v-for="(item, index) in remarkList" :key="index" class="tag_list" @tap="setCurrent(index)">
|
||||
<view :style="'color:' + (item.current == true ?'#fff':'') + ';background:' + (item.current == true ? colors:'') + ';border:' + (item.current == true ? 'none':'')">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btns" :style="{background: colors}">
|
||||
确认提交
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var app = getApp();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
colors: '',
|
||||
remarkList: [{
|
||||
name: '图案不好看'
|
||||
}, {
|
||||
name: '性价比太低'
|
||||
}, {
|
||||
name: '态度不好'
|
||||
}, {
|
||||
name: '价格不合理'
|
||||
}, {
|
||||
name: '做工不行'
|
||||
}, {
|
||||
name: '物流时间长'
|
||||
}, {
|
||||
name: '价格优惠低'
|
||||
}, {
|
||||
name: '其他原因'
|
||||
}],
|
||||
data: ""
|
||||
};
|
||||
},
|
||||
|
||||
components: {},
|
||||
props: {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
this.setData({
|
||||
colors: app.globalData.newColor
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {},
|
||||
methods: {
|
||||
setCurrent(index) {
|
||||
let remark = this.remarkList[index];
|
||||
remark.current = !remark.current
|
||||
let data = 'remarkList[' + index + ']';
|
||||
this.setData({
|
||||
[data]: remark
|
||||
});
|
||||
let arr = [];
|
||||
this.remarkList.forEach(e => {
|
||||
if (e.current == true) {
|
||||
arr.push(e);
|
||||
}
|
||||
});
|
||||
console.log(arr);
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page{
|
||||
background-color: #F5F5FA;
|
||||
}
|
||||
.cencal_order{
|
||||
padding: 20upx 4%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.remark{
|
||||
background-color: #F5F5F5;
|
||||
border-radius: 10upx;
|
||||
height: 60vw;
|
||||
padding: 20upx;
|
||||
margin-top: 20upx;
|
||||
textarea{
|
||||
font-size: 26upx;
|
||||
color: #797979;
|
||||
}
|
||||
}
|
||||
.textarea_p{
|
||||
font-size: 24upx;
|
||||
color: #797979;
|
||||
}
|
||||
.tag_box{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 40upx;
|
||||
}
|
||||
.tag_box::after{
|
||||
content: '';
|
||||
width: 30%;
|
||||
}
|
||||
.tag_list{
|
||||
max-width: 24%;
|
||||
min-width: 24%;
|
||||
text-align: center;
|
||||
margin-bottom: 30upx;
|
||||
}
|
||||
.tag_list view{
|
||||
height: 60upx;
|
||||
line-height: 60upx;
|
||||
border-radius: 30upx;
|
||||
border: 1upx solid #ddd;
|
||||
font-size: 22upx;
|
||||
color: #303030;
|
||||
}
|
||||
.btns{
|
||||
width: 100%;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
font-size: 30upx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
margin-top: 100upx;
|
||||
border-radius: 8upx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,637 @@
|
||||
<template>
|
||||
<view class="order">
|
||||
<!-- 选择配送方式 -->
|
||||
<!-- @tap="selectMode" -->
|
||||
<view class="mode" >
|
||||
<text class="text1">配送方式</text>
|
||||
<text class="text2">{{modes || "请选择配送方式"}}</text>
|
||||
<image src="/static/images/home/right.png"></image>
|
||||
</view>
|
||||
<!-- 收货地址 -->
|
||||
<view class="order_address" v-if="tapIndex == 0">
|
||||
<image src="/static/images/home/bottom.png"></image>
|
||||
<view class="address_box" @tap="setAddress">
|
||||
<view class="weizhi_icon">
|
||||
<text class="iconfont icon-dizhi" :style="'color:' + colors"></text>
|
||||
</view>
|
||||
<block v-if="address">
|
||||
<view class="center">
|
||||
<view class="name">
|
||||
<text class="text1">{{address.recipient}}</text>
|
||||
<text class="phones">{{address.telephone}}</text>
|
||||
</view>
|
||||
<view class="address_name">{{address.detail}}</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="noaddress" v-else>
|
||||
请添加收货地址
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品详情 -->
|
||||
<view v-for="(item, index) in goodsList" :key="index" class="goods">
|
||||
<view class="goods_data">
|
||||
<image :src="item.selectSku.img" mode="widthFix" v-if="item.selectSku"></image>
|
||||
<image :src="item.img" mode="widthFix" ></image>
|
||||
<view class="goods_title">
|
||||
<view class="g_name">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="goods_sku">
|
||||
<!-- 判断当前商品是否存在规格 -->
|
||||
规格: <text style="margin-right: 10upx;" v-if="item._selectedSku.length">
|
||||
<text v-for="_it in item._selectedSku" :key="_it.tagname">{{_it.tagname}}</text>
|
||||
</text>
|
||||
<text style="margin-right: 10upx;" v-else>暂无规格</text>
|
||||
</view>
|
||||
<view class="price">
|
||||
<view class="t1" :style="'color:' + colors">￥{{item.money}}</view>
|
||||
<view class="t2" v-if="item.hmoney">
|
||||
<text>￥{{item.hmoney}}</text>
|
||||
</view>
|
||||
<view class="t3">
|
||||
x{{item.number}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="morelist" style="border-bottom:none">
|
||||
<view class="title">
|
||||
<text class="quan" :style="'background:' + colors">券</text>
|
||||
<text>优惠券</text>
|
||||
</view>
|
||||
<view class="right_title" :style="'color:' + colors + ';font-size:24upx'" @tap="openCoupon(index)">
|
||||
{{item.couponName || '请选择优惠券'}}
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<!-- 订单详情 -->
|
||||
<view class="order_more">
|
||||
<view class="morelist">
|
||||
<text class="title">商品总价</text>
|
||||
<view class="right_title">
|
||||
￥{{sumprice}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="morelist">
|
||||
<view class="title">
|
||||
<text class="quan" :style="'background:' + colors">运</text>
|
||||
<text>运费</text>
|
||||
</view>
|
||||
<view class="right_title">
|
||||
￥{{ freight }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="morelist">
|
||||
<text class="title">实付款</text>
|
||||
<view class="right_title" :style="'color:' + colors + ';'">
|
||||
￥{{sumprice}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips">
|
||||
<view class="tips_name">备注信息</view>
|
||||
<view class="textarea_box">
|
||||
<textarea placeholder="请输入备注信息" v-model="remark" placeholder-class="font-size: 24upx" maxlength="-1" v-if="couponshow == false"></textarea>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom_btn">
|
||||
<view class="moneys">
|
||||
合计: <text :style="'color:' + colors + ';'">￥{{sumprice}}</text>
|
||||
</view>
|
||||
<view class="btns" :style="'background:' + colors + ';'" @tap="submit">
|
||||
提交订单
|
||||
</view>
|
||||
</view>
|
||||
<!-- 优惠券弹出层 -->
|
||||
<view class="mask" catchtouchmove="preventTouchMove" v-if="couponshow == true" @tap="hidecoupon"></view>
|
||||
<view class="coupon" :style="'bottom:' + (couponshow == true ? '0':'')">
|
||||
<view class="buyong" @click="notUsed()">不使用优惠券</view>
|
||||
<scroll-view class="scrolls" scroll-y>
|
||||
<coupon :couponList="couponList" @onReceive="onReceive"></coupon>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var app = getApp();
|
||||
import coupon from "../../commponent/public/coupon";
|
||||
import {getGoodsData,getAddress,removeAddress, getCart, resetCart, getUserInfo} from '@/utils/auth.js'
|
||||
import {resetNum, setTabBarBadge } from '@/utils/util.js'
|
||||
import { addOrder } from "../../../api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
colors: '',
|
||||
couponshow: false,
|
||||
modes: '物流寄送',
|
||||
tapIndex: 0,
|
||||
goodsList:getGoodsData(),
|
||||
couponIndex: 0,
|
||||
freight: 0,
|
||||
nowprice: 0, //临时存储总金额的变量 用于计算优惠券
|
||||
sumprice: 0,
|
||||
address: null,
|
||||
remark: '',
|
||||
couponList: [ //优惠券列表
|
||||
{
|
||||
money: 30,
|
||||
reduce: 5,
|
||||
date: '2020-02-09 2020-10-02',
|
||||
id: 1,
|
||||
status: 0,
|
||||
condition: ['新人专享', '仅在支付时使用', '可与其他产品共享']
|
||||
}, {
|
||||
money: 30,
|
||||
reduce: 5,
|
||||
date: '2020-02-09 2020-10-02',
|
||||
id: 2,
|
||||
status: 0,
|
||||
condition: ['新人专享']
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
coupon
|
||||
},
|
||||
props: {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
removeAddress() //清空存储的地址
|
||||
// 计算所有的商品总价
|
||||
this.getSumPrice()
|
||||
this.setData({
|
||||
colors: app.globalData.newColor
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {
|
||||
let address = getAddress() //判断是否存在重新选择的地址
|
||||
if(address){
|
||||
this.address = address
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {},
|
||||
methods: {
|
||||
getSumPrice(){
|
||||
let sumprice = 0
|
||||
this.goodsList.forEach(e=>{
|
||||
sumprice += e.number * resetNum(e.money)
|
||||
})
|
||||
sumprice += resetNum(this.freight)
|
||||
this.sumprice = resetNum(sumprice, 'end')
|
||||
this.nowprice = resetNum(sumprice, 'end')
|
||||
},
|
||||
openCoupon(index) {
|
||||
this.setData({
|
||||
couponshow: true,
|
||||
couponIndex: index
|
||||
});
|
||||
},
|
||||
|
||||
hidecoupon() {
|
||||
this.setData({
|
||||
couponshow: false
|
||||
});
|
||||
},
|
||||
|
||||
submit() {
|
||||
if (!this.address) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请先选择地址'
|
||||
})
|
||||
return
|
||||
}
|
||||
const cartList = getCart()
|
||||
const goodsIds = this.goodsList.map(v => v.goods_id)
|
||||
|
||||
const newCartList = cartList.filter(v => !goodsIds.includes(v.goods_id))
|
||||
|
||||
const params = {
|
||||
"recipient": this.address.recipient,
|
||||
"addr": this.address.detail,
|
||||
"mobile": this.address.telephone,
|
||||
"orderDetailList": this.goodsList.map(v => {
|
||||
return {
|
||||
goodsId: v.goods_id,
|
||||
goodsName: v.title,
|
||||
goodsNo: v.number,
|
||||
goodsPrice: v.money
|
||||
}
|
||||
}),
|
||||
state: 0,
|
||||
"remark": this.remark,
|
||||
|
||||
"totalAmount": this.sumprice,
|
||||
|
||||
"userId": getUserInfo().id
|
||||
}
|
||||
console.log(params)
|
||||
addOrder(params).then(res => {
|
||||
if (res.result) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '添加成功'
|
||||
})
|
||||
resetCart(newCartList)
|
||||
setTabBarBadge(newCartList.length)
|
||||
//提交订单
|
||||
uni.redirectTo({
|
||||
url: '/pages/views/order/success'
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
selectMode() {
|
||||
let that = this;
|
||||
let list = ['物流寄送', '到店自提']
|
||||
uni.showActionSheet({
|
||||
itemList: list,
|
||||
success: function (res) {
|
||||
that.setData({
|
||||
modes: list[res.tapIndex],
|
||||
tapIndex: res.tapIndex
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setAddress() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/views/user/myaddress'
|
||||
});
|
||||
},
|
||||
onReceive(item, index){ //选择优惠券
|
||||
this.couponshow = false
|
||||
/**
|
||||
* 自定义变量 到goodsList中 用户计算合计金额与优惠券
|
||||
*/
|
||||
this.goodsList[this.couponIndex].couponName = '满'+item.money+'减'+item.reduce
|
||||
this.goodsList[this.couponIndex].couponReduce = item.reduce //优惠券金额
|
||||
this.sumprice = this.sumprice - item.reduce
|
||||
},
|
||||
notUsed(){ //不使用优惠券 重置金额
|
||||
|
||||
this.couponshow = false
|
||||
this.goodsList[this.couponIndex].couponName = ''
|
||||
if(this.goodsList[this.couponIndex].couponReduce){
|
||||
this.sumprice = this.sumprice + Number(this.goodsList[this.couponIndex].couponReduce)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.order {
|
||||
padding: 20upx 4%;
|
||||
}
|
||||
.mode{
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
padding: 0 20upx;
|
||||
border-radius: 10upx;
|
||||
align-items: center;
|
||||
margin-bottom: 20upx;
|
||||
box-shadow: 0upx 0upx 10upx #ddd;
|
||||
}
|
||||
.mode:active{
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.mode .text1{
|
||||
color: #999;
|
||||
font-size: 24upx;
|
||||
}
|
||||
.mode .text2{
|
||||
font-size: 24upx;
|
||||
color: #333;
|
||||
display: block;
|
||||
width: 50%;
|
||||
font-weight: bold;
|
||||
}
|
||||
.mode image{
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
display: block;
|
||||
}
|
||||
.order_address {
|
||||
height: 150upx;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 10upx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0upx 0upx 10upx #ddd;
|
||||
}
|
||||
|
||||
.order_address image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.address_box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
box-sizing: border-box;
|
||||
padding: 20upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.weizhi_icon text {
|
||||
font-size: 40upx;
|
||||
margin-left: 10upx;
|
||||
}
|
||||
|
||||
.address_box .center {
|
||||
margin-left: 20upx;
|
||||
}
|
||||
|
||||
.address_box .center .name {
|
||||
height: 60upx;
|
||||
line-height: 60upx;
|
||||
}
|
||||
|
||||
.address_box .center .name .text1 {
|
||||
font-size: 26upx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: inline-block;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
|
||||
.phones {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.address_box .address_name {
|
||||
font-size: 26upx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.noaddress {
|
||||
margin-left: 40upx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 26upx;
|
||||
}
|
||||
|
||||
.goods {
|
||||
background-color: #fff;
|
||||
margin-top: 20upx;
|
||||
box-shadow: 0upx 0upx 10upx #ddd;
|
||||
border-radius: 10upx;
|
||||
padding: 20upx;
|
||||
padding-bottom: 10upx;
|
||||
}
|
||||
|
||||
.goods_data {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-bottom: 15upx;
|
||||
}
|
||||
|
||||
.goods_data image {
|
||||
min-width: 150upx;
|
||||
max-width: 150upx;
|
||||
height: 150upx;
|
||||
display: block;
|
||||
border-radius: 10upx;
|
||||
}
|
||||
|
||||
.goods_title {
|
||||
margin-left: 20upx;
|
||||
line-height: 40upx;
|
||||
width: 100%;
|
||||
}
|
||||
.goods_title .price{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 40upx;
|
||||
line-height: 40upx;
|
||||
margin-top: 20upx;
|
||||
position: relative;
|
||||
}
|
||||
.goods_title .price .t1{
|
||||
font-size: 30upx;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
.goods_title .price .t2{
|
||||
font-size: 24upx;
|
||||
margin-left: 15upx;
|
||||
display: block;
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.goods_title .price .t3{
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
font-size: 28upx;
|
||||
color: #999;
|
||||
position: absolute;
|
||||
right: 0upx;
|
||||
top: 0;
|
||||
}
|
||||
.goods_title .g_name {
|
||||
font-size: 26upx;
|
||||
font-weight: bold;
|
||||
max-height: 80upx;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.goods_title .goods_sku{
|
||||
color: #999;
|
||||
/* margin-top: 20upx; */
|
||||
}
|
||||
.numbers{
|
||||
/* text-align: right; */
|
||||
}
|
||||
.shop{
|
||||
margin-top: 20upx;
|
||||
font-size: 24upx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
}
|
||||
.shop .iconfont{
|
||||
margin-right: 20upx;
|
||||
}
|
||||
.order_more{
|
||||
padding: 0 2%;
|
||||
margin-top: 20upx;
|
||||
}
|
||||
.morelist{
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1upx dashed #eee;
|
||||
}
|
||||
.morelist .title{
|
||||
color: #333;
|
||||
font-size: 26upx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.morelist .title .quan{
|
||||
font-size: 20upx;
|
||||
width: 35upx;
|
||||
height: 35upx;
|
||||
line-height: 36upx;
|
||||
text-align: center;
|
||||
border-radius: 8upx;
|
||||
margin-right: 10upx;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
.morelist .right_title{
|
||||
color: #999;
|
||||
}
|
||||
.tips{
|
||||
padding: 10upx 0;
|
||||
margin-bottom: 120upx;
|
||||
}
|
||||
.tips .tips_name{
|
||||
font-size: 26upx;
|
||||
font-weight: bold;
|
||||
line-height: 60upx;
|
||||
}
|
||||
.textarea_box{
|
||||
min-height: 100upx;
|
||||
width: 100%;
|
||||
border: 1upx solid #eee;
|
||||
border-radius: 10upx;
|
||||
padding: 20upx;
|
||||
}
|
||||
.textarea_box textarea{
|
||||
font-size: 24upx;
|
||||
height: 150upx;
|
||||
}
|
||||
.bottom_btn{
|
||||
height: 100upx;
|
||||
width: 100vw;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
line-height: 100upx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0 30upx;
|
||||
z-index: 100;
|
||||
font-weight: bold;
|
||||
}
|
||||
.bottom_btn .moneys{
|
||||
font-size: 28upx;
|
||||
font-weight: bold;
|
||||
margin-right: 100upx;
|
||||
}
|
||||
.bottom_btn .btns{
|
||||
font-size: 28upx;
|
||||
color: #fff;
|
||||
height: 60upx;
|
||||
line-height: 60upx;
|
||||
padding: 0 25upx;
|
||||
text-align: center;
|
||||
border-radius: 40upx;
|
||||
margin-top: 20upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* 优惠券 */
|
||||
.coupon{
|
||||
background-color: #fff;
|
||||
border-radius: 10upx 10upx 0 0;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: -1000upx;
|
||||
z-index: 150;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.coupon .buyong{
|
||||
line-height: 80upx;
|
||||
padding: 0 4%;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
}
|
||||
.mask{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #000;
|
||||
z-index: 10;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.scrolls{
|
||||
width: 100vw;
|
||||
height: 55vh;
|
||||
z-index: 500;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,421 @@
|
||||
.evaluate {
|
||||
margin:0 4%;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0upx 0upx 10upx #DDDDDD;
|
||||
border-radius: 8upx;
|
||||
position: relative;
|
||||
top: 20upx;
|
||||
.goods_data{
|
||||
padding: 20upx 30upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
image{
|
||||
width: 120upx;
|
||||
height: 120upx;
|
||||
border-radius: 8upx;
|
||||
}
|
||||
.right{
|
||||
margin-left: 20upx;
|
||||
width: 80%;
|
||||
.goods_name{
|
||||
font-size: 24upx;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp:2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.goods_sku{
|
||||
font-size: 24upx;
|
||||
color: #999999;
|
||||
margin-top: 5upx;
|
||||
}
|
||||
.goods_price{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 28upx;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
margin-top: 5upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.Rate {
|
||||
padding: 0upx 30upx 30upx;
|
||||
background-color: #FFFFFF;
|
||||
border-bottom: 1upx solid #eee;
|
||||
p {
|
||||
height: 60upx;
|
||||
line-height: 60upx;
|
||||
font-size: 30upx;
|
||||
color: #333;
|
||||
}
|
||||
.star {
|
||||
margin-top: 30upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 20upx;
|
||||
image{
|
||||
height: 40upx;
|
||||
width: 40upx;
|
||||
display: inline-block;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pingjia_box {
|
||||
min-height: 300upx;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF;
|
||||
padding: 20upx 30upx;
|
||||
border-bottom: 1upx solid #eee;
|
||||
p{
|
||||
font-size: 28upx;
|
||||
color: #999;
|
||||
margin-bottom: 20upx;
|
||||
}
|
||||
textarea {
|
||||
min-height: 200upx;
|
||||
width: 100%;
|
||||
border-radius: 8upx;
|
||||
overflow: hidden;
|
||||
padding: 0 20upx;
|
||||
box-sizing: border-box;
|
||||
font-size: 26upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
border-radius: 10upx;
|
||||
height: 80upx;
|
||||
color: #FFFFFF;
|
||||
font-size: 30upx;
|
||||
line-height: 80upx;
|
||||
text-align: center;
|
||||
margin-top: 100upx;
|
||||
margin-bottom: 50upx;
|
||||
}
|
||||
.used {
|
||||
overflow: hidden;
|
||||
background-color: #ffffff;
|
||||
margin-top: 20upx;
|
||||
}
|
||||
.historylist {
|
||||
background-color: #ffffff;
|
||||
padding: 30upx;
|
||||
border-radius: 15upx;
|
||||
.left {
|
||||
height: 160upx;
|
||||
border-radius: 8upx;
|
||||
overflow: hidden;
|
||||
width: 200upx;
|
||||
position: relative;
|
||||
float: left;
|
||||
.fm {
|
||||
height: 160upx;
|
||||
width: 200upx;
|
||||
}
|
||||
.zzc {
|
||||
height: 140upx;
|
||||
width: 180upx;
|
||||
position: absolute;
|
||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.bf {
|
||||
height: 30upx;
|
||||
width: 30upx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
.right {
|
||||
padding-left: 20upx;
|
||||
overflow: hidden;
|
||||
.p1 {
|
||||
font-size: 28upx;
|
||||
color: #000;
|
||||
height: 50upx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.p2 {
|
||||
width: 60upx;
|
||||
float: left;
|
||||
.text1 {
|
||||
font-size: 32upx;
|
||||
color: rgba(255,94,102,1);
|
||||
font-weight: bold;
|
||||
}
|
||||
.text2 {
|
||||
font-size: 24upx;
|
||||
color: rgba(255,94,102,1);
|
||||
margin-left: 10upx;
|
||||
}
|
||||
}
|
||||
.p3 {
|
||||
// float: right;
|
||||
margin-top: 10upx;
|
||||
margin-bottom: 10upx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
image {
|
||||
height: 30upx;
|
||||
width: 30upx;
|
||||
float: left;
|
||||
}
|
||||
text {
|
||||
font-size: 24upx;
|
||||
color: #a1a1a1;
|
||||
margin-left: 10upx;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.p4 {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 60upx;
|
||||
padding-top: 20upx;
|
||||
.text1 {
|
||||
padding: 6upx 16upx;
|
||||
border: 1px solid #f64031;
|
||||
color: rgba(255,94,102,1);
|
||||
width: 160upx;
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
height: 60upx;
|
||||
text-align: center;
|
||||
line-height: 50upx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 15upx;
|
||||
font-size: 24upx;
|
||||
background-color: #ffffff;
|
||||
margin-left: 80upx;
|
||||
}
|
||||
.text2 {
|
||||
padding: 6upx 16upx;
|
||||
border: 1px solid rgba(255,94,102,1);
|
||||
color: rgba(255,94,102,1);
|
||||
width: 160upx;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
height: 60upx;
|
||||
text-align: center;
|
||||
line-height: 50upx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 15upx;
|
||||
font-size: 24upx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top {
|
||||
/deep/.van-cell {
|
||||
padding: 0;
|
||||
}
|
||||
/deep/.van-cell__value {
|
||||
text-align: left;
|
||||
font-size: 30upx;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
margin-left: 20upx;
|
||||
}
|
||||
margin-bottom: 20upx;
|
||||
image {
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
float: left;
|
||||
border-radius: 50%;
|
||||
transform: translateY(-5upx);
|
||||
}
|
||||
}
|
||||
}
|
||||
.youhui {
|
||||
height: 40upx;
|
||||
line-height: 40upx;
|
||||
padding: 20upx 30upx;
|
||||
border-bottom: 1upx solid #f2f2f2;
|
||||
box-sizing: content-box;
|
||||
.text1 {
|
||||
font-size: 28upx;
|
||||
color: #333333;
|
||||
}
|
||||
.text2 {
|
||||
float: right;
|
||||
color: #999999;
|
||||
font-size: 28upx;
|
||||
margin-right: 5upx;
|
||||
margin-top: 2upx;
|
||||
}
|
||||
.text3 {
|
||||
font-size: 24upx;
|
||||
color: #999999;
|
||||
margin-left: 10upx;
|
||||
}
|
||||
image {
|
||||
float: right;
|
||||
width: 12upx;
|
||||
height: 22upx;
|
||||
margin-top: 12upx;
|
||||
margin-left: 10upx;
|
||||
}
|
||||
}
|
||||
.img_box {
|
||||
overflow: hidden;
|
||||
padding: 20upx 30upx;
|
||||
.addImg {
|
||||
width: 184upx;
|
||||
height: 184upx;
|
||||
background: #f2f2f2;
|
||||
// background-color: pink;
|
||||
border-radius: 20upx;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
image {
|
||||
width: 51upx;
|
||||
height: 42upx;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-top: 45upx;
|
||||
}
|
||||
p {
|
||||
font-size: 24upx;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: rgba(255,94,102,1);
|
||||
text-align: center;
|
||||
margin-top: 20upx;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scaleX(0.96);
|
||||
}
|
||||
}
|
||||
}
|
||||
.img_list {
|
||||
width: 184upx;
|
||||
height: 184upx;
|
||||
float: left;
|
||||
margin-right: 20upx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20upx;
|
||||
image,video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
video{
|
||||
position: relative;
|
||||
border-radius: 5upx;
|
||||
overflow: hidden;
|
||||
overflow: visible!important;
|
||||
.covers{ //遮挡层
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9990;
|
||||
}
|
||||
.imgs{
|
||||
width: 72upx;
|
||||
height: 72upx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 9999;
|
||||
transform: translate(-50% ,-50%);
|
||||
}
|
||||
.video_close{
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: -6upx;
|
||||
left: -6upx;
|
||||
border-radius: 50%;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
.close {
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
top: -6upx;
|
||||
left: -6upx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
/* 预览视频弹窗 */
|
||||
.mask {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.previewvideo {
|
||||
width: 100vw;
|
||||
height: 100vw;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
background-color: #000;
|
||||
z-index: 900;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.close {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: flex-end;
|
||||
position: absolute;
|
||||
top: 100upx;
|
||||
right: 20upx;
|
||||
z-index: 900;
|
||||
|
||||
image {
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
display: block;
|
||||
justify-content: center;
|
||||
margin-left: 30upx;
|
||||
margin-bottom: 20upx;
|
||||
border-radius: 50%;
|
||||
padding: 10upx;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.videos {
|
||||
height: 100vw;
|
||||
width: 100vw;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nowvideos {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="editaddress">
|
||||
<view class="content">
|
||||
<view class="row">
|
||||
<view class="nominal">收件人</view>
|
||||
<view class="input"><input placeholder="请输入收件人姓名" v-model="addressData.name" type="text"></input></view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nominal">电话号码</view>
|
||||
<view class="input"><input placeholder="请输入收件人电话号码" v-model="addressData.phone" type="number" maxlength="11"></input></view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nominal">所在地区</view>
|
||||
<view class="input selectcity" @tap="openPicker">
|
||||
<input placeholder="请选择省市区" disabled type="text" v-model="addressData.address"></input>
|
||||
<image src="/static/images/home/right.png" class="rights"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nominal">详细地址</view>
|
||||
<view class="input"><textarea style="font-size: 28upx;" v-model="addressData.moreAddres" auto-height="true" placeholder="输入详细地址" v-if="show == false"></textarea></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="save"><view class="btn" :style="'background:' + colors" @click="saveAddress">保存地址</view></view>
|
||||
<!-- 省市区选择 -->
|
||||
<setcity :show="show" @sureSelectArea="onsetCity" @hideShow="onhideShow"></setcity>
|
||||
</view>
|
||||
<loading v-if="isShow == true"></loading>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var app = getApp();
|
||||
import setcity from "../../../commponent/public/setCity/nyz_area_picker";
|
||||
import loading from "../../../commponent/public/loading";
|
||||
import {setPickaddress,setToaddress} from '@/utils/auth.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
colors: '',
|
||||
status:'',
|
||||
show: false,
|
||||
checked: false,
|
||||
isShow: true,
|
||||
addressData:{}
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
setcity,
|
||||
loading
|
||||
},
|
||||
props: {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
this.setData({
|
||||
colors: app.globalData.newColor,
|
||||
status: options.status,
|
||||
addressData: JSON.parse(options.address)
|
||||
});
|
||||
uni.setNavigationBarTitle({ //根据status判断是收件还是取件地址
|
||||
title: options.status==0?'编辑取件地址':'编辑收件地址'
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.setData({
|
||||
isShow: false
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {},
|
||||
methods: {
|
||||
openPicker() { //选择所在地区
|
||||
this.show = true
|
||||
},
|
||||
onhideShow() {
|
||||
this.show = false
|
||||
},
|
||||
onsetCity(e) { //设置省市区
|
||||
let data = e.detail.target.dataset;
|
||||
let address = data.province + data.city + data.area;
|
||||
this.show = false
|
||||
this.addressData.address = address
|
||||
},
|
||||
saveAddress(){ //模拟保存成功
|
||||
if(this.addressData.name == ''){
|
||||
uni.showToast({
|
||||
title:'姓名不能为空',
|
||||
icon:'none'
|
||||
})
|
||||
return
|
||||
}else if(this.addressData.phone == ''){
|
||||
uni.showToast({
|
||||
title:'手机号不能为空',
|
||||
icon:'none'
|
||||
})
|
||||
return
|
||||
}else if(this.addressData.address == ''){
|
||||
uni.showToast({
|
||||
title:'所在地区不能为空',
|
||||
icon:'none'
|
||||
})
|
||||
return
|
||||
}else if(this.addressData.moreAddres == ''){
|
||||
uni.showToast({
|
||||
title:'详细地址不能为空',
|
||||
icon:'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showToast({ //模拟保存成功
|
||||
title:'保存成功'
|
||||
})
|
||||
setTimeout(()=>{
|
||||
// 根据status的值来判断是取件地址还是收货地址
|
||||
if(this.status == 0){ //取件
|
||||
setPickaddress(this.addressData)
|
||||
}else{//收件
|
||||
setToaddress(this.addressData)
|
||||
}
|
||||
uni.navigateBack(-1)
|
||||
},1500)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.save {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 120upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.save view {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.save .btn {
|
||||
box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
|
||||
width: 70%;
|
||||
height: 80upx;
|
||||
border-radius: 80upx;
|
||||
background-color: #f23a3a;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 30upx;
|
||||
}
|
||||
|
||||
.save .btn .icon {
|
||||
height: 80upx;
|
||||
color: #fff;
|
||||
font-size: 30upx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 40upx;
|
||||
}
|
||||
|
||||
.content view {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content .row {
|
||||
width: 92%;
|
||||
margin: 0 4%;
|
||||
border-bottom: solid 1upx #eee;
|
||||
}
|
||||
|
||||
.content .row .nominal {
|
||||
width: 30%;
|
||||
height: 80upx;
|
||||
font-size: 28upx;
|
||||
font-family: Droid Sans Fallback;
|
||||
font-weight: 400;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content .row .input {
|
||||
width: 70%;
|
||||
padding: 20upx 0;
|
||||
align-items: center;
|
||||
font-size: 28upx;
|
||||
|
||||
}
|
||||
|
||||
.content .row .input input {
|
||||
font-size: 28upx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.content .row .switch {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.content .row .input textarea {
|
||||
min-height: 40upx;
|
||||
line-height: 40upx;
|
||||
}
|
||||
|
||||
.content .del_box {
|
||||
width: 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin-right: 30upx;
|
||||
}
|
||||
|
||||
.content .del {
|
||||
width: 240upx;
|
||||
height: 80upx;
|
||||
float: right;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 28upx;
|
||||
color: #F23A3A;
|
||||
margin: 0 auto;
|
||||
margin-top: 50upx;
|
||||
border-radius: 38upx;
|
||||
background-color: rgba(255, 0, 0, 0.05);
|
||||
border-bottom: solid 1upx #eee;
|
||||
}
|
||||
.selectcity input{
|
||||
width: 90%;
|
||||
}
|
||||
.selectcity image{
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,735 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="order">
|
||||
<!-- 收货地址 -->
|
||||
<view class="order_address">
|
||||
<image src="/static/images/home/bottom.png"></image>
|
||||
<view class="address_box">
|
||||
<view class="weizhi_icon">
|
||||
<text class="iconfont icon-dizhi" :style="'color:' + colors"></text>
|
||||
</view>
|
||||
<block>
|
||||
<view class="center">
|
||||
<view class="name">
|
||||
<text class="text1">张飞</text>
|
||||
<text class="phones">1829445646451</text>
|
||||
</view>
|
||||
<view class="address_name">北京市海淀区苏家坨乡前沙涧村15号</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品详情 -->
|
||||
<view v-for="(item, index) in orderList.goods" :key="index" class="goods">
|
||||
<view class="goods_data">
|
||||
<image :src="item.img"></image>
|
||||
<view class="goods_title">
|
||||
<view class="g_name">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="goods_sku">
|
||||
规格: {{item.goods_sku_text}}
|
||||
</view>
|
||||
<view class="price">
|
||||
<view class="t1" :style="'color:' + colors">￥{{item.money}}</view>
|
||||
<view class="t3">
|
||||
x{{item.number}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="morelist" style="border-bottom:none">
|
||||
<view class="title">
|
||||
<text class="quan" :style="'background:' + colors">券</text>
|
||||
<text>优惠券</text>
|
||||
</view>
|
||||
<view class="right_title" :style="'color:' + colors + ';font-size:24upx'">
|
||||
减20
|
||||
</view>
|
||||
</view>
|
||||
<!-- 单商品操作按钮 在订单状态为待评价时才会显示-->
|
||||
<view class="goods_btns" v-if="status == 3">
|
||||
<view class="btns" style="margin-right: 40upx;" @click="onafterSale(item)">
|
||||
申请售后
|
||||
</view>
|
||||
<view class="btns" @click="onevaluate(item)" :style="{borderColor:colors,color:colors}">
|
||||
去评价
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 核销码 -->
|
||||
<view class="order_ewm">
|
||||
<view class="ewm_title">我的核销码</view>
|
||||
<view class="center_ewm">
|
||||
<image src="/static/images/ewm.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 订单详情 -->
|
||||
<view class="order_more">
|
||||
<view class="morelist">
|
||||
<text class="title">商品总价</text>
|
||||
<view class="right_title">
|
||||
￥{{orderList.sumprice}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="morelist">
|
||||
<view class="title">
|
||||
<text class="quan" :style="'background:' + colors">运</text>
|
||||
<text>运费</text>
|
||||
</view>
|
||||
<view class="right_title">
|
||||
￥0
|
||||
</view>
|
||||
</view>
|
||||
<view class="morelist">
|
||||
<text class="title">实付款</text>
|
||||
<view class="right_title" :style="'color:' + colors + ';'">
|
||||
￥{{orderList.sumprice}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="morelist">
|
||||
<text class="title">订单编号</text>
|
||||
<view class="right_title">
|
||||
{{orderList.order_No}}
|
||||
<text class="copy" @click="onCopy(orderList.order_No)">复制</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="morelist">
|
||||
<text class="title">创建时间</text>
|
||||
<view class="right_title">
|
||||
2020-08-02 21:09:26
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips">
|
||||
<view class="tips_name">备注信息</view>
|
||||
<view class="textarea_box">
|
||||
<textarea placeholder="请输入备注信息" disabled="true" placeholder-class="font-size: 24upx" maxlength="-1" v-model="orderList.tips"></textarea>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom_btn" >
|
||||
<block v-if="status == 0">
|
||||
<view class="moneys">
|
||||
合计: <text :style="'color:' + colors + ';'">￥{{orderList.sumprice}}</text>
|
||||
</view>
|
||||
<view class="btns" :style="'color:' + colors + ';border:1upx solid ' + colors + ';margin-right:20upx'" @tap="cencalOrder">
|
||||
取消订单
|
||||
</view>
|
||||
<view class="btns" :style="'background:' + colors + ';'">
|
||||
继续支付
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="status == 1">
|
||||
<view class="btns" :style="'color:' + colors + ';border:1upx solid ' + colors + ';margin-right:20upx'" @tap="onRefund">
|
||||
申请退款
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="status == 2">
|
||||
<view class="btns" :style="'color:' + colors + ';border:1upx solid ' + colors + ';margin-right:20upx'" @tap="onRefund">
|
||||
申请退款
|
||||
</view>
|
||||
<view class="btns" :style="'background:' + colors + ';'">
|
||||
确认收货
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="status == 3">
|
||||
<view class="btns shouhou" @click="jumpSale">退款/售后</view>
|
||||
<view class="btns" :style="'background:' + colors + ';margin-left:20upx;'">再次购买</view>
|
||||
</block>
|
||||
<block v-if="status == 4">
|
||||
<view class="btns shouhou" @click="delOrder">删除订单</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<loading v-if="isShow == true"></loading>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var app = getApp();
|
||||
import loading from "../../commponent/public/loading";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
colors: '',
|
||||
status: 0,
|
||||
//订单状态
|
||||
isShow: true,
|
||||
orderList: {
|
||||
goods: [{
|
||||
title: 'DUNKINDONUTS唐恩都乐美国甜甜圈6个礼盒装 随机搭配6款',
|
||||
type: 1,
|
||||
goods_id: 201,
|
||||
number: 1,
|
||||
goods_sku_text: '醇黑巧克力【20枚】',
|
||||
img: 'http://img10.360buyimg.com/n1/jfs/t1/86401/35/12206/357766/5e43b59cE5a7aa4dd/0753be765166c195.jpg',
|
||||
money: '175.78',
|
||||
},
|
||||
{
|
||||
title: '农谣人 原味火山石烤肠1000g/约16根台式原味肠地道肠纯肉肠热狗肠台湾烤肠香肠烧烤肠半熟食火腿肠 台式原味地道肠1kg',
|
||||
type: 1,
|
||||
goods_id: 204,
|
||||
number: 1,
|
||||
goods_sku_text: '台式原味地道肠1kg',
|
||||
img: 'http://img10.360buyimg.com/n1/jfs/t1/118993/11/329/175715/5e8ac0afE94234346/3ceb1344cf34d655.jpg',
|
||||
money: '52.00 '
|
||||
},
|
||||
],
|
||||
type: 1,
|
||||
status: 0,
|
||||
order_No: 'AQWEAD45648974974456',
|
||||
shopp_Address: '北京市海淀区苏家坨乡前沙涧村',
|
||||
sumprice:'227.78',
|
||||
tips:"尽快发货"
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
loading
|
||||
},
|
||||
props: {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
let status = 0;
|
||||
if (options.status) {
|
||||
status = options.status;
|
||||
}
|
||||
this.setData({
|
||||
colors: app.globalData.newColor,
|
||||
status: status
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.setData({
|
||||
isShow: false
|
||||
});
|
||||
}, 600);
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {},
|
||||
methods: {
|
||||
cencalOrder(item) {
|
||||
//取消订单
|
||||
uni.showModal({
|
||||
title:'确认要取消该订单吗?',
|
||||
confirmColor:this.colors,
|
||||
success: (res) => {
|
||||
if(res.confirm){
|
||||
console.log('取消成功')
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
onRefund(item){
|
||||
// 申请退款
|
||||
uni.navigateTo({
|
||||
url: '/pages/views/order/cancelOrder?orderId'
|
||||
});
|
||||
},
|
||||
onCopy(value){ //复制订单号
|
||||
// #ifdef H5
|
||||
var input = document.createElement('input'); // 直接构建input
|
||||
input.value = value; // 设置内容
|
||||
document.body.appendChild(input); // 添加临时实例
|
||||
input.select(); // 选择实例内容
|
||||
document.execCommand('Copy'); // 执行复制
|
||||
document.body.removeChild(input); // 删除临时实例
|
||||
uni.showToast({
|
||||
title:'复制成功~',
|
||||
icon:'none'
|
||||
})
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
uni.setClipboardData({
|
||||
data:value,
|
||||
success:function(){
|
||||
uni.showToast({
|
||||
title:'复制成功~',
|
||||
icon:'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
onafterSale(item){ //申请售后
|
||||
uni.navigateTo({
|
||||
url:'/pages/views/order/afterType?goodData='+JSON.stringify(item)
|
||||
})
|
||||
},
|
||||
onevaluate(item){ //去评价
|
||||
uni.navigateTo({
|
||||
url:'/pages/views/order/evaluate/evaluate?goodData='+JSON.stringify(item)
|
||||
})
|
||||
},
|
||||
jumpSale(){ //退款售后
|
||||
uni.navigateTo({
|
||||
url:'/pages/views/order/afterSaleList'
|
||||
})
|
||||
},
|
||||
delOrder(){ //删除订单
|
||||
uni.showModal({
|
||||
title:'确认要删除该订单吗?',
|
||||
confirmColor:this.colors,
|
||||
success: (res) => {
|
||||
if(res.confirm){
|
||||
console.log('删除成功')
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
|
||||
.order {
|
||||
padding: 20upx 4%;
|
||||
}
|
||||
.mode{
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
padding: 0 20upx;
|
||||
border-radius: 10upx;
|
||||
align-items: center;
|
||||
margin-bottom: 20upx;
|
||||
box-shadow: 0upx 0upx 10upx #ddd;
|
||||
}
|
||||
.mode:active{
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.mode .text1{
|
||||
color: #999;
|
||||
font-size: 24upx;
|
||||
}
|
||||
.mode .text2{
|
||||
font-size: 24upx;
|
||||
color: #333;
|
||||
display: block;
|
||||
width: 50%;
|
||||
font-weight: bold;
|
||||
}
|
||||
.mode image{
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
display: block;
|
||||
}
|
||||
.order_address {
|
||||
height: 150upx;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 10upx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0upx 0upx 10upx #ddd;
|
||||
}
|
||||
|
||||
.order_address image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.address_box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
box-sizing: border-box;
|
||||
padding: 20upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.weizhi_icon text {
|
||||
font-size: 40upx;
|
||||
margin-left: 10upx;
|
||||
}
|
||||
|
||||
.address_box .center {
|
||||
margin-left: 20upx;
|
||||
}
|
||||
|
||||
.address_box .center .name {
|
||||
height: 60upx;
|
||||
line-height: 60upx;
|
||||
}
|
||||
|
||||
.address_box .center .name .text1 {
|
||||
font-size: 26upx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: inline-block;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
|
||||
.phones {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.address_box .address_name {
|
||||
font-size: 26upx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.noaddress {
|
||||
margin-left: 40upx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 26upx;
|
||||
}
|
||||
|
||||
.goods {
|
||||
background-color: #fff;
|
||||
margin-top: 20upx;
|
||||
box-shadow: 0upx 0upx 10upx #ddd;
|
||||
border-radius: 10upx;
|
||||
padding: 30upx 20upx;
|
||||
padding-bottom: 10upx;
|
||||
}
|
||||
|
||||
.goods_data {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.goods_data image {
|
||||
min-width: 150upx;
|
||||
max-width: 150upx;
|
||||
height: 150upx;
|
||||
display: block;
|
||||
border-radius: 10upx;
|
||||
}
|
||||
|
||||
.goods_title {
|
||||
margin-left: 20upx;
|
||||
line-height: 40upx;
|
||||
width: 100%;
|
||||
}
|
||||
.goods_title .price{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40upx;
|
||||
line-height: 40upx;
|
||||
margin-top: 20upx;
|
||||
position: relative;
|
||||
}
|
||||
.goods_title .price .t1{
|
||||
font-size: 30upx;
|
||||
display: block;
|
||||
}
|
||||
.goods_title .price .t2{
|
||||
font-size: 24upx;
|
||||
margin-left: 15upx;
|
||||
display: block;
|
||||
color: #999;
|
||||
}
|
||||
.goods_title .price .t3{
|
||||
float: right;
|
||||
font-size: 26upx;
|
||||
color: #999;
|
||||
position: absolute;
|
||||
right: 0upx;
|
||||
top: 0;
|
||||
}
|
||||
.goods_title .g_name {
|
||||
font-size: 26upx;
|
||||
font-weight: bold;
|
||||
max-height: 80upx;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.goods_title .goods_sku{
|
||||
color: #999;
|
||||
/* margin-top: 20upx; */
|
||||
}
|
||||
.numbers{
|
||||
/* text-align: right; */
|
||||
}
|
||||
.shop{
|
||||
margin-top: 20upx;
|
||||
font-size: 24upx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
}
|
||||
.order_more{
|
||||
padding: 0 2%;
|
||||
margin-top: 20upx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0upx 0upx 10upx #ddd;
|
||||
border-radius: 10upx;
|
||||
}
|
||||
.morelist{
|
||||
height: 70upx;
|
||||
line-height: 70upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1upx dashed #eee;
|
||||
}
|
||||
.morelist .title{
|
||||
color: #333;
|
||||
font-size: 26upx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.morelist .title .quan{
|
||||
font-size: 20upx;
|
||||
width: 35upx;
|
||||
height: 35upx;
|
||||
line-height: 36upx;
|
||||
text-align: center;
|
||||
border-radius: 8upx;
|
||||
margin-right: 10upx;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
.morelist .right_title{
|
||||
color: #999;
|
||||
font-size: 26upx;
|
||||
}
|
||||
.morelist .copy{
|
||||
font-size: 22upx;
|
||||
color: #888;
|
||||
background-color: #eee;
|
||||
height: 50upx;
|
||||
line-height: 50upx;
|
||||
padding: 0 20upx;
|
||||
border-radius: 10upx;
|
||||
margin-left: 20upx;
|
||||
display: inline-block;
|
||||
}
|
||||
.goods_btns{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 10upx;
|
||||
.btns{
|
||||
font-size: 24upx;
|
||||
text-align: center;
|
||||
color: #999999;
|
||||
padding: 5upx 15upx;
|
||||
border-radius: 8upx;
|
||||
border: 1upx solid #DDDDDD;
|
||||
}
|
||||
}
|
||||
.tips{
|
||||
padding: 10upx 0;
|
||||
margin-bottom: 120upx;
|
||||
padding-bottom: 20upx;
|
||||
}
|
||||
.tips .tips_name{
|
||||
font-size: 26upx;
|
||||
font-weight: bold;
|
||||
line-height: 60upx;
|
||||
}
|
||||
.textarea_box{
|
||||
min-height: 100upx;
|
||||
width: 100%;
|
||||
border: 1upx solid #eee;
|
||||
border-radius: 10upx;
|
||||
padding: 20upx;
|
||||
}
|
||||
.textarea_box textarea{
|
||||
font-size: 24upx;
|
||||
height: 150upx;
|
||||
}
|
||||
.bottom_btn{
|
||||
height: 100upx;
|
||||
width: 100vw;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
line-height: 100upx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0 30upx;
|
||||
z-index: 100;
|
||||
}
|
||||
.bottom_btn .moneys{
|
||||
font-size: 32upx;
|
||||
margin-right: 100upx;
|
||||
}
|
||||
.bottom_btn .btns{
|
||||
font-size: 26upx;
|
||||
height: 50upx;
|
||||
line-height: 50upx;
|
||||
padding: 0 20upx;
|
||||
text-align: center;
|
||||
border-radius: 8upx;
|
||||
margin-top: 30upx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
/* 优惠券 */
|
||||
.coupon{
|
||||
background-color: #fff;
|
||||
border-radius: 10upx 10upx 0 0;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: -1000upx;
|
||||
z-index: 150;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.coupon .buyong{
|
||||
line-height: 80upx;
|
||||
padding: 0 4%;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
}
|
||||
.mask{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #000;
|
||||
z-index: 10;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.scrolls{
|
||||
width: 100vw;
|
||||
height: 55vh;
|
||||
z-index: 500;
|
||||
}
|
||||
.shop{
|
||||
padding: 20upx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
box-shadow: 0upx 0upx 10upx #ddd;
|
||||
border-radius: 10upx;
|
||||
}
|
||||
.shop .shop_img{
|
||||
width: 120upx;
|
||||
height: 120upx;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8upx;
|
||||
}
|
||||
.shop_center{
|
||||
overflow: hidden;
|
||||
margin-left: 20upx;
|
||||
}
|
||||
.shop_center .shop_name{
|
||||
font-size: 28upx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
.shop_center .shop_address{
|
||||
font-size: 24upx;
|
||||
color: #333;
|
||||
margin-top: 40upx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.shoucang{
|
||||
width: 80upx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position:absolute;
|
||||
right: 20upx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.shoucang .sc_icons text{
|
||||
font-size: 45upx;
|
||||
color: #999;
|
||||
}
|
||||
.shoucang .sc_text{
|
||||
font-size: 22upx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
.order_ewm{
|
||||
width: 100%;
|
||||
height: 380upx;
|
||||
padding: 20upx 10upx;
|
||||
background-color: #fff;
|
||||
border-radius: 10upx;
|
||||
box-shadow: 0upx 0upx 10upx #ddd;
|
||||
margin-top: 20upx;
|
||||
}
|
||||
.ewm_title{
|
||||
height: 40upx;
|
||||
line-height: 40upx;
|
||||
font-size: 26upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.center_ewm{
|
||||
height: 300upx;
|
||||
width: 300upx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.center_ewm image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.shouhou {
|
||||
border: 1upx solid #ddd;
|
||||
color: #999!important;
|
||||
font-weight: normal!important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<view class="jieguo" :style="{background: colors}">
|
||||
<view class="place">
|
||||
</view>
|
||||
<view class="jieguo_box">
|
||||
<view class="success">
|
||||
<text class="iconfont icon-chenggong" :style="'color:' + colors"></text>
|
||||
</view>
|
||||
<view class="texts">
|
||||
<!-- 支付成功 -->
|
||||
订单创建成功
|
||||
</view>
|
||||
<!-- <view class="moneys">￥35.9</view> -->
|
||||
<view class="wancheng" @tap="onsuccess" :style="'color:' + colors + ';border-color:' + colors">完成</view>
|
||||
<view class="ewm" @tap="jumpUser">返回个人中心>>></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
var app = getApp();
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
colors: ""
|
||||
};
|
||||
},
|
||||
|
||||
components: {},
|
||||
props: {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
this.setData({
|
||||
colors: app.globalData.newColor
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {},
|
||||
methods: {
|
||||
onsuccess() {
|
||||
uni.switchTab({
|
||||
url: '/pages/views/tabBar/category'
|
||||
});
|
||||
},
|
||||
|
||||
jumpUser() {
|
||||
uni.switchTab({
|
||||
url: '/pages/views/tabBar/user'
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.jieguo{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
padding: 0 8%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.place{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.3), rgba(255,255,255,.5),#ffffff);
|
||||
z-index: 10;
|
||||
}
|
||||
.jieguo_box{
|
||||
width: 88%;
|
||||
background-color: #fff;
|
||||
height: 90vw;
|
||||
border-radius: 10upx;
|
||||
box-shadow: 0upx 0upx 10upx #999;
|
||||
padding: 20upx;
|
||||
z-index: 900;
|
||||
position: absolute;
|
||||
top: 150upx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.success{
|
||||
text-align: center;
|
||||
margin-top: 50upx;
|
||||
}
|
||||
.success text{
|
||||
font-size: 140upx;
|
||||
}
|
||||
.jieguo .texts, .moneys{
|
||||
text-align: center;
|
||||
font-size: 32upx;
|
||||
margin-top: 20upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.wancheng{
|
||||
width: 80%;
|
||||
height: 80upx;
|
||||
border: 2upx solid #3E7E8B;
|
||||
color: #3E7E8B;
|
||||
text-align: center;
|
||||
line-height: 80upx;
|
||||
border-radius: 10upx;
|
||||
margin: 0 auto;
|
||||
margin-top: 150upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.ewm{
|
||||
margin-top: 20upx;
|
||||
height: 40upx;
|
||||
line-height: 40upx;
|
||||
text-align: center;
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<view class="home">
|
||||
<!-- 顶部 -->
|
||||
<headers :colors="colors" :locations="locations" :swiperList="swiperList" ></headers>
|
||||
|
||||
<!-- title -->
|
||||
<view class="home-title grid col-3 text-center padding-top-sm text-sm">
|
||||
<view v-for="(item,index) in gridList" :ukey="index">
|
||||
<text class="cuIcon-evaluate_fill padding-right-xs "></text>
|
||||
{{item.tilte}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 超值卖场 -->
|
||||
<chaozhi></chaozhi>
|
||||
|
||||
<!-- 推荐分类菜单 与tab分类中不同 -->
|
||||
<classList></classList>
|
||||
|
||||
<!-- 推销活动 -->
|
||||
<activity></activity>
|
||||
|
||||
<!-- 秒杀四方格 -->
|
||||
<fourSquares></fourSquares>
|
||||
|
||||
<view class="m-3 text-lg padding-tb-sm">猜你喜欢</view>
|
||||
<goodList></goodList>
|
||||
|
||||
<image class="bottomTap" src="/static/images/new/caomei.gif" ></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getCartNumber} from '@/utils/auth.js'
|
||||
import { setTabBarBadge } from'@/utils/util.js'
|
||||
var app = getApp();
|
||||
import headers from '../../commponent/home/header';
|
||||
import chaozhi from '../../commponent/home/chaozhi';
|
||||
import classList from '../../commponent/home/classList';
|
||||
import activity from '../../commponent/home/activity';
|
||||
import fourSquares from '../../commponent/home/fourSquares';
|
||||
import goodList from '../../commponent/home/goodList';
|
||||
|
||||
import {
|
||||
getlocation
|
||||
} from '@/utils/auth.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
gridList:[{tilte:"新鲜食材"},{tilte:"天天低价"},{tilte:"售后无忧"}],
|
||||
swiperList: [{
|
||||
img: '/static/images/new/banner11.jpg'
|
||||
},{
|
||||
img: '/static/images/new/banner22.png'
|
||||
},{
|
||||
img: '/static/images/new/banner33.png'
|
||||
},{
|
||||
img: '/static/images/new/banner44.png'
|
||||
}],
|
||||
|
||||
colors: '',
|
||||
bottoms: '100',
|
||||
scrollShow: false, //是否显示悬浮菜单
|
||||
|
||||
locations: {
|
||||
|
||||
},
|
||||
loading: true,
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
components: {
|
||||
headers,
|
||||
chaozhi,
|
||||
classList,
|
||||
activity,
|
||||
fourSquares,
|
||||
goodList,
|
||||
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function(options) {
|
||||
// #ifdef APP-PLUS
|
||||
this.bottoms = '0' //在APP下 规格弹窗的位置发生变化
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function() {
|
||||
this.setData({
|
||||
colors: app.globalData.newColor
|
||||
});
|
||||
uni.setNavigationBarColor({ //设置标题栏颜色
|
||||
// backgroundColor: app.globalData.newColor,
|
||||
// frontColor: '#ffffff'
|
||||
});
|
||||
// #ifdef H5
|
||||
let locations = getlocation() //获取位置信息
|
||||
if (locations) {
|
||||
this.locations = locations
|
||||
}
|
||||
// #endif
|
||||
|
||||
let cartNumber = getCartNumber()|| 0
|
||||
setTabBarBadge(cartNumber)
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function() {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function() {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function() {
|
||||
// if (this.dataList.length >= 30) { //模拟上拉加载数据
|
||||
// this.loading = false
|
||||
// return
|
||||
// }
|
||||
// let data = this.dataList;
|
||||
// setTimeout(() => {
|
||||
// this.loading = true
|
||||
// this.dataList.push(...data);
|
||||
// }, 500)
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function() {},
|
||||
methods: {
|
||||
onPageScroll: function(e) {
|
||||
if (e.scrollTop >= 500) {
|
||||
this.setData({
|
||||
scrollShow: true
|
||||
});
|
||||
} else {
|
||||
this.setData({
|
||||
scrollShow: false
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.home {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
.home-title{
|
||||
color: rgb(158, 160, 166);
|
||||
border-radius-top: 20px;
|
||||
border-radius: 20px 20px 0 0;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
z-index: 99999;
|
||||
top: -10px;
|
||||
}
|
||||
.bottomTap{
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
right: 3%;
|
||||
z-index: 200;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="editaddress">
|
||||
<view class="content">
|
||||
<view class="row">
|
||||
<view class="nominal">收件人</view>
|
||||
<view class="input"><input placeholder="请输入收件人姓名" v-model="addressData.recipient" type="text"></input></view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nominal">电话号码</view>
|
||||
<view class="input"><input placeholder="请输入收件人电话号码" v-model="addressData.telephone" type="number" maxlength="11"></input></view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nominal">所在地区</view>
|
||||
<view class="input selectcity" @tap="openPicker">
|
||||
<input placeholder="请选择省市区" disabled type="text" v-model="addressData.address"></input>
|
||||
<image src="/static/images/home/right.png" class="rights"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nominal">详细地址</view>
|
||||
<view class="input"><textarea style="font-size: 28upx;" v-model="addressData.moreAddres" auto-height="true" placeholder="输入详细地址" v-if="show == false"></textarea></view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nominal" style="color: #999;margin-top: 10upx;">设为默认地址</view>
|
||||
<view class="input switch"><switch :color="colors" style="transform:scale(0.8)" @change="switchChange" :checked="addressData.isDefault == 1"></switch></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="save" @tap="addAddr"><view class="btn" :style="'background:' + colors">保存地址</view></view>
|
||||
<!-- 省市区选择 -->
|
||||
<setcity :show="show" @sureSelectArea="onsetCity" @hideShow="onhideShow"></setcity>
|
||||
</view>
|
||||
<loading v-if="isShow == true"></loading>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var app = getApp();
|
||||
import setcity from "../../../commponent/public/setCity/nyz_area_picker";
|
||||
import loading from "../../../commponent/public/loading";
|
||||
import { addAddr, editAddr} from '@/api/index.js'
|
||||
import { getUserInfo } from "@/utils/auth";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
colors: '',
|
||||
show: false,
|
||||
addressData: {
|
||||
"province": '',
|
||||
"city":'',
|
||||
"county": '',
|
||||
|
||||
"detail": '',
|
||||
"isDefault": 0 ,
|
||||
|
||||
"recipient": '',
|
||||
// "remark": "",
|
||||
"telephone": '',
|
||||
|
||||
name:'',
|
||||
phone:'',
|
||||
address:'',
|
||||
moreAddres:'',
|
||||
isdefult: 0,
|
||||
id:0
|
||||
},
|
||||
address: [],
|
||||
isShow: true
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
setcity,
|
||||
loading
|
||||
},
|
||||
props: {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
if(options.type == 'edit'){ //如果是编辑收货地址
|
||||
this.addressData = Object.assign(this.addressData, JSON.parse(options.address))
|
||||
this.addressData.moreAddres = this.addressData.detail.split(',')[1]
|
||||
this.addressData.address = this.addressData.detail.split(',')[0]
|
||||
this.address = [this.addressData.province, this.addressData.city, this.addressData.county]
|
||||
this.checked = this.addressData.isDefault == 1
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.setData({
|
||||
isShow: false,
|
||||
colors: app.globalData.newColor
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {},
|
||||
methods: {
|
||||
addAddr() {
|
||||
if ( this.address.length < 1 || !this.addressData.moreAddres || !this.addressData.recipient ||
|
||||
!this.addressData.telephone) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请填写信息'
|
||||
})
|
||||
return
|
||||
}
|
||||
const telReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
|
||||
if (!telReg.test(this.addressData.telephone)) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请填写正确手机号'
|
||||
})
|
||||
return
|
||||
}
|
||||
const params = {
|
||||
"province": this.address[0],
|
||||
"city": this.address[1],
|
||||
"county": this.address[2],
|
||||
"detail": this.address.join('') + ',' +this.addressData.moreAddres,
|
||||
"isDefault": this.checked ? 1 : 0 ,
|
||||
|
||||
"recipient": this.addressData.recipient,
|
||||
// "remark": "",
|
||||
"telephone": this.addressData.telephone,
|
||||
|
||||
"userId": getUserInfo().id
|
||||
}
|
||||
if (this.addressData.id) {
|
||||
params.id = this.addressData.id
|
||||
editAddr(params).then(res => {
|
||||
if (res.result) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '操作成功'
|
||||
})
|
||||
}
|
||||
uni.navigateBack()
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
addAddr(params).then(res => {
|
||||
if (res.result) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '操作成功'
|
||||
})
|
||||
}
|
||||
uni.navigateBack()
|
||||
})
|
||||
},
|
||||
openPicker() {
|
||||
console.log('执行')
|
||||
this.show = true
|
||||
},
|
||||
|
||||
onhideShow() {
|
||||
this.show = false
|
||||
console.log('执行了')
|
||||
},
|
||||
onsetCity(e) { //选中省市区
|
||||
let data = e.detail.target.dataset;
|
||||
this.address = [data.province ,data.city, data.area]
|
||||
this.show = false
|
||||
this.addressData.address = this.address.join('')
|
||||
},
|
||||
switchChange(e) {
|
||||
this.setData({
|
||||
checked: e.detail.value
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.save {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 120upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.save view {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.save .btn {
|
||||
box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
|
||||
width: 70%;
|
||||
height: 80upx;
|
||||
border-radius: 80upx;
|
||||
background-color: #f23a3a;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 30upx;
|
||||
}
|
||||
|
||||
.save .btn .icon {
|
||||
height: 80upx;
|
||||
color: #fff;
|
||||
font-size: 30upx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 40upx;
|
||||
}
|
||||
|
||||
.content view {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content .row {
|
||||
width: 92%;
|
||||
margin: 0 4%;
|
||||
border-bottom: solid 1upx #eee;
|
||||
}
|
||||
|
||||
.content .row .nominal {
|
||||
width: 30%;
|
||||
height: 80upx;
|
||||
font-size: 28upx;
|
||||
font-family: Droid Sans Fallback;
|
||||
font-weight: 400;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content .row .input {
|
||||
width: 70%;
|
||||
padding: 20upx 0;
|
||||
align-items: center;
|
||||
font-size: 28upx;
|
||||
|
||||
}
|
||||
|
||||
.content .row .input input {
|
||||
font-size: 28upx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.content .row .switch {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.content .row .input textarea {
|
||||
min-height: 40upx;
|
||||
line-height: 40upx;
|
||||
}
|
||||
|
||||
.content .del_box {
|
||||
width: 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin-right: 30upx;
|
||||
}
|
||||
|
||||
.content .del {
|
||||
width: 240upx;
|
||||
height: 80upx;
|
||||
float: right;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 28upx;
|
||||
color: #F23A3A;
|
||||
margin: 0 auto;
|
||||
margin-top: 50upx;
|
||||
border-radius: 38upx;
|
||||
background-color: rgba(255, 0, 0, 0.05);
|
||||
border-bottom: solid 1upx #eee;
|
||||
}
|
||||
.selectcity input{
|
||||
width: 90%;
|
||||
}
|
||||
.selectcity image{
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,315 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="myaddress">
|
||||
<view v-for="(item, index) in addressList" :key="index" class="order_address">
|
||||
<view class="address_box">
|
||||
<view class="weizhi_icon">
|
||||
<text class="iconfont icon-dizhi" :style="'color:' + colors"></text>
|
||||
</view>
|
||||
<view @click="onsetAddress(item)">
|
||||
<view class="center">
|
||||
<!-- v-if="item.isDefault == 1" -->
|
||||
<view class="moren">
|
||||
<text class="iconfont icon-moren" :style="'color:' + colors"></text>
|
||||
</view>
|
||||
<view class="name">
|
||||
<text class="text1">{{item.recipient}}</text>
|
||||
<text class="phones">{{item.telephone}}</text>
|
||||
</view>
|
||||
<view class="address_name">{{item.detail.split(',').join('')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="caozuo">
|
||||
<view class="del" @tap="delAddress(item,index)">
|
||||
<text class="iconfont icon-shanchu"></text>
|
||||
删除
|
||||
</view>
|
||||
<view class="edit" @tap="editAddress(item)">
|
||||
<text class="iconfont icon-bianji"></text>
|
||||
编辑
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<nodata :colors="colors" title="暂无收货地址" v-if="addressList.length == 0"></nodata>
|
||||
</view>
|
||||
<view class="save">
|
||||
<view class="btn" :style="'background:' + colors" @tap="addAddress">添加收货地址</view>
|
||||
</view>
|
||||
<loading v-if="isShow == true"></loading>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var app = getApp();
|
||||
import { getAddrList, delAddr } from '@/api/index.js'
|
||||
import loading from "../../commponent/public/loading";
|
||||
import {
|
||||
getUserInfo,
|
||||
setAddress
|
||||
} from '@/utils/auth.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
colors: '',
|
||||
addressList: [],
|
||||
isShow: true,
|
||||
type:''
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
loading
|
||||
},
|
||||
props: {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function(options) {
|
||||
|
||||
let type = options.type || ''
|
||||
this.setData({
|
||||
colors: app.globalData.newColor,
|
||||
type: type
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.setData({
|
||||
isShow: false
|
||||
});
|
||||
}, 600);
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function() {
|
||||
this.getAddrList()
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function() {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function() {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function() {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function() {},
|
||||
methods: {
|
||||
getAddrList() {
|
||||
const s = [
|
||||
{
|
||||
"rule": "eq",
|
||||
"type": "string",
|
||||
"dictCode": "",
|
||||
"val": getUserInfo().id,
|
||||
"field": "userId"
|
||||
}
|
||||
]
|
||||
const params = {
|
||||
pageNo:1,
|
||||
pageSize: 10,
|
||||
superQueryParams: encodeURI(JSON.stringify(s)),
|
||||
superQueryMatchType: 'and'
|
||||
}
|
||||
getAddrList(params).then(res => {
|
||||
this.addressList = res.result.records
|
||||
|
||||
})
|
||||
},
|
||||
editAddress(item) {
|
||||
//编辑收货地址
|
||||
uni.navigateTo({
|
||||
url: '/pages/views/user/address/edit?type=edit&address=' + JSON.stringify(item)
|
||||
});
|
||||
},
|
||||
|
||||
addAddress() {
|
||||
//添加收货地址
|
||||
uni.navigateTo({
|
||||
url: '/pages/views/user/address/edit?type=add'
|
||||
});
|
||||
},
|
||||
onsetAddress(item){ //选择收货地址后 返回上一层路由
|
||||
if(this.type="select"){
|
||||
setAddress(item)
|
||||
uni.navigateBack(-1)
|
||||
}
|
||||
},
|
||||
delAddress(item,index){
|
||||
uni.showModal({
|
||||
title:'提示',
|
||||
content:'确认要删除该地址吗?',
|
||||
confirmText:'删除',
|
||||
confirmColor:this.colors,
|
||||
success: (res) => {
|
||||
if(res.confirm){
|
||||
delAddr(item.id).then( res=> {
|
||||
uni.showToast({
|
||||
title:'删除成功~',
|
||||
icon:'none'
|
||||
})
|
||||
this.addressList.splice(index, 1)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.myaddress {
|
||||
padding: 10upx 4%;
|
||||
padding-bottom: 140upx;
|
||||
margin-top: 10upx;
|
||||
}
|
||||
|
||||
.order_address {
|
||||
height: 180upx;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 10upx;
|
||||
position: relative;
|
||||
box-shadow: 0upx 0upx 10upx #ddd;
|
||||
margin-bottom: 20upx;
|
||||
}
|
||||
|
||||
.order_address image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.address_box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: 10;
|
||||
box-sizing: border-box;
|
||||
padding: 20upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.weizhi_icon text {
|
||||
font-size: 40upx;
|
||||
margin-left: 10upx;
|
||||
}
|
||||
|
||||
.address_box .center {
|
||||
margin-left: 20upx;
|
||||
}
|
||||
|
||||
.address_box .center .name {
|
||||
height: 60upx;
|
||||
line-height: 60upx;
|
||||
}
|
||||
|
||||
.address_box .center .name .text1 {
|
||||
font-size: 26upx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: inline-block;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
|
||||
.phones {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.address_box .address_name {
|
||||
font-size: 26upx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.noaddress {
|
||||
margin-left: 40upx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 26upx;
|
||||
}
|
||||
|
||||
.caozuo {
|
||||
position: absolute;
|
||||
right: 20upx;
|
||||
display: flex;
|
||||
top: 20upx;
|
||||
}
|
||||
|
||||
.caozuo view {
|
||||
font-size: 24upx;
|
||||
color: #666;
|
||||
margin-left: 30upx;
|
||||
}
|
||||
|
||||
.caozuo view text {
|
||||
font-size: 24upx;
|
||||
}
|
||||
|
||||
.moren {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.moren text {
|
||||
font-size: 60upx;
|
||||
}
|
||||
|
||||
.save {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 120upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.save view {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.save .btn {
|
||||
box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
|
||||
width: 70%;
|
||||
height: 80upx;
|
||||
border-radius: 80upx;
|
||||
background-color: #f23a3a;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 30upx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<view class="withdrawal">
|
||||
<view class="withdrawl_top">
|
||||
<image src="/static/images/user/qb.png"></image>
|
||||
<view class="money">56.00</view>
|
||||
<view class="tips">(我的账户余额)</view>
|
||||
</view>
|
||||
<view class="minmoney">
|
||||
当前最小提现金额为150元
|
||||
</view>
|
||||
<view class="t_input">
|
||||
<view class="title">提现金额</view>
|
||||
<view class="inputs">
|
||||
<input placeholder="请输入提现金额" placeholder-style="font-size: 28upx; color: #999"></input>
|
||||
</view>
|
||||
<view class="all_btn" :style="'color:' + colors">全部提现</view>
|
||||
</view>
|
||||
<view class="jilu" @tap="jumprecord">
|
||||
查看提现记录>>
|
||||
</view>
|
||||
<view class="addclerk" :style="'background:' + colors" @tap="openEwm">
|
||||
确认提现
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var app = getApp();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
colors: ''
|
||||
};
|
||||
},
|
||||
|
||||
components: {},
|
||||
props: {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
this.setData({
|
||||
colors: app.globalData.newColor
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {},
|
||||
methods: {
|
||||
jumprecord() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/views/withdrawal/withdrawalrecord'
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #F5F5FA;
|
||||
}
|
||||
|
||||
.withdrawl_top {
|
||||
height: 408upx;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.withdrawl_top image {
|
||||
width: 220upx;
|
||||
height: 190upx;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-top: 60upx;
|
||||
}
|
||||
|
||||
.withdrawl_top .money {
|
||||
text-align: center;
|
||||
height: 60upx;
|
||||
line-height: 60upx;
|
||||
font-size: 50upx;
|
||||
color: #FF4643;
|
||||
margin-top: 20upx;
|
||||
}
|
||||
|
||||
.withdrawl_top .tips {
|
||||
text-align: center;
|
||||
font-size: 24upx;
|
||||
color: #7C7C7C;
|
||||
line-height: 50upx;
|
||||
}
|
||||
|
||||
.minmoney {
|
||||
padding: 0 4%;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
font-size: 26upx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: rgba(124, 124, 124, 1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
.t_input{
|
||||
padding: 20upx 4%;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.t_input .title{
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
width: 200upx;
|
||||
}
|
||||
.t_input .inputs{
|
||||
color: #333;
|
||||
font-size: 32upx;
|
||||
}
|
||||
.inputs input{
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.all_btn{
|
||||
font-size:24upx;
|
||||
font-family:Source Han Sans CN;
|
||||
font-weight:400;
|
||||
width: 150upx;
|
||||
}
|
||||
.jilu{
|
||||
height: 60upx;
|
||||
line-height: 60upx;
|
||||
padding: 0 4%;
|
||||
font-size:24upx;
|
||||
color: #999;
|
||||
font-family:Source Han Sans CN;
|
||||
font-weight:400;
|
||||
margin-top: 10upx;
|
||||
}
|
||||
.addclerk {
|
||||
width: 80%;
|
||||
height: 82upx;
|
||||
line-height: 82upx;
|
||||
border-radius: 15upx;
|
||||
font-size: 32upx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 30upx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: pink;
|
||||
}
|
||||
.addclerk:active{
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
page {
|
||||
background-color: #F5F5FA;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="withdrawalrecord">
|
||||
<view v-for="(item, index) in logList" :key="index" class="record_list">
|
||||
<view class="left">
|
||||
<view class="title">余额提现</view>
|
||||
<view class="time">2019-01-02 19:12:09</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
-8000
|
||||
</view>
|
||||
</view>
|
||||
<view class="nodata" v-if="logList.length >= 6">—— 到底啦 ——</view>
|
||||
</view>
|
||||
<nodata :colors="colors" title="暂无明细" v-if="logList.length == 0"></nodata>
|
||||
<loading v-if="isShow == true"></loading>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loading from "../../commponent/public/loading";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
logList: [1, 2, 3, 4, 5],
|
||||
isShow: true
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
loading
|
||||
},
|
||||
props: {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
setTimeout(() => {
|
||||
this.setData({
|
||||
isShow: false
|
||||
});
|
||||
}, 600);
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background-color: #F7F4F8;
|
||||
}
|
||||
.withdrawalrecord{
|
||||
margin-top: 10upx;
|
||||
}
|
||||
.record_list {
|
||||
padding: 30upx 4%;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1upx solid #eee;
|
||||
}
|
||||
|
||||
.record_list .title {
|
||||
font-size: 28upx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
line-height: 60upx;
|
||||
height: 60upx;
|
||||
}
|
||||
|
||||
.record_list .time {
|
||||
font-size: 24upx;
|
||||
color: #7C7C7C;
|
||||
}
|
||||
|
||||
.record_list .right {
|
||||
font-size: 36upx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FF4643;
|
||||
}
|
||||
.nodata{
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
font-size: 24upx;
|
||||
margin-top: 20upx;
|
||||
margin-bottom: 20upx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
|
||||
"rules": [{
|
||||
"action": "allow",
|
||||
"page": "*"
|
||||
}]
|
||||
}
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 8.4 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue