完善页面
This commit is contained in:
wangxiaowei
82
pages/finish/finish.vue
Normal file
82
pages/finish/finish.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<view class="wait">
|
||||
<view class="info u-text-center">
|
||||
<text class="title bold-500">出餐单号</text>
|
||||
</view>
|
||||
<view class="u-text-center nr number">
|
||||
号码
|
||||
</view>
|
||||
<view class="row-center u-m-t-54">
|
||||
<view class="border">
|
||||
0
|
||||
</view>
|
||||
<view class="border">
|
||||
2
|
||||
</view>
|
||||
<view class="border">
|
||||
4
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="btn text-fff u-text-center">
|
||||
取餐
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.wait {
|
||||
.info {
|
||||
margin: 242rpx 120rpx 58rpx;
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: rgba(0, 0, 0, .6);
|
||||
}
|
||||
}
|
||||
|
||||
.numer {
|
||||
color: #151515;
|
||||
}
|
||||
|
||||
.border {
|
||||
text-align: center;
|
||||
width: 67rpx;
|
||||
height: 68rpx;
|
||||
line-height: 68rpx;
|
||||
border: 2rpx solid #E7E7E7;
|
||||
color: #FE6004;
|
||||
font-size: 64rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.border:first-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.border:nth-child(2) {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
bottom: 106rpx;
|
||||
margin: 154rpx 64rpx 0;
|
||||
height: 76rpx;
|
||||
line-height: 76rpx;
|
||||
background: #FE6004;
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,72 +1,11 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="store u-flex u-row-between u-p-32">
|
||||
<view>
|
||||
<view class="lg bold-600 u-flex" @click="chooseStore">
|
||||
MEET轻食店
|
||||
<u-icon name="arrow-right" size="28" class="right-icon"></u-icon>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-8" @click="chooseAddress">
|
||||
<u-icon name="map" size="32"></u-icon>
|
||||
请选择收货地址
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<u-button shape="circle" :hair-line="false" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '36rpx'}" @click="signin">签到</u-button>
|
||||
</view>
|
||||
<view class="notice">
|
||||
<u-notice-bar type="none" :list="list" color="#fff" font-size="40" :volume-icon="false" padding="0"></u-notice-bar>
|
||||
</view>
|
||||
|
||||
<!-- 轮播图 -->
|
||||
<view class="swiper u-relative">
|
||||
<u-swiper height="524" :list="list" border-radius="0"></u-swiper>
|
||||
<view class="balance bg-white u-flex">
|
||||
<view class="u-flex u-row-center">
|
||||
<u-image :src="cloudPath + 'img/icon_balance.png'" width="52" height="52"></u-image>
|
||||
<view class="u-m-l-60 u-text-center">
|
||||
<view class="nr">0.00</view>
|
||||
<view class="text-default xs">余额</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-row-center">
|
||||
<u-image :src="cloudPath + 'img/icon_points.png'" width="52" height="52"></u-image>
|
||||
<view class="u-m-l-60 u-text-center">
|
||||
<view class="nr">0.00</view>
|
||||
<view class="text-default xs">积分</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-row-center">
|
||||
<u-image :src="cloudPath + 'img/icon_coupon.png'" width="52" height="52"></u-image>
|
||||
<view class="u-m-l-60 u-text-center">
|
||||
<view class="nr">0</view>
|
||||
<view class="text-default xs u-text-center">券</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 下单 -->
|
||||
<view class="order u-flex u-row-between">
|
||||
<view class="bg-white u-text-center" @click="buy">
|
||||
<view class="text-default xxl">预约下单</view>
|
||||
<view class="xs text-999">极速送达更便捷</view>
|
||||
<view class="u-flex u-row-center">
|
||||
<u-image :src="cloudPath + 'img/icon_p_order.png'" width="132" height="132"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white u-text-center">
|
||||
<view class="text-default xxl">现在点单</view>
|
||||
<view class="xs text-999">下单更便捷</view>
|
||||
<view class="u-flex u-row-center">
|
||||
<u-image :src="cloudPath + 'img/icon_order.png'" width="132" height="133" mode="aspectFit"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 活动图 -->
|
||||
<view class="mx20 u-m-b-64">
|
||||
<u-image :src="cloudPath + 'img/activity.png'" height="264"></u-image>
|
||||
<view>
|
||||
<view class="btn text-fff u-text-center lg fixed left-0 right-0" @tap="toBuy">立即下单</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -78,46 +17,21 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
image: "http://jianbing-media.stnav.com/frontend/img/banner.png",
|
||||
title: "昨夜星辰昨夜风，画楼西畔桂堂东",
|
||||
},
|
||||
],
|
||||
list: ['前方等待人数6人，正在制作XXX号，订单114578512563']
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
setTabbar()
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 选择门店
|
||||
chooseStore() {
|
||||
toBuy() {
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/shop/shop'
|
||||
// })
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/pages/store/choose_store'
|
||||
})
|
||||
},
|
||||
|
||||
// 选择收货地址
|
||||
chooseAddress() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/store/choose_store'
|
||||
})
|
||||
},
|
||||
|
||||
// 立即下单
|
||||
buy() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/store/store'
|
||||
})
|
||||
},
|
||||
|
||||
// 签到
|
||||
signin() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/signin/signin'
|
||||
url: '/pages/pay/pay'
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -126,43 +40,22 @@
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
.store {
|
||||
background-color: #FFFAFB;
|
||||
height: 108rpx;
|
||||
|
||||
.right-icon {
|
||||
font-weight: bold;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
height: 1624rpx;
|
||||
background: url(#{$cloudPath}img/banner.png) no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
.notice {
|
||||
padding-top: 94rpx;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 544rpx;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
.balance {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 20rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
|
||||
& > view {
|
||||
width: 33.33%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order {
|
||||
margin: 30rpx 20rpx;
|
||||
& > view {
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx 86rpx;
|
||||
}
|
||||
.btn {
|
||||
bottom: 106rpx;
|
||||
margin: 0 64rpx;
|
||||
height: 76rpx;
|
||||
line-height: 76rpx;
|
||||
background: #FE6004;
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,219 +0,0 @@
|
||||
<template>
|
||||
<view class="login">
|
||||
<view class="u-font-xl bold-600 u-padding-top-56">获取你的昵称、头像</view>
|
||||
|
||||
<view>
|
||||
<form @submit="doLogin">
|
||||
<view class="u-flex u-row-between avatar u-m-t-80">
|
||||
<text>头像</text>
|
||||
<view class="u-flex u-row-between flex1 u-m-l-30">
|
||||
<button
|
||||
style="border: none;"
|
||||
class="u-flex u-row-between w-full"
|
||||
hover-class="none"
|
||||
open-type="chooseAvatar"
|
||||
@chooseavatar="onChooseAvatar"
|
||||
>
|
||||
<!-- <u-image :src="cloudPath + 'img/avatar.jpeg'" width="100rpx" height="100rpx" shape="circle"></u-image> -->
|
||||
<u-image v-if="form.avatar" :src="form.avatar" width="100rpx" height="100rpx" shape="circle"></u-image>
|
||||
<view v-else="!form.avatar">点击授权头像</view>
|
||||
<u-icon name="arrow-right" color="#9F9EA4" size="32"></u-icon>
|
||||
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-row-between avatar u-m-t-80">
|
||||
<text>昵称</text>
|
||||
<view class="u-flex u-row-between flex1 u-m-l-30">
|
||||
<input
|
||||
:value="form.nickname"
|
||||
name="nickname"
|
||||
type="nickname"
|
||||
placeholder="请输入昵称"
|
||||
placeholder-style="color: #000;"
|
||||
/>
|
||||
<u-icon name="arrow-right" color="#9F9EA4" size="32"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu">
|
||||
<view class="u-m-b-32" >
|
||||
<button form-type="submit" class="submit-btn" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">允许</button>
|
||||
</view>
|
||||
<u-button hover-class="none" :customStyle="{color: '#000', border: 'none', padding: '16rpx 0'}" :plain="true" :hair-line="false" shape="circle">拒绝</u-button>
|
||||
</view>
|
||||
</form>
|
||||
|
||||
<view class="u-m-t-32 u-flex u-row-center">
|
||||
<u-checkbox v-model="form.isAgree" shape="circle" :active-color="themeColor">
|
||||
<view class="sm row-start">
|
||||
已阅读并同意
|
||||
<navigator :style="{color: themeColor}" hover-class="none" url="/pages/server_explan/server_explan?type=0">
|
||||
《服务协议》
|
||||
</navigator>
|
||||
和
|
||||
<navigator :style="{color: themeColor}" hover-class="none" url="/pages/server_explan/server_explan?type=1">
|
||||
《隐私政策》
|
||||
</navigator>
|
||||
</view>
|
||||
</u-checkbox>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapActions, mapGetters } from 'vuex'
|
||||
import { uploadFile } from "@/utils/tools";
|
||||
import {
|
||||
authLogin,
|
||||
updateUser
|
||||
} from '@/api/app'
|
||||
import { getWxCode, getUserInfo } from '@/utils/login'
|
||||
import { isWeixinClient, currentPage, client } from '@/utils/tools'
|
||||
import Cache from '@/utils/cache'
|
||||
import { BACK_URL } from '@/config/cachekey'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
avatar: '',
|
||||
nickname: '',
|
||||
isAgree: false
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations(['LOGIN', 'LOGOUT']),
|
||||
...mapActions(['getUser']),
|
||||
|
||||
// 选择头像
|
||||
onChooseAvatar(e) {
|
||||
const avatarUrl = e.detail.avatarUrl;
|
||||
if (!avatarUrl) {
|
||||
return;
|
||||
}
|
||||
uni.showLoading({
|
||||
title: "正在上传中...",
|
||||
mask: true,
|
||||
});
|
||||
uploadFile(avatarUrl).then((res) => {
|
||||
uni.hideLoading();
|
||||
this.form.avatar = res.url;
|
||||
}).catch(() => {
|
||||
uni.hideLoading();
|
||||
this.$toast({
|
||||
title: "上传失败",
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
// 登录
|
||||
async doLogin(e) {
|
||||
this.form.nickname = e.detail.value.nickname
|
||||
|
||||
if (!this.form.isAgree) {
|
||||
this.$toast({title: '请先阅读并同意服务协议和隐私政策'})
|
||||
return false
|
||||
}
|
||||
const {
|
||||
userInfo: { avatarUrl, nickName, gender }
|
||||
} = await getUserInfo()
|
||||
|
||||
uni.showLoading({
|
||||
title: '登录中',
|
||||
mask: true
|
||||
})
|
||||
|
||||
const wxCode = await getWxCode()
|
||||
const {code, data, msg} = await authLogin({
|
||||
code: wxCode,
|
||||
nickname: nickName || '', //支付宝小程序没有直接获取昵称
|
||||
headimgurl: avatarUrl,
|
||||
client
|
||||
})
|
||||
if (code == 1) {
|
||||
if (data.is_new_user) {
|
||||
// 新用户注册，这边可以预留个邀请码
|
||||
uni.hideLoading()
|
||||
this.loginData = data
|
||||
|
||||
this.handleSubmitInfo()
|
||||
} else {
|
||||
this.loginHandle(data)
|
||||
}
|
||||
} else {
|
||||
this.$toast({title: msg})
|
||||
}
|
||||
},
|
||||
|
||||
// 更新新注册的用户信息
|
||||
async handleSubmitInfo() {
|
||||
const loginData = this.loginData || {}
|
||||
const res = await updateUser({
|
||||
avatar: this.form.avatar,
|
||||
nickname: this.form.nickname
|
||||
}, loginData.token)
|
||||
|
||||
if (res.code == 1) {
|
||||
this.loginHandle(loginData)
|
||||
}
|
||||
},
|
||||
|
||||
// 登录结果处理
|
||||
async loginHandle(data) {
|
||||
this.LOGIN(data)
|
||||
uni.hideLoading()
|
||||
const inviteCode = Cache.get('INVITE_CODE')
|
||||
if (inviteCode) {
|
||||
inputInviteCode({
|
||||
code: inviteCode
|
||||
})
|
||||
}
|
||||
// #ifdef H5
|
||||
location.replace('/mobile' + (Cache.get(BACK_URL) || '/'))
|
||||
Cache.remove(BACK_URL)
|
||||
//#endif
|
||||
// #ifndef H5
|
||||
uni.navigateBack({
|
||||
success() {
|
||||
// 刷新上一页
|
||||
const { onLoad, options } = currentPage()
|
||||
onLoad && onLoad(options)
|
||||
}
|
||||
})
|
||||
//#endif
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.login {
|
||||
margin: 0 32rpx;
|
||||
|
||||
.avatar text {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background-color: #254062;
|
||||
border-radius: 200rpx;
|
||||
color: #fff;
|
||||
height: 81rpx;
|
||||
line-height: 81rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,198 +0,0 @@
|
||||
<template>
|
||||
<view class="login">
|
||||
<view class="u-flex u-row-center logo">
|
||||
<u-image :src="cloudPath + 'img/login-logo.png'" width="574rpx" height="432rpx"></u-image>
|
||||
</view>
|
||||
|
||||
<view class="u-text-center text-gray">
|
||||
<view>小程序需要登录注册才能使用相关功能，申请获取以下权限</view>
|
||||
<view class="u-m-t-20">获得你的公开信息(昵称、头像、手机号码等)</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-56">
|
||||
<!-- #ifdef MP -->
|
||||
<view class="u-m-b-32">
|
||||
<u-button @click="mpLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">快捷登录</u-button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view>
|
||||
<u-button @click="mobileLogin" hover-class="none" :customStyle="{color: themeColor, border: '1px solid ' + themeColor, padding: '16rpx 0'}" :plain="true" :hair-line="false" shape="circle">手机号登录/注册</u-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-32 u-flex u-row-center">
|
||||
<view>
|
||||
<u-checkbox v-model="form.allow" shape="circle" :active-color="themeColor">
|
||||
<view class="sm row-start">
|
||||
已阅读并同意
|
||||
</view>
|
||||
</u-checkbox>
|
||||
</view>
|
||||
|
||||
<view class="u-flex protocol">
|
||||
<navigator :style="{color: themeColor}" hover-class="none" url="/pages/server_explan/server_explan?type=0">
|
||||
《服务协议》
|
||||
</navigator>
|
||||
和
|
||||
<navigator :style="{color: themeColor}" hover-class="none" url="/pages/server_explan/server_explan?type=1">
|
||||
《隐私政策》
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<mplogin v-model="mpLoginPopup" @close="mpLoginPopup = false" @update="handleSubmitInfo"/>
|
||||
<mobile-login v-model="mobilePopup" @close="mobilePopup = false" @update="handleSubmitMobile"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapActions, mapGetters } from 'vuex'
|
||||
import { uploadFile } from "@/utils/tools";
|
||||
import {
|
||||
authLogin,
|
||||
updateUser,
|
||||
mobileLogin
|
||||
} from '@/api/app'
|
||||
import { getWxCode, getUserInfo } from '@/utils/login'
|
||||
import { isWeixinClient, currentPage, client } from '@/utils/tools'
|
||||
import Cache from '@/utils/cache'
|
||||
import { BACK_URL } from '@/config/cachekey'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
allow: false
|
||||
},
|
||||
loginData: {},
|
||||
mpLoginPopup: false,
|
||||
mobilePopup: false
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations(['LOGIN', 'LOGOUT']),
|
||||
...mapActions(['getUser']),
|
||||
|
||||
// 小程序快捷登录
|
||||
async mpLogin() {
|
||||
if (!this.form.allow) {
|
||||
this.$toast({
|
||||
title: "请您先阅读并同意服务协议和隐私政策",
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
const {
|
||||
userInfo: { avatarUrl, nickName, gender }
|
||||
} = await getUserInfo()
|
||||
|
||||
uni.showLoading({
|
||||
title: '登录中',
|
||||
mask: true
|
||||
})
|
||||
|
||||
const wxCode = await getWxCode()
|
||||
const {code, data, msg} = await authLogin({
|
||||
code: wxCode,
|
||||
nickname: nickName || '', //支付宝小程序没有直接获取昵称
|
||||
headimgurl: avatarUrl,
|
||||
client
|
||||
})
|
||||
if (code == 1) {
|
||||
if (data.is_new_user) {
|
||||
uni.hideLoading()
|
||||
this.mpLoginPopup = true
|
||||
this.loginData = data
|
||||
} else {
|
||||
this.loginHandle(data)
|
||||
}
|
||||
} else {
|
||||
this.$toast({title: msg})
|
||||
}
|
||||
},
|
||||
|
||||
// 更新新注册的用户信息
|
||||
async handleSubmitInfo(e) {
|
||||
const loginData = this.loginData || {}
|
||||
const res = await updateUser(e, loginData.token)
|
||||
|
||||
if (res.code == 1) {
|
||||
this.loginHandle(loginData)
|
||||
}
|
||||
},
|
||||
|
||||
// 手机登录
|
||||
mobileLogin() {
|
||||
if (!this.form.allow) {
|
||||
return this.$toast({
|
||||
title: "请您先阅读并同意服务协议和隐私政策",
|
||||
})
|
||||
}
|
||||
this.mobilePopup = true
|
||||
},
|
||||
|
||||
// 更新新注册的用户信息
|
||||
async handleSubmitMobile(e) {
|
||||
mobileLogin({
|
||||
mobile: e.mobile
|
||||
}).then((res) => {
|
||||
if (res.code == 1) {
|
||||
this.loginHandle(res.data)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 登录结果处理
|
||||
async loginHandle(data) {
|
||||
this.LOGIN(data)
|
||||
uni.hideLoading()
|
||||
const inviteCode = Cache.get('INVITE_CODE')
|
||||
if (inviteCode) {
|
||||
inputInviteCode({
|
||||
code: inviteCode
|
||||
})
|
||||
}
|
||||
// #ifdef H5
|
||||
location.replace('/mobile' + (Cache.get(BACK_URL) || '/'))
|
||||
Cache.remove(BACK_URL)
|
||||
//#endif
|
||||
// #ifndef H5
|
||||
uni.navigateBack({
|
||||
success() {
|
||||
// 刷新上一页
|
||||
const { onLoad, options } = currentPage()
|
||||
onLoad && onLoad(options)
|
||||
}
|
||||
})
|
||||
//#endif
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['appConfig']),
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.login {
|
||||
margin: 0 64rpx;
|
||||
|
||||
.logo {
|
||||
padding-top: 150rpx;
|
||||
}
|
||||
|
||||
.protocol {
|
||||
margin-top: -4rpx;
|
||||
margin-left: -20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,121 +0,0 @@
|
||||
<template>
|
||||
<view class="login">
|
||||
<view class="title">手机号登录</view>
|
||||
|
||||
<view>
|
||||
<u-form :model="form" ref="form">
|
||||
<u-form-item label="+86" class="mobile">
|
||||
<u-input v-model="form.mobile" placeholder="请输入电话"/>
|
||||
</u-form-item>
|
||||
<u-form-item>
|
||||
<u-input v-model="form.code" placeholder="请输入验证码"></u-input>
|
||||
<view slot="right">
|
||||
<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
|
||||
@change="codeChange"></u-verification-code>
|
||||
<u-button size="mini" shape="circle" hover-class="none" @tap="getCode">{{tips}}</u-button>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-32">
|
||||
<u-button @click="handleLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">登录/注册</u-button>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-32 u-flex u-row-center">
|
||||
<u-checkbox v-model="form.checked" @change="allowProtocol" shape="circle" :active-color="themeColor">
|
||||
<view class="sm row-start">
|
||||
已阅读并同意
|
||||
<navigator :style="{color: themeColor}" hover-class="none" url="/pages/server_explan/server_explan?type=0">
|
||||
《服务协议》
|
||||
</navigator>
|
||||
和
|
||||
<navigator :style="{color: themeColor}" hover-class="none" url="/pages/server_explan/server_explan?type=1">
|
||||
《隐私政策》
|
||||
</navigator>
|
||||
</view>
|
||||
</u-checkbox>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
mobile: '',
|
||||
code: '',
|
||||
checked: false
|
||||
},
|
||||
seconds: 60,
|
||||
tips: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 更改验证码按钮提示语
|
||||
codeChange(text) {
|
||||
this.tips = text;
|
||||
},
|
||||
|
||||
// 获取验证码
|
||||
getCode() {
|
||||
if(this.$refs.uCode.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
this.$u.toast('验证码已发送');
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode.start();
|
||||
}, 2000);
|
||||
} else {
|
||||
this.$u.toast('倒计时结束后再发送');
|
||||
}
|
||||
},
|
||||
|
||||
// 是否同意登录协议
|
||||
allowProtocol() {
|
||||
|
||||
},
|
||||
|
||||
handleLogin() {
|
||||
const {mobile, code, checked} = this.form
|
||||
if (!this.$u.test.mobile(mobile)) {
|
||||
return this.$u.toast('请检查手机号码格式！')
|
||||
}
|
||||
|
||||
if (!code) {
|
||||
return this.$u.toast('请输入验证码！')
|
||||
}
|
||||
|
||||
if (!checked) {
|
||||
return this.$u.toast('请输入验证码！')
|
||||
}
|
||||
console.log(123123)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.login {
|
||||
margin: 0 64rpx;
|
||||
|
||||
.title {
|
||||
font-size: 56rpx;
|
||||
padding-top: 190rpx;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
margin-top: 96rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
161
pages/my/my.vue
161
pages/my/my.vue
@ -1,161 +0,0 @@
|
||||
<template>
|
||||
<view class="my u-relative">
|
||||
<view class="my-bg">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="u-text-center text-fff lg" :style="{paddingTop: statusBar + 'px'}">我的</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="u-p-t-60 px32 row-between" @click="toProfile">
|
||||
<view class="row u-col-top text-fff">
|
||||
<view>
|
||||
<u-avatar :src="cloudPath + 'img/icon_avatar.png'" mode="square" size="112"></u-avatar>
|
||||
</view>
|
||||
<view class="u-m-l-32 nr u-m-10">
|
||||
<view>用户昵称</view>
|
||||
<view class="u-m-t-16">18749957626</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<u-icon name="arrow-right" size="40" color="#fff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="block px32">
|
||||
<view class="bg-white u-m-t-34 balance row-between br16 u-p-l-22 u-p-r-22 box-shadown">
|
||||
<view class="u-flex u-row-center" @click="toWallet">
|
||||
<u-image :src="cloudPath + 'img/icon_balance.png'" width="52" height="52"></u-image>
|
||||
<view class="u-m-l-60 u-text-center">
|
||||
<view class="nr">0.00</view>
|
||||
<view class="xs">余额</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<u-line class="u-line" direction="col" length="47"></u-line>
|
||||
</view>
|
||||
<view class="u-flex u-row-center">
|
||||
<u-image :src="cloudPath + 'img/icon_points.png'" width="52" height="52"></u-image>
|
||||
<view class="u-m-l-60 u-text-center">
|
||||
<view class="nr">0.00</view>
|
||||
<view class="xs">积分</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<u-line class="u-line" direction="col" length="47"></u-line>
|
||||
</view>
|
||||
<view class="u-flex u-row-center">
|
||||
<u-image :src="cloudPath + 'img/icon_coupon.png'" width="52" height="52"></u-image>
|
||||
<view class="u-m-l-60 u-text-center">
|
||||
<view class="nr">0</view>
|
||||
<view class="xs u-text-center">券</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-white u-m-t-32 service br16 u-p-t-32 u-p-l-22 u-p-r-22 box-shadown">
|
||||
<view class="nr bold-600">服务功能</view>
|
||||
<view>
|
||||
<u-grid :col="4" :border="false">
|
||||
<u-grid-item>
|
||||
<u-image :src="cloudPath + 'img/icon_my_points.png'" width="64" height="64"></u-image>
|
||||
<view class="grid-text mt10">积分商城</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<u-image :src="cloudPath + 'img/icon_my_coupon.png'" width="64" height="64"></u-image>
|
||||
<view class="grid-text mt10">我的优惠券</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<u-image :src="cloudPath + 'img/icon_my_setting.png'" width="64" height="64"></u-image>
|
||||
<view class="grid-text mt10">设置</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<u-image :src="cloudPath + 'img/icon_my_service.png'" width="64" height="64"></u-image>
|
||||
<view class="grid-text mt10">联系客服</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 活动图 -->
|
||||
<view class="br16 u-m-t-32">
|
||||
<u-image :src="cloudPath + 'img/activity.png'" height="264"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
console.log(uni.getSystemInfoSync())
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 跳转个人信息
|
||||
toProfile() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/profile'
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转我的钱包
|
||||
toWallet() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/wallet'
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
statusBar() {
|
||||
return uni.getSystemInfoSync().statusBarHeight + 10
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
|
||||
.my-bg {
|
||||
background-image: url(#{$cloudPath}img/my_bg1.png);
|
||||
height: 588rpx;
|
||||
}
|
||||
|
||||
.block {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
/* #ifdef MP-WEIXIN*/
|
||||
top: 410rpx;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef MP-WEIXIN*/
|
||||
top: 228rpx;
|
||||
/* #endif */
|
||||
|
||||
background-color: #F6F6F6;
|
||||
border-top-left-radius: 40rpx;
|
||||
border-top-right-radius: 40rpx;
|
||||
}
|
||||
|
||||
.balance {
|
||||
height: 132rpx;
|
||||
}
|
||||
|
||||
.service {
|
||||
height: 249rpx;
|
||||
}
|
||||
|
||||
.box-shadown {
|
||||
box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
</style>
|
||||
@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-m-t-34">
|
||||
<view class="row-center">
|
||||
<u-avatar :src="cloudPath + 'img/icon_avatar.png'" mode="square" size="142"></u-avatar>
|
||||
</view>
|
||||
<view class="nr text-default u-text-center u-m-t-16">
|
||||
点击更换头像
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class=" u-m-l-62 u-m-r-62">
|
||||
<view class="nr row-between u-col-center u-m-t-48">
|
||||
<view>昵称</view>
|
||||
<view class="flex1 u-m-l-80 row u-row-between u-col-center">
|
||||
<view>杨阳洋</view>
|
||||
<view>
|
||||
<u-image :src="cloudPath + 'img/icon_arrow_right.png'" width="44" height="44"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="nr row-between u-col-center u-m-t-48">
|
||||
<view>手机号</view>
|
||||
<view class="flex1 u-m-l-80 row u-row-between u-col-center">
|
||||
<view>{{formatPhone()}}</view>
|
||||
<view>
|
||||
<u-image :src="cloudPath + 'img/icon_arrow_right.png'" width="44" height="44"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fixed left-0 right-0 save">
|
||||
<u-button @click="mpLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">保存</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatPhone() {
|
||||
const phone = '15005837859'
|
||||
return phone.substring(0, 3) + '****' + phone.substring(7);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.save {
|
||||
bottom: calc(52rpx + env(safe-area-inset-bottom));
|
||||
height: 76rpx;
|
||||
background-color: #212526;
|
||||
color: #fff;
|
||||
border-radius: 100rpx;
|
||||
margin: 0 64rpx;
|
||||
}
|
||||
</style>
|
||||
@ -1,104 +0,0 @@
|
||||
<template>
|
||||
<view class="wallet">
|
||||
<view class="bg"></view>
|
||||
<view class="block">
|
||||
<view class="bg-white balance u-m-l-16 u-m-r-16 br24 column-center">
|
||||
<view>账户余额(元)</view>
|
||||
<view class="u-m-t-14 bold-600 xxl">￥ 0.00</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-white wallet-btn u-m-t-24 u-m-l-16 u-m-r-16 row-between br24">
|
||||
<view>
|
||||
<navigator hover-class="none" url="/pages/recharge/balance" class="row">
|
||||
<u-image :src="cloudPath + 'img/icon_my_wallet.png'" width="56" height="56"></u-image>
|
||||
<text class="u-m-l-18 nr">充值</text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view>
|
||||
<u-line color="#EEE" direction="col" length="60"/>
|
||||
</view>
|
||||
<view>
|
||||
<navigator hover-class="none" url="/pages/recharge/balance" class="row">
|
||||
<u-image :src="cloudPath + 'img/icon_my_wallet_record.png'" width="56" height="56"></u-image>
|
||||
<text class="u-m-l-18 nr">充值记录</text>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list bg-white br16 u-p-32">
|
||||
<view class="lg">钱包明细</view>
|
||||
<view class="u-m-t-16">
|
||||
<view class="u-m-b-16">
|
||||
<view class="nr row-between">
|
||||
<view>消费</view>
|
||||
<view class="deduct">-2000</view>
|
||||
</view>
|
||||
<view class="date xs u-m-t-16">2022-12-24 16:32:44</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-b-16">
|
||||
<view class="nr row-between">
|
||||
<view>消费</view>
|
||||
<view class="deduct">-2000</view>
|
||||
</view>
|
||||
<view class="date xs u-m-t-16">2022-12-24 16:32:44</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-b-16">
|
||||
<view class="nr row-between">
|
||||
<view>消费</view>
|
||||
<view class="deduct">-2000</view>
|
||||
</view>
|
||||
<view class="date xs u-m-t-16">2022-12-24 16:32:44</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.wallet {
|
||||
position: relative;
|
||||
}
|
||||
.bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #517AAD;
|
||||
height: 320rpx;
|
||||
}
|
||||
|
||||
.block {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.balance {
|
||||
height: 209rpx;
|
||||
}
|
||||
|
||||
.wallet-btn {
|
||||
height: 150rpx;
|
||||
padding: 0 100rpx;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 22rpx 34rpx;
|
||||
height: 962rpx;
|
||||
box-shadow: 0rpx 6rpx 28rpx 4rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.deduct {
|
||||
color: rgba(0, 0, 0, 0.6)
|
||||
}
|
||||
|
||||
.date {
|
||||
color: rgba(0, 0, 0, 0.4)
|
||||
}
|
||||
</style>
|
||||
@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<view class="order">
|
||||
<view>
|
||||
<u-tabs :list="list" :is-scroll="false" :current="current" @change="tabChange" :active-color="themeColor" height="92"></u-tabs>
|
||||
</view>
|
||||
<view class="mx20 u-m-t-20">
|
||||
<order-list :type="type" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getConfig } from '@/api/app'
|
||||
import { orderType } from '@/utils/type'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
name: '全部',
|
||||
type: orderType.ALL
|
||||
},
|
||||
{
|
||||
name: '待付款',
|
||||
type: orderType.WAIT_PAY
|
||||
},
|
||||
{
|
||||
name: '未制作',
|
||||
type: orderType.NOT_MADE
|
||||
},
|
||||
{
|
||||
name: '已完成',
|
||||
type: orderType.FINISH
|
||||
},
|
||||
{
|
||||
name: '退款',
|
||||
type: orderType.REFUND
|
||||
}
|
||||
],
|
||||
current: 0,
|
||||
type: orderType.ALL
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
methods: {
|
||||
tabChange(index) {
|
||||
this.current = index
|
||||
this.type = this.list[index].type
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@ -1,146 +0,0 @@
|
||||
<template>
|
||||
<view class="u-m-l-32 u-m-r-32">
|
||||
<view class="u-p-32 br16 bg-white u-m-t-16">
|
||||
滨江区XXX门店
|
||||
</view>
|
||||
|
||||
<view class="bg-white u-p-32 u-m-t-36 br8">
|
||||
<view class="row u-col-top">
|
||||
<view>
|
||||
<u-image :src="cloudPath + 'img/banner.png'" width="124" height="124" border-radius="8"></u-image>
|
||||
</view>
|
||||
<view>
|
||||
<view class="u-font-32 u-m-l-16">
|
||||
<text class="bold-600">煎饼果子套餐</text>
|
||||
<text class="u-font-24 u-m-l-8">x1</text>
|
||||
</view>
|
||||
<view class="sm text-999 u-m-l-16 u-m-t-8">
|
||||
<text>味浓芳香</text>
|
||||
<text class="u-m-l-8 u-m-r-8">|</text>
|
||||
<text>味浓芳香</text>
|
||||
<text class="u-m-l-8 u-m-r-8">|</text>
|
||||
<text>味浓芳香</text>
|
||||
</view>
|
||||
<view class="u-m-l-16 u-m-t-8 row">
|
||||
<view>
|
||||
<price-format color="#FF4A18" :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
||||
</view>
|
||||
<view class="u-m-l-8">
|
||||
<price-format :lineThrough="true" color="#C0C0C0" :subscriptSize="22" :firstSize="22" :secondSize="22" :price="16.9"></price-format>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="row-end">
|
||||
<u-button class="u-m-r-24" @click="mobileLogin" hover-class="none" :customStyle="{height: '46rpx', color: '#454545', border: '1px solid #454545', borderRadius: '8rpx', padding: '0 8rpx', fontSize: '24rpx'}" :plain="true" :hair-line="false">再来一单</u-button>
|
||||
<u-button @click="mobileLogin" hover-class="none" :customStyle="{height: '46rpx', color: '#454545', border: '1px solid #454545', borderRadius: '8rpx', padding: '0 8rpx', fontSize: '24rpx'}" :plain="true" :hair-line="false">申请售后</u-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-white u-p-32 u-m-t-32">
|
||||
<view class="row-between">
|
||||
<view class="nr">商品总价</view>
|
||||
<view>
|
||||
<price-format color="#000" :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-24 u-m-b-24">
|
||||
<u-line color="#E5E6EB" />
|
||||
</view>
|
||||
|
||||
<view class="row-between mt10">
|
||||
<view>订单运费</view>
|
||||
<view>￥130.00</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-24 u-m-b-24">
|
||||
<u-line color="#E5E6EB" />
|
||||
</view>
|
||||
|
||||
<view class="row-between mt10">
|
||||
<view>优惠券</view>
|
||||
<view class="primary">
|
||||
<price-format :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-24 u-m-b-24">
|
||||
<u-line color="#E5E6EB" />
|
||||
</view>
|
||||
|
||||
<view class="row-between mt10">
|
||||
<view>实付款</view>
|
||||
<view class="primary">
|
||||
<price-format :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-white u-p-32 u-m-t-40 br8">
|
||||
<view class="bold-600 u-font-28">订单信息</view>
|
||||
<view class="text-attr u-m-t-16">
|
||||
<view class="u-m-t-8 row-between">
|
||||
<view>订单编号：</view>
|
||||
<view>134213234122321232123</view>
|
||||
</view>
|
||||
<view class="u-m-t-8 row-between">
|
||||
<view>支付方式：</view>
|
||||
<view>微信支付</view>
|
||||
</view>
|
||||
<view class="u-m-t-8 row-between">
|
||||
<view>下单时间：</view>
|
||||
<view>2022-11-10 15:26:07</view>
|
||||
</view>
|
||||
<view class="u-m-t-8 row-between">
|
||||
<view>付款时间：</view>
|
||||
<view>2022-11-10 15:26:07</view>
|
||||
</view>
|
||||
<view class="u-m-t-8 row-between">
|
||||
<view>发货时间：</view>
|
||||
<view>2022-11-10 15:26:07</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fixed row-end u-text-center btn-group bg-white u-p-t-20">
|
||||
<view class="mr20">
|
||||
<u-button @click="mobileLogin" hover-class="none" :customStyle="{width: '160rpx', height: '80rpx', color: themeColor, border: '1px solid ' + themeColor, padding: '16rpx 0', borderRadius: '8rpx'}" :plain="true" :hair-line="false">查看物流</u-button>
|
||||
</view>
|
||||
<view>
|
||||
<u-button @click="mpLogin" hover-class="none" :customStyle="{width: '160rpx', height: '80rpx', backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0', borderRadius: '8rpx'}" :hair-line="false">确认收货</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F6F8FA;
|
||||
}
|
||||
|
||||
.text-attr {
|
||||
color: #86909C;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
& > view {
|
||||
height: 100rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,86 +0,0 @@
|
||||
<template>
|
||||
<view class="u-m-l-32 u-m-r-32">
|
||||
<view class="u-m-t-48">
|
||||
<text class="u-font-40 bold-600">未付款</text>
|
||||
<text class="u-m-l-18">请在09分钟56秒内完成支付</text>
|
||||
</view>
|
||||
|
||||
<view class="bg-white u-p-32 u-m-t-40 br8">
|
||||
<view class="row u-col-top">
|
||||
<view>
|
||||
<u-image :src="cloudPath + 'img/banner.png'" width="124" height="124" border-radius="8"></u-image>
|
||||
</view>
|
||||
<view class="bold-600 u-font-32 u-m-l-16">煎饼果子套餐</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-32">
|
||||
<view class="row-between text-attr">
|
||||
<view>商品总价</view>
|
||||
<view>￥130.00</view>
|
||||
</view>
|
||||
|
||||
<view class="row-between text-attr mt10">
|
||||
<view>运费</view>
|
||||
<view>￥130.00</view>
|
||||
</view>
|
||||
|
||||
<view class="row-between mt10">
|
||||
<view class="bold-600 u-font-28">需支付</view>
|
||||
<view class="primary">￥130.00</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-white u-p-32 u-m-t-40 br8">
|
||||
<view class="bold-600 u-font-28">保温盒地址</view>
|
||||
<view class="text-attr u-m-t-16">
|
||||
<view>孙婉宛</view>
|
||||
<view class="u-m-t-8">15271435646</view>
|
||||
<view class="u-m-t-8">站前北街4号顺义供电公司北50米</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-white u-p-32 u-m-t-40 br8">
|
||||
<view class="bold-600 u-font-28">订单信息</view>
|
||||
<view class="text-attr u-m-t-16">
|
||||
<view>买家昵称：434343</view>
|
||||
<view class="u-m-t-8">订单编号：134213234122321232123</view>
|
||||
<view class="u-m-t-8">下单时间：2022-11-10 15:26:07</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fixed row u-text-center btn-group">
|
||||
<view class="flex1 bg-white">取消订单</view>
|
||||
<view class="flex1 bg-default text-fff">立即支付</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.text-attr {
|
||||
color: #86909C;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
|
||||
& > view {
|
||||
height: 100rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,146 +0,0 @@
|
||||
<template>
|
||||
<view class="px32">
|
||||
<view class="bg-white br16 p24 row u-m-t-32">
|
||||
<view>
|
||||
<u-image :src="cloudPath + 'img/banner.png'" width="260" height="172"></u-image>
|
||||
</view>
|
||||
<view class="ml20 flex1">
|
||||
<view class="nr bold-600">煎饼果子</view>
|
||||
<view class="text-999 mt10">周一指周日可用</view>
|
||||
<view class="mt20 row-between">
|
||||
<view class="row">
|
||||
<view class="primary">
|
||||
<price-format :price="12.9" :subscriptSize="22" :firstSize="40" :secondSize="32"></price-format>
|
||||
</view>
|
||||
<view class="u-m-l-8">
|
||||
<price-format :lineThrough="true" color="#C0C0C0" :subscriptSize="22" :firstSize="24" :secondSize="24" :price="16.9"></price-format>
|
||||
</view>
|
||||
</view>
|
||||
<view class="num nr">X1</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-white br16 p24 u-m-t-32">
|
||||
<view>
|
||||
备注
|
||||
</view>
|
||||
<view class="flex1 u-m-t-16 mask">
|
||||
xxxx
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-white br16 p24 u-m-t-32 nr row-between" @click="appointmentTime">
|
||||
<view>预约时间</view>
|
||||
<view class="row">
|
||||
<view class="u-m-r-10">16:00-16:30</view>
|
||||
<u-icon name="arrow-right" size="32"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="bg-white br16 p24 u-m-t-32 nr">
|
||||
<view class="row-between">
|
||||
<view class="row-center">
|
||||
<u-icon name="weixin-circle-fill" color="#28C445" size="80"></u-icon>
|
||||
<view class="u-m-l-16 lg">微信</view>
|
||||
</view>
|
||||
|
||||
<view class="flex1 row-end">
|
||||
<u-radio-group v-model="pay.weixin">
|
||||
<u-radio shape="circle" :active-color="themeColor"></u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<view class="bg-white br16 p24 u-m-t-32 nr">
|
||||
<view class="row-between">
|
||||
<view class="row-center">
|
||||
<u-icon name="zhifubao-circle-fill" color="#1477FE" size="80"></u-icon>
|
||||
<view class="u-m-l-16 lg">支付宝</view>
|
||||
</view>
|
||||
|
||||
<view class="flex1 row-end">
|
||||
<u-radio-group v-model="pay.alipay">
|
||||
<u-radio shape="circle" :active-color="themeColor"></u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="fixed bg-white row-between px48 u-padding-top-20 u-padding-bottom-20">
|
||||
<view class="column u-text-center">
|
||||
<view class="row-center">
|
||||
<view class="count">共1件</view>
|
||||
<view class="u-m-l-8">合计：</view>
|
||||
<view class="primary" style="margin-top: -8rpx;">
|
||||
<price-format :price="12.9" :subscriptSize="34" :firstSize="56" :secondSize="34"></price-format>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-l-64 flex1">
|
||||
<u-button hover-class="none"
|
||||
:customStyle="{height: '92rpx', backgroundColor: themeColor, color: '#fff', border: 'none', paddingTop: '8rpx'}"
|
||||
:hair-line="false"
|
||||
shape="circle">
|
||||
去支付
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
<appointment-time v-model="timePopup" @close="timePopup = false" @update="handleSubmitMobile"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
timePopup: false,
|
||||
pay: {
|
||||
weixin: 0,
|
||||
alipay: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
//#ifdef MP-WEIXIN
|
||||
this.pay.weixin = 1
|
||||
//#endif
|
||||
|
||||
//#ifdef MP-ALIPAY
|
||||
this.pay.alipay = 1
|
||||
//#endif
|
||||
},
|
||||
methods: {
|
||||
appointmentTime() {
|
||||
this.timePopup = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.num {
|
||||
color: #4E5969;
|
||||
}
|
||||
|
||||
.mask {
|
||||
color: #86909C;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.count {
|
||||
color: #86909C;
|
||||
}
|
||||
</style>
|
||||
59
pages/pay/pay.vue
Normal file
59
pages/pay/pay.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<view class="pay">
|
||||
<view class="text-fff u-text-center">
|
||||
<view class="title">煎饼果子</view>
|
||||
<view class="u-p-t-18 row-center">
|
||||
<view>好吃</view>
|
||||
<view class="round bg-white"></view>
|
||||
<view>美味</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="erCode">
|
||||
<view class="u-text-center u-p-t-52 nr bold-400">
|
||||
<view>微信扫一扫 向我付款</view>
|
||||
<view class="erCode-img row-center">
|
||||
<u-image :src="cloudPath + 'img/ercode.png'" width="399" height="395"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-text-center u-m-t-56 bold-400">
|
||||
点此刷新
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pay {
|
||||
height: 1624rpx;
|
||||
background: url(#{$cloudPath}img/pay_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
|
||||
.title {
|
||||
padding-top: 222rpx;
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.round {
|
||||
margin: 0 28rpx;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.erCode {
|
||||
height: 746rpx;
|
||||
background: url(#{$cloudPath}img/icon_coupon_app_bg.png) no-repeat;
|
||||
background-size: cover;
|
||||
margin: 112rpx 68rpx;
|
||||
.erCode-img {
|
||||
padding-top: 108rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,179 +0,0 @@
|
||||
<template>
|
||||
<view class="index home-bg" :style="[navBackground]">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="true">
|
||||
<u-navbar
|
||||
:border-bottom="false"
|
||||
:is-fixed="false"
|
||||
custom-class="home-bg"
|
||||
:background="navBackground"
|
||||
:is-back="true"
|
||||
backText=" "
|
||||
:title="title"
|
||||
title-color="#fff"
|
||||
backIconColor="#fff"
|
||||
>
|
||||
</u-navbar>
|
||||
</u-sticky>
|
||||
<!-- #endif -->
|
||||
|
||||
|
||||
<view class="row-center balance" :style="{paddingTop: topSpace + 'px'}">
|
||||
<view class="u-text-center w-full">
|
||||
<view class="text-fff" style="font-size: 96rpx;">0</view>
|
||||
<view class="text-fff nr">充值余额</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content u-relative u-m-l-32 u-m-r-32" style="margin-top: 132rpx;">
|
||||
<view class="input row-center br16">
|
||||
<view class="input-money">
|
||||
<u-input placeholder="输入金额: 0" placeholder-style="color: #254062;" :custom-style="{backgroundColor: 'transparent'}" input-align="center"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-38">
|
||||
<view class="sm u-m-b-20 bold-400">选择充值套餐</view>
|
||||
<view class="grid-container">
|
||||
<view :class="['item', {'active': selectIndex === 0}]">
|
||||
<view class="xs text-666">充值</view>
|
||||
<view class="text-333 md u-m-t-4">￥5</view>
|
||||
<view class="text-666 xxs u-m-t-2">赠送11元</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-56">
|
||||
<view class="sm u-m-b-20 bold-400">加赠券 价值10元</view>
|
||||
<view class="grid-container u-m-t-18">
|
||||
<view class="coupon u-text-center">
|
||||
<view class="sm text-666">赠券1张</view>
|
||||
<view class="text-333 md u-m-t-28">
|
||||
<price-format color="#FF0000" :price="10" :subscriptSize="22" :firstSize="52"></price-format>
|
||||
</view>
|
||||
<view class="text-666 sm u-m-t-30">满10元可用</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-70 u-p-10">
|
||||
<view class="sm u-m-b-20 bold-400">充值说明</view>
|
||||
<view class="text-999">1. 账户充值仅限在线方式支付，充值金额实时到账；</view>
|
||||
<view class="text-999">2. 有问题请联系客服；</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-42 u-p-b-20">
|
||||
<u-button @click="mpLogin" hover-class="none" :customStyle="{height: '76rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx'}" :hair-line="false">立即充值</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '充值余额',
|
||||
statusBarHeight: 0, // 状态栏高度
|
||||
bgImageHeight: 244 ,// 背景图高度，单位px，根据实际情况调整
|
||||
selectIndex: 0,
|
||||
backText: '',
|
||||
topSpace: 0
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.statusBarHeight = systemInfo.statusBarHeight
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.topSpace = (80 - this.statusBarHeight)
|
||||
// #endif
|
||||
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
this.topSpace = (80 + 44)
|
||||
// #endif
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 跳转个人信息
|
||||
toProfile() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/profile'
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转我的钱包
|
||||
toWallet() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/wallet'
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
navBackground() {
|
||||
return {
|
||||
'background-image': `url(${this.cloudPath}img/icon_recharge_bg.png)`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.index {
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.home-bg {
|
||||
background: url(#{$cloudPath}img/icon_recharge_bg.png) no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 124rpx;
|
||||
background: #D3E0F1;
|
||||
border: 2rpx solid #254062;
|
||||
}
|
||||
|
||||
.input-money {
|
||||
width: 180rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 209rpx;
|
||||
height: 155rpx;
|
||||
background: #F5F5F5;
|
||||
border: 1rpx solid #F5F5F5;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
padding: 20rpx 20rpx 12rpx 20rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #F3F8FF;
|
||||
border: 1rpx solid #254062;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.coupon {
|
||||
width: 207rpx;
|
||||
height: 196rpx;
|
||||
background: url(#{$cloudPath}img/coupon_bg1.png) no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
& > view:first-child {
|
||||
color: #845F2E;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="bg-white u-m-32 u-p-32 br16 block">
|
||||
<view class="nr">充值金额</view>
|
||||
<view class="u-m-t-16">
|
||||
<text class="price">5.0</text>
|
||||
<text class="bold-400 nr u-m-l-16">元</text>
|
||||
</view>
|
||||
<view class="u-m-t-32 xs">
|
||||
<text class="recharge">充值金额：</text>
|
||||
<text>5元</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-white u-m-32 u-p-32 br16 block">
|
||||
<view class="nr">选择支付方式</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="row-between u-m-t-32">
|
||||
<view class="row-center">
|
||||
<u-icon name="weixin-circle-fill" color="#28C445" size="80"></u-icon>
|
||||
<view class="u-m-l-16 lg">微信</view>
|
||||
</view>
|
||||
|
||||
<view class="flex1 row-end">
|
||||
<u-radio-group v-model="pay.weixin">
|
||||
<u-radio shape="circle" :active-color="themeColor"></u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<view class="row-between u-m-t-32">
|
||||
<view class="row-center">
|
||||
<u-icon name="zhifubao-circle-fill" color="#1477FE" size="80"></u-icon>
|
||||
<view class="u-m-l-16 lg">支付宝</view>
|
||||
</view>
|
||||
|
||||
<view class="flex1 row-end">
|
||||
<u-radio-group v-model="pay.alipay">
|
||||
<u-radio shape="circle" :active-color="themeColor"></u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
|
||||
<view class="fixed left-0 right-0 bottom-0 u-m-64">
|
||||
<u-button @click="pay" hover-class="none" :customStyle="{height: '76rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx'}" :hair-line="false">立即支付</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pay: {
|
||||
weixin: 0,
|
||||
alipay: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pay() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.block {
|
||||
box-shadow: 0rpx 10rpx 10rpx -6rpx rgba(0,0,0,0.1), 0rpx 16rpx 20rpx 2rpx rgba(0,0,0,0.06), 0rpx 6rpx 28rpx 4rpx rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.unit {
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
.recharge {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
</style>
|
||||
@ -1,138 +0,0 @@
|
||||
<template>
|
||||
<view class="u-m-l-32 u-m-r-32">
|
||||
<view class="u-p-32 br16 bg-white u-m-t-16">
|
||||
滨江区XXX门店
|
||||
</view>
|
||||
|
||||
<view class="bg-white u-p-32 u-m-t-36 br8">
|
||||
<view class="row u-col-top">
|
||||
<view>
|
||||
<u-image :src="cloudPath + 'img/banner.png'" width="124" height="124" border-radius="8"></u-image>
|
||||
</view>
|
||||
<view>
|
||||
<view class="u-font-32 u-m-l-16">
|
||||
<text class="bold-600">煎饼果子套餐</text>
|
||||
<text class="u-font-24 u-m-l-8">x1</text>
|
||||
</view>
|
||||
<view class="sm text-999 u-m-l-16 u-m-t-8">
|
||||
<text>味浓芳香</text>
|
||||
<text class="u-m-l-8 u-m-r-8">|</text>
|
||||
<text>味浓芳香</text>
|
||||
<text class="u-m-l-8 u-m-r-8">|</text>
|
||||
<text>味浓芳香</text>
|
||||
</view>
|
||||
<view class="u-m-l-16 u-m-t-8 row">
|
||||
<view>
|
||||
<price-format color="#FF4A18" :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
||||
</view>
|
||||
<view class="u-m-l-8">
|
||||
<price-format :lineThrough="true" color="#C0C0C0" :subscriptSize="22" :firstSize="22" :secondSize="22" :price="16.9"></price-format>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-white u-p-32 u-m-t-32">
|
||||
<view class="row-between">
|
||||
<view class="nr">商品总价</view>
|
||||
<view>
|
||||
<price-format color="#000" :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-24 u-m-b-24">
|
||||
<u-line color="#E5E6EB" />
|
||||
</view>
|
||||
|
||||
<view class="row-between mt10">
|
||||
<view>订单运费</view>
|
||||
<view>￥130.00</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-24 u-m-b-24">
|
||||
<u-line color="#E5E6EB" />
|
||||
</view>
|
||||
|
||||
<view class="row-between mt10">
|
||||
<view>优惠券</view>
|
||||
<view class="primary">
|
||||
<price-format :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-24 u-m-b-24">
|
||||
<u-line color="#E5E6EB" />
|
||||
</view>
|
||||
|
||||
<view class="row-between mt10">
|
||||
<view>实付款</view>
|
||||
<view class="primary">
|
||||
<price-format :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-white u-p-32 u-m-t-40 br8">
|
||||
<view class="bold-600 u-font-28">订单信息</view>
|
||||
<view class="text-attr u-m-t-16">
|
||||
<view class="u-m-t-8 row-between">
|
||||
<view>订单编号：</view>
|
||||
<view>134213234122321232123</view>
|
||||
</view>
|
||||
<view class="u-m-t-8 row-between">
|
||||
<view>支付方式：</view>
|
||||
<view>微信支付</view>
|
||||
</view>
|
||||
<view class="u-m-t-8 row-between">
|
||||
<view>下单时间：</view>
|
||||
<view>2022-11-10 15:26:07</view>
|
||||
</view>
|
||||
<view class="u-m-t-8 row-between">
|
||||
<view>付款时间：</view>
|
||||
<view>2022-11-10 15:26:07</view>
|
||||
</view>
|
||||
<view class="u-m-t-8 row-between">
|
||||
<view>发货时间：</view>
|
||||
<view>2022-11-10 15:26:07</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fixed row-end u-text-center btn-group bg-white u-p-t-20">
|
||||
<view>
|
||||
<u-button @click="mpLogin" hover-class="none" :customStyle="{width: '160rpx', height: '80rpx', backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0', borderRadius: '8rpx'}" :hair-line="false">确认退款</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F6F8FA;
|
||||
}
|
||||
|
||||
.text-attr {
|
||||
color: #86909C;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
& > view {
|
||||
height: 100rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,99 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="main">
|
||||
<u-parse :html="content" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getServerProto,
|
||||
getPrivatePolicy,
|
||||
getAfterSaleGuar
|
||||
} from '@/api/app';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: ""
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function(options) {
|
||||
let {type} = options;
|
||||
type = parseInt(type); // 0 ==> 服务协议 1 ==> 隐私政策 2 ==> 售后保障
|
||||
|
||||
let title = ''
|
||||
if (type == 0) {
|
||||
title = '服务协议'
|
||||
} else if (type == 1) {
|
||||
title = '隐私政策'
|
||||
}
|
||||
|
||||
uni.setNavigationBarTitle({
|
||||
title
|
||||
});
|
||||
|
||||
switch (type) {
|
||||
case 0:
|
||||
this.getServerProtoFun();
|
||||
break;
|
||||
|
||||
case 1:
|
||||
this.getPrivatePolicyFun();
|
||||
break;
|
||||
|
||||
case 2:
|
||||
this.getAfterSaleGuarFun();
|
||||
break;
|
||||
|
||||
default:
|
||||
this.getServerProtoFun();
|
||||
break;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 服务协议
|
||||
getServerProtoFun() {
|
||||
getServerProto().then(res => {
|
||||
if (res.code == 1) {
|
||||
setTimeout(() => {
|
||||
this.content = res.data;
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 隐私协议
|
||||
getPrivatePolicyFun() {
|
||||
getPrivatePolicy().then(res => {
|
||||
if (res.code == 1) {
|
||||
setTimeout(() => {
|
||||
this.content = res.data;
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 售后保障
|
||||
getAfterSaleGuarFun() {
|
||||
getAfterSaleGuar().then(res => {
|
||||
if (res.code == 1) {
|
||||
setTimeout(() => {
|
||||
this.content = res.data;
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.main {
|
||||
padding: 20rpx;
|
||||
}
|
||||
</style>
|
||||
@ -1,84 +1,30 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="shop">
|
||||
<view>
|
||||
<u-swiper :list="list" height="500" border-radius="0" mode="number" indicator-pos="bottomRight"></u-swiper>
|
||||
</view>
|
||||
|
||||
<view class="bg-white mx24 px24 u-m-t-24 u-padding-top-20 u-padding-bottom-20 br24">
|
||||
<view class="nr">煎饼果子套餐</view>
|
||||
<view class="mt10 row u-row-between">
|
||||
<view class="row">
|
||||
<view class="primary">
|
||||
<price-format :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
||||
</view>
|
||||
<view class="sale u-text-center primary u-m-l-12">0折</view>
|
||||
<view class="primary u-m-l-12">
|
||||
<price-format :lineThrough="true" color="#999" :subscriptSize="22" :firstSize="22" :secondSize="22" :price="16.9"></price-format>
|
||||
<view class="shop">
|
||||
<view class="bg">
|
||||
<view class="grid list">
|
||||
<view class="bg-white item br16" v-for="(item, index) in 10">
|
||||
<view class="u-relative">
|
||||
<u-image :src="cloudPath + 'img/banner.png'" width="336" height="336" border-radius="16rpx 16rpx 0 0"></u-image>
|
||||
<view class="tag u-absolute top-0 left-0 text-fff sm">
|
||||
1号柜
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-999">已售66</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-20 u-m-b-20">
|
||||
<u-line color="#eee" />
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
<text>须知</text>
|
||||
<text class="text-999 ml20">周一至周日可用</text>
|
||||
</view>
|
||||
|
||||
<view class="row-between mt20">
|
||||
<view>
|
||||
<text>保障</text>
|
||||
<text class="text-999 ml20">随时退 过期自动退</text>
|
||||
<view class="u-p-t-16 u-p-l-16 u-p-r-16 u-m-b-20">
|
||||
<view class="u-line-2">
|
||||
<view class="title">孜然煎饼果子套餐孜然煎饼果子套餐孜然煎饼果子套餐孜然煎饼果子套餐孜然煎饼果子套餐</view>
|
||||
</view>
|
||||
<view>
|
||||
<u-button @click="chooseSpec" hover-class="none"
|
||||
:customStyle="{width: '116rpx', height: '46rpx', fontSize: '24rpx', backgroundColor: themeColor, color: '#fff', border: 'none', paddingTop: '8rpx'}"
|
||||
:hair-line="false"
|
||||
shape="circle">
|
||||
选规格
|
||||
</u-button>
|
||||
<view class="row-between u-m-t-20">
|
||||
<view>
|
||||
<price-format color="#FF0000" :price="121.99" :subscriptSize="20" :firstSize="36" :secondSize="36"></price-format>
|
||||
</view>
|
||||
<view>
|
||||
<u-icon name="plus-circle-fill" color="#FE6004" size="54"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-24">
|
||||
<view class="u-m-l-48 nr">详情</view>
|
||||
<view class="bg-white mx24 px24 u-m-t-24 u-padding-top-20 u-padding-bottom-20 br24">
|
||||
<u-image :src="cloudPath + 'img/banner.png'" height="600"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-24">
|
||||
<view class="u-m-l-48 nr">购买须知</view>
|
||||
<view class="bg-white mx24 px24 u-m-t-24 u-padding-top-20 u-padding-bottom-20 br24">
|
||||
这里是购买须知的内容
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fixed bg-white row-between px48 u-padding-top-20 u-padding-bottom-20">
|
||||
<view class="column u-text-center">
|
||||
<view class="row-center">
|
||||
<u-image :src="cloudPath + 'img/icon_store.png'" width="48" height="48"></u-image>
|
||||
</view>
|
||||
<view>门店</view>
|
||||
</view>
|
||||
<view class="u-m-l-64 flex1">
|
||||
<u-button hover-class="none"
|
||||
:customStyle="{height: '92rpx', fontSize: '24rpx', backgroundColor: themeColor, color: '#fff', border: 'none', paddingTop: '8rpx'}"
|
||||
:hair-line="false"
|
||||
shape="circle">
|
||||
立即购买
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<shop-spec v-model="showSpec" @close="showSpec = false"></shop-spec>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -86,22 +32,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
image: "http://jianbing-media.stnav.com/frontend/img/banner.png",
|
||||
title: "昨夜星辰昨夜风，画楼西畔桂堂东",
|
||||
},
|
||||
{
|
||||
image: "http://jianbing-media.stnav.com/frontend/img/banner.png",
|
||||
title: "身无彩凤双飞翼，心有灵犀一点通",
|
||||
}
|
||||
],
|
||||
showSpec: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseSpec() {
|
||||
this.showSpec = true
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -109,20 +40,35 @@
|
||||
|
||||
<style lang="scss">
|
||||
.shop {
|
||||
padding-bottom: 180rpx;
|
||||
.sale {
|
||||
background-color: #FEFBEA;
|
||||
width: 100rpx;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
.bg {
|
||||
height: 633rpx;
|
||||
background: url(#{$cloudPath}img/banner.png) no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding-top: 406rpx;
|
||||
padding-bottom: 60rpx;
|
||||
margin: 0 32rpx;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 336rpx;
|
||||
|
||||
.tag {
|
||||
width: 120rpx;
|
||||
height: 54rpx;
|
||||
border-radius: 16rpx 0 16rpx 0;
|
||||
background: linear-gradient( 139deg, #FFBF5F 0%, #FF9A62 100%);
|
||||
padding: 6rpx 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
</style>
|
||||
@ -13,7 +13,7 @@
|
||||
</view>
|
||||
<view class="u-m-l-16">
|
||||
<view>煎饼果子套餐</view>
|
||||
<view class="sm text-999 u-m-t-8 attr u-text-center u-p-l-16 u-p-r-16 u-p-6-8 u-p-b-8">
|
||||
<view class="sm text-999 u-m-t-8 attr u-text-center u-p-l-16 u-p-r-16 u-p-6-8 u-p-b-8" @tap="showSpec = true">
|
||||
<text>味浓芳香</text>
|
||||
<text class="u-m-l-8 u-m-r-8">|</text>
|
||||
<text>味浓芳香</text>
|
||||
@ -39,14 +39,6 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view v-if="!isLogin" class="login column-center u-m-t-80">
|
||||
<image class="img-null" :src="cloudPath + 'img/cart_null.png'" width="1200" height="1200" mode="aspectFill"></image>
|
||||
<view class="muted mt20">登录后才能查看购物车哦</view>
|
||||
<navigator class="mt20 br60 row-center btn text-default" url="/pages/login/login" hover-class="none">
|
||||
<text>去登录</text>
|
||||
</navigator>
|
||||
</view> -->
|
||||
|
||||
<view class="fixed footer bg-white w-full row-between u-col-center px32">
|
||||
<view>
|
||||
<u-checkbox shape="circle" :active-color="themeColor">全选</u-checkbox>
|
||||
@ -59,10 +51,12 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-l-24">
|
||||
<u-button @click="mpLogin" hover-class="none" :customStyle="{width: '228rpx', height: '80rpx', backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0', borderRadius: '64rpx'}" :hair-line="false">结算</u-button>
|
||||
<u-button @click="mpLogin" hover-class="none" :customStyle="{width: '228rpx', height: '80rpx', backgroundColor: '#FE6004', color: '#fff', border: 'none', padding: '16rpx 0', borderRadius: '64rpx'}" :hair-line="false">结算</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<shop-spec v-model="showSpec" @close="showSpec = false"></shop-spec>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -70,7 +64,8 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isEdit: false
|
||||
isEdit: false,
|
||||
showSpec: false
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -1,170 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="signin">
|
||||
<view class="bold-700 title">每日签到</view>
|
||||
<view class="day">
|
||||
<text class="lg">已经连续签到</text>
|
||||
<text class="">1天</text>
|
||||
</view>
|
||||
<view class="row-between u-m-t-32 u-m-l-24 u-m-r-24">
|
||||
<view class="sigin-day expire column-center">
|
||||
<view class="date mt10">第一天</view>
|
||||
<view class="mt10">
|
||||
<u-image :src="cloudPath + 'img/icon_signin_gray.png'" width="30" height="30"></u-image>
|
||||
</view>
|
||||
<view class="points mt10">x20</view>
|
||||
</view>
|
||||
|
||||
<view class="sigin-day normal column-center">
|
||||
<view class="date mt10">第二天</view>
|
||||
<view class="mt10">
|
||||
<u-image :src="cloudPath + 'img/icon_signin_blue.png'" width="30" height="30"></u-image>
|
||||
</view>
|
||||
<view class="points mt10">x40</view>
|
||||
</view>
|
||||
|
||||
<view class="sigin-day normal column-center">
|
||||
<view class="date mt10">第三天</view>
|
||||
<view class="mt10">
|
||||
<u-image :src="cloudPath + 'img/icon_signin_blue.png'" width="30" height="30"></u-image>
|
||||
</view>
|
||||
<view class="points mt10">x60</view>
|
||||
</view>
|
||||
|
||||
<view class="sigin-day normal column-center">
|
||||
<view class="date mt10">第四天</view>
|
||||
<view class="mt10">
|
||||
<u-image :src="cloudPath + 'img/icon_signin_blue.png'" width="30" height="30"></u-image>
|
||||
</view>
|
||||
<view class="points mt10">x80</view>
|
||||
</view>
|
||||
|
||||
<view class="sigin-day normal column-center">
|
||||
<view class="date mt10">第五天</view>
|
||||
<view class="mt10">
|
||||
<u-image :src="cloudPath + 'img/icon_signin_blue.png'" width="30" height="30"></u-image>
|
||||
</view>
|
||||
<view class="points mt10">x100</view>
|
||||
</view>
|
||||
|
||||
<view class="sigin-day normal column-center">
|
||||
<view class="date mt10">第六天</view>
|
||||
<view class="mt10">
|
||||
<u-image :src="cloudPath + 'img/icon_signin_blue.png'" width="30" height="30"></u-image>
|
||||
</view>
|
||||
<view class="points mt10">x120</view>
|
||||
</view>
|
||||
|
||||
<view class="sigin-day last column-center">
|
||||
<view class="date mt10">第七天</view>
|
||||
<view class="mt10">
|
||||
<u-image :src="cloudPath + 'img/icon_signin_white.png'" width="30" height="30"></u-image>
|
||||
</view>
|
||||
<view class="points mt10">x140</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-26 signin-btn">
|
||||
签到
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-white ad row-between u-padding-left-20 u-padding-right-20">
|
||||
<view class="row">
|
||||
<view>
|
||||
<u-image :src="cloudPath + 'img/red-packet.png'" width="90" height="90"></u-image>
|
||||
</view>
|
||||
<view class="ml20">
|
||||
<view class="bold-600 xs">看广告获取积分</view>
|
||||
<view class="text-AE xxs u-m-t-12">每日观看5分钟最高可领取376金币</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<u-button @click="mobileLogin" hover-class="none" :customStyle="{color: themeColor, border: '1px solid ' + themeColor, width: '120rpx', height: '60rpx', fontSize: '28rpx'}" :plain="true" :hair-line="false" shape="circle">看广告</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.signin {
|
||||
height: 570rpx;
|
||||
margin: 24rpx 20rpx 0;
|
||||
background-image: url(http://jianbing-media.stnav.com/frontend/img/signin-bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
padding-top: 70rpx;
|
||||
}
|
||||
|
||||
.day {
|
||||
margin-top: 72rpx;
|
||||
margin-left: 24rpx;
|
||||
|
||||
& > text:first-child {
|
||||
color: #141414;
|
||||
}
|
||||
|
||||
& > text:last-child {
|
||||
color: #099DF1;
|
||||
font-size: 40rpx;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.expire {
|
||||
background-color: #eee;
|
||||
color: #AFAFAF;
|
||||
}
|
||||
|
||||
.normal {
|
||||
background-color: #F5F5F4;
|
||||
}
|
||||
|
||||
.last {
|
||||
background: linear-gradient( 137deg, #099DF1 0%, #7BC7F2 100%);
|
||||
}
|
||||
|
||||
.sigin-day {
|
||||
width: 80rpx;
|
||||
height: 150rpx;
|
||||
border-radius: 40rpx;
|
||||
padding: 8rpx;
|
||||
|
||||
.date,
|
||||
.points {
|
||||
white-space: nowrap;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.signin-btn {
|
||||
background-color: #099DF1;
|
||||
border-radius: 48rpx;
|
||||
color: #fff;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
margin: 0 120rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.ad {
|
||||
height: 140rpx;
|
||||
margin: 36rpx 20rpx;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.text-AE {
|
||||
color: #AEAEAE;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,128 +0,0 @@
|
||||
<template>
|
||||
<view class="store u-relative">
|
||||
<view class="store-bg"></view>
|
||||
<view class="bg-white row-between address">
|
||||
<view class="row u-line-1">
|
||||
<view class="tag xs mr10">
|
||||
<u-tag text="默认" border-color="#FB5032" bg-color="#FB5032" color="#fff"/>
|
||||
</view>
|
||||
<view class="u-line-1">浙江省杭州市滨江区缤纷路500号 浙江省杭州市滨江区缤纷路500号</view>
|
||||
</view>
|
||||
<view>
|
||||
<u-icon name="arrow-right" size="32"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="store-list">
|
||||
<view class="block bg-white br24 mx24 u-padding-40 u-m-b-24">
|
||||
<view class="info u-line-1">
|
||||
<view class="lg bold-500">MEET轻食店</view>
|
||||
<view class="time u-m-t-16">00:00-23:59</view>
|
||||
<view class="row u-m-t-16">
|
||||
<view class="text-333">距离:558.58km</view>
|
||||
<view class="text-999 ml10 mr10">|</view>
|
||||
<view class="text-999 u-line-1 ">湖北省武汉市洪山区珞喻路726号</view>
|
||||
</view>
|
||||
<view class="row u-m-t-16">
|
||||
<u-image :src="cloudPath + 'img/icon_nav.png'" width="56" height="56"/>
|
||||
<u-image class="u-m-l-36" :src="cloudPath + 'img/icon_mobile.png'" width="56" height="56"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order row-center">
|
||||
去下单
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="block bg-white br24 mx24 u-padding-40 u-m-b-24">
|
||||
<view class="info u-line-1">
|
||||
<view class="lg bold-500">MEET轻食店</view>
|
||||
<view class="time u-m-t-16">00:00-23:59</view>
|
||||
<view class="row u-m-t-16">
|
||||
<view class="text-333">距离:558.58km</view>
|
||||
<view class="text-999 ml10 mr10">|</view>
|
||||
<view class="text-999 u-line-1 ">湖北省武汉市洪山区珞喻路726号</view>
|
||||
</view>
|
||||
<view class="row u-m-t-16">
|
||||
<u-image :src="cloudPath + 'img/icon_nav.png'" width="56" height="56"/>
|
||||
<u-image class="u-m-l-36" :src="cloudPath + 'img/icon_mobile.png'" width="56" height="56"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order row-center">
|
||||
去下单
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="block bg-white br24 mx24 u-padding-40 u-m-b-24">
|
||||
<view class="info u-line-1">
|
||||
<view class="lg bold-500">MEET轻食店</view>
|
||||
<view class="time u-m-t-16">00:00-23:59</view>
|
||||
<view class="row u-m-t-16">
|
||||
<view class="text-333">距离:558.58km</view>
|
||||
<view class="text-999 ml10 mr10">|</view>
|
||||
<view class="text-999 u-line-1 ">湖北省武汉市洪山区珞喻路726号</view>
|
||||
</view>
|
||||
<view class="row u-m-t-16">
|
||||
<u-image :src="cloudPath + 'img/icon_nav.png'" width="56" height="56"/>
|
||||
<u-image class="u-m-l-36" :src="cloudPath + 'img/icon_mobile.png'" width="56" height="56"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order row-center">
|
||||
去下单
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.store {
|
||||
.store-bg {
|
||||
background: linear-gradient(180deg, #0CB5F1 0%, rgba(207,235,245,0) 100%);
|
||||
height: 420rpx;
|
||||
}
|
||||
|
||||
.address {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
margin: 0 24rpx;
|
||||
padding: 0 20rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-radius: 24rpx;
|
||||
height: 128rpx;
|
||||
}
|
||||
|
||||
.store-list {
|
||||
position: absolute;
|
||||
top: 176rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.block {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
|
||||
.time {color: #ACACAC;}
|
||||
|
||||
.order::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 40rpx;
|
||||
height: 210rpx;
|
||||
border-left: 4rpx solid #eee;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.order {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view>
|
||||
<navigator class="header" hover-class="none" url="/pages/goods_search/goods_search">
|
||||
<u-search placeholder="请输入商品名" :disabled="true"></u-search>
|
||||
</navigator>
|
||||
</view>
|
||||
<view>
|
||||
<view class="store u-flex u-row-between u-p-32">
|
||||
<view>
|
||||
<view class="lg bold-600 u-flex" @click="chooseStore">
|
||||
MEET轻食店
|
||||
<u-icon name="arrow-right" size="28" class="right-icon"></u-icon>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-8" @click="chooseAddress">
|
||||
<u-icon name="map" size="32"></u-icon>
|
||||
请选择收货地址
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<u-button shape="circle" :hair-line="false" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '36rpx'}" @click="signin">自取</u-button>
|
||||
</view>
|
||||
</view>
|
||||
<cate-one :list="cateList"></cate-one>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getCatrgory} from '@/api/store'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cateList: [],
|
||||
keyword: ''
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.getCatrgoryFun();
|
||||
},
|
||||
methods: {
|
||||
getCatrgoryFun() {
|
||||
getCatrgory().then(res => {
|
||||
if (res.code == 1) {
|
||||
this.cateList = res.data
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.store {
|
||||
background-color: #FFFAFB;
|
||||
height: 108rpx;
|
||||
|
||||
.right-icon {
|
||||
font-weight: bold;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
86
pages/wait/wait.vue
Normal file
86
pages/wait/wait.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<view class="wait">
|
||||
<view class="info">
|
||||
<text class="title bold-500">待制作</text>
|
||||
<text class="time u-m-l-16">预计等待09分钟56秒内完成</text>
|
||||
</view>
|
||||
<view class="u-text-center nr number">
|
||||
号码
|
||||
</view>
|
||||
<view class="row-center u-m-t-54">
|
||||
<view class="border">
|
||||
0
|
||||
</view>
|
||||
<view class="border">
|
||||
2
|
||||
</view>
|
||||
<view class="border">
|
||||
4
|
||||
</view>
|
||||
</view>
|
||||
<view class="bold-400 u-m-t-54 u-text-center">
|
||||
前有4人在等待
|
||||
</view>
|
||||
|
||||
<view class="btn u-m-t-52 text-fff u-text-center">
|
||||
完成
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.wait {
|
||||
.info {
|
||||
margin: 242rpx 120rpx 58rpx;
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: rgba(0, 0, 0, .6);
|
||||
}
|
||||
}
|
||||
|
||||
.numer {
|
||||
color: #151515;
|
||||
}
|
||||
|
||||
.border {
|
||||
text-align: center;
|
||||
width: 67rpx;
|
||||
height: 68rpx;
|
||||
line-height: 68rpx;
|
||||
border: 2rpx solid #E7E7E7;
|
||||
color: #FE6004;
|
||||
font-size: 64rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.border:first-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.border:nth-child(2) {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
bottom: 106rpx;
|
||||
margin: 0 64rpx;
|
||||
height: 76rpx;
|
||||
line-height: 76rpx;
|
||||
background: #FE6004;
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user