hly
/
hotel-tablecloth-uniapp-24-08-29
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

上传

master
前端-胡立永 9 months ago
parent
8260a3fbc8
commit
8a7fa8163b
12 changed files with 604 additions and 51 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +169
    -0
      components/config/PrivacyAgreementPoup.vue
  2. +3
    -5
      components/config/configPopup.vue
  3. +6
    -0
      pages.json
  4. +85
    -36
      pages/index/cart.vue
  5. +6
    -1
      pages/index/index.vue
  6. +153
    -0
      pages_order/auth/wxLogin.vue
  7. +133
    -0
      pages_order/auth/wxUserInfo.vue
  8. +48
    -8
      pages_order/components/product/submitUnitSelect.vue
  9. +1
    -1
      pages_order/order/refundsOrExchange.vue
  10. BIN
      pages_order/static/auth/headImage.png
  11. BIN
      pages_order/static/auth/wx.png
  12. BIN
      static/image/PrivacyAgreementPoup/icon.png

+ 169
- 0
components/config/PrivacyAgreementPoup.vue View File

@ -0,0 +1,169 @@
<template>
<uv-popup ref="popup" z-index="99999" :closeOnClickOverlay="false" :customStyle="{ backgroundColor: 'transparent' }">
<view class="privacyPopup">
<view class="icon">
<image src="/static/image/PrivacyAgreementPoup/icon.png"
mode=""></image>
</view>
<view class="title">
<view>协议与隐私政策</view>
</view>
<view class="content_pri">
<view class="text">
欢迎来到酒店布草!我们根据最新的法律法规、监管政策要求，更新了《用户协议》和《隐私政策》,请您认真阅读。
</view>
</view>
<view class="config">
<uv-checkbox-group v-model="checkboxValue" shape="circle">
<view class="content">
<view style="display: flex;">
<!-- <uv-checkbox size="30rpx" :name="1"></uv-checkbox> -->
同意<text @click="goToPrivacy">《酒店布草隐私政策》</text>
</view>
<view class="">
以及<text @click="goToPrivacy">《用户协议》</text>
</view>
</view>
</uv-checkbox-group>
</view>
<view class="pri_btn">
<button class="confuse_btn" @click="confusePrivacy">拒绝</button>
<button
class="confirm_btn" id="agree-btn"
open-type="agreePrivacyAuthorization"
@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
</view>
</view>
</uv-popup>
</template>
<script>
export default {
name: 'PrivacyAgreementPoup',
data() {
return {
resolvePrivacyAuthorization: {},
checkboxValue : false
}
},
mounted() {
if(wx.getPrivacySetting){
wx.getPrivacySetting({
success: res => {
console.log(res)
if (res.needAuthorization) {
// 需要弹出隐私协议
this.init()
}
},
fail: () => {}
})
}
},
methods: {
//初始化
init(resolve) {
this.$refs.popup.open('center')
this.resolvePrivacyAuthorization = resolve
},
// 打开隐私协议
goToPrivacy() {
wx.openPrivacyContract({
success: () => {
console.log('打开成功');
}, // 打开成功
fail: () => {
uni.showToast({
title: '打开失败，稍后重试',
icon: 'none'
})
} // 打开失败
})
},
// 拒绝
confusePrivacy() {
this.$refs.popup.close()
// this.resolvePrivacyAuthorization({
// event: 'disagree'
// })
},
// 同意
handleAgreePrivacyAuthorization() {
// 告知平台用户已经同意，参数传同意按钮的id
// this.resolvePrivacyAuthorization({
// buttonId: 'agree-btn',
// event: 'agree'
// })
this.$refs.popup.close()
}
}
}
</script>
<style lang="scss" scoped>
.privacyPopup {
width: 90%;
margin: 0rpx auto;
background: white;
border-radius: 20rpx;
box-sizing: border-box;
padding: 40rpx 30rpx;
.icon{
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 30rpx;
image{
width: 90rpx;
height: 90rpx;
}
}
.title {
text-align: center;
font-size: 36rpx;
}
.content_pri {
padding: 30rpx 0rpx;
font-size: 28rpx;
}
.config {
font-size: 28rpx;
text-align: center;
line-height: 40rpx;
margin-bottom: 30rpx;
text {
color: $uni-color;
}
.content{
display: flex;
}
}
.pri_btn {
display: flex;
.confuse_btn{
background-color: #F2F2F2;
color: #BDBDBD;
}
button {
margin: 10rpx;
flex: 1;
background: $uni-color;
outline: none;
color: white;
font-size: 30rpx;
}
}
}
</style>

+ 3
- 5
components/config/configPopup.vue View File

@ -9,7 +9,7 @@
</template>
<script>
import { mapGetters } from 'vuex'
import { mapState } from 'vuex'
export default {
name: 'configPoup',
data() {
@ -18,14 +18,12 @@
}
},
onShow(){
console.log(this.getConfig);
},
methods: {
//打开配置信息菜单
open(key){
console.log(key);
this.content = this.getConfig[key]
this.content = this.configList[key]
this.$refs.popup.open('bottom');
}
@ -33,7 +31,7 @@
},
computed : {
...mapGetters(['getConfig'])
...mapState(['configList'])
}
}
</script>


+ 6
- 0
pages.json View File

@ -55,6 +55,12 @@
},
{
"path": "order/refundsOrExchange"
},
{
"path": "auth/wxLogin"
},
{
"path": "auth/wxUserInfo"
}
]
}],


+ 85
- 36
pages/index/cart.vue View File

@ -3,58 +3,72 @@
<navbar/>
<view class="user">
<uv-swipe-action>
<view
v-for="(item, index) in 3"
:key="index">
<view style="margin-top: 20rpx;"></view>
<uv-swipe-action-item
:options="options">
<view class="item">
<image
class="image"
src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg"
mode=""></image>
<view class="info">
<view class="title">
<view class="">
桌布租赁
<uv-checkbox-group
shape="circle"
v-model="checkboxValue">
<uv-swipe-action>
<view
v-for="(item, index) in list"
:key="index">
<view style="margin-top: 20rpx;"></view>
<uv-swipe-action-item
:options="options">
<view class="item">
<view class="checkbox">
<uv-checkbox
:name="item.id"
activeColor="#FA5A0A"
size="40rpx"
icon-size="35rpx"
></uv-checkbox>
</view>
<image
class="image"
src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg"
mode=""></image>
<view class="info">
<view class="title">
<view class="">
{{ item.title }}
</view>
<view class="">
<uv-number-box v-model="item.num"
@change="valChange"></uv-number-box>
</view>
</view>
<view class="">
<uv-number-box v-model="value" @change="valChange"></uv-number-box>
<view class="unit">
规格：{{ item.unit }}
<uv-icon name="arrow-down"></uv-icon>
</view>
<view class="price">
￥<text>{{ item.price }}</text>元
</view>
</view>
<view class="unit">
规格：120*40*75【桌子尺寸】
<uv-icon name="arrow-down"></uv-icon>
</view>
<view class="price">
￥<text>299</text>元
</view>
</view>
</view>
</uv-swipe-action-item>
</view>
</uv-swipe-action>
</uv-swipe-action-item>
</view>
</uv-swipe-action>
</uv-checkbox-group>
<view class="action">
<view class="icon">
<image src="/static/image/cart/1.png" mode=""></image>
<view class="num">
4
{{ checkboxValue.length }}
</view>
</view>
<view class="price">
<view class="count">
合计
<view class="">
￥<text>218.00</text>
￥<text>{{ totalPrice }}</text>
</view>
</view>
<view class="text">
共4件，已享受更低优惠
共{{ checkboxValue.length }}件，已享受更低优惠
</view>
</view>
<view class="btn">
@ -76,17 +90,47 @@
data() {
return {
value : 0,
checkboxValue : [],
options: [
{
text: '删除',
style: {
backgroundColor: '#f56c6c'
backgroundColor: '#FA5A0A'
}
},
],
list : [
{
id : 1,
title : '桌布租赁',
num : 1,
price : 299,
unit : '120*40*75【桌子尺寸】',
},
{
id : 2,
title : '桌布租赁',
num : 1,
price : 299,
unit : '120*40*75【桌子尺寸】',
},
],
}
},
computed: {},
computed: {
totalPrice(){
if (!this.checkboxValue.length) {
return 0
}
let price = 0
this.list.forEach(n => {
if(this.checkboxValue.includes(n.id)){
price += n.price * n.num
}
})
return price
},
},
methods: {
valChange(){
@ -105,6 +149,11 @@
background-color: #fff;
display: flex;
padding: 30rpx;
.checkbox{
display: flex;
justify-content: center;
align-items: center;
}
.image{
width: 200rpx;
height: 200rpx;


+ 6
- 1
pages/index/index.vue View File

@ -90,7 +90,8 @@
</view>
</view>
<view class="btns">
<view class="btn">
<view class="btn"
@click="$utils.navigateTo('/pages_order/auth/wxUserInfo')">
我要水洗
</view>
</view>
@ -107,11 +108,14 @@
<!-- <selectArea ref="selectArea" @close="closeAreaPro" @select="selectArea"></selectArea> -->
<PrivacyAgreementPoup/>
<tabber select="0"/>
</view>
</template>
<script>
import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
import Position from '@/utils/position.js'
import tabber from '@/components/base/tabbar.vue'
import productList from '@/components/user/productList.vue'
@ -121,6 +125,7 @@
components : {
tabber,
productList,
PrivacyAgreementPoup,
},
data() {
return {


+ 153
- 0
pages_order/auth/wxLogin.vue View File

@ -0,0 +1,153 @@
<template>
<view class="login">
<view class="logo">
<!-- <image src="/static/image/login/logo.png" mode=""></image> -->
</view>
<view class="title">
欢迎使用酒店桌布租赁平台
</view>
<view class="btn mt"
@click="wxLogin">
<view class="icon">
<image src="../static/auth/wx.png" mode=""></image>
</view>
<view class="">
微信授权登录
</view>
</view>
<!-- <view class="btn b2">
使用短信验证登录
</view> -->
<view class="config">
<uv-checkbox-group
v-model="checkboxValue"
shape="circle">
<view class="content">
<view
style="display: flex;">
<uv-checkbox
size="40rpx"
icon-size="30rpx"
activeColor="#FD5100"
:name="1"
></uv-checkbox>
阅读并同意我们的<text @click="openConfigDetail('privacyAgreement')">“服务协议与隐私条款”</text>
</view>
<view class="">
以及<text @click="openConfigDetail('userAgreement')">个人信息保护指引</text>
</view>
</view>
</uv-checkbox-group>
</view>
<configPopup ref="popup"></configPopup>
</view>
</template>
<script>
import configPopup from '@/components/config/configPopup.vue';
export default {
name : 'Login',
data() {
return {
checkboxValue : []
}
},
methods: {
wxLogin(){
if(!this.checkboxValue.length){
return uni.showToast({
title: '请先同意隐私协议',
icon:'none'
})
}
this.$store.commit('login')
},
//打开应用配置
openConfigDetail(key){
this.$refs.popup.open(key)
}
}
}
</script>
<style scoped lang="scss">
.login{
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
flex-direction: column;
position: relative;
.logo{
height: 140rpx;
width: 140rpx;
background-color: #ddd;
border-radius: 30rpx;
image{
width: 80rpx;
height: 80rpx;
}
margin-bottom: 20rpx;
}
.title{
position: relative;
font-weight: 900;
font-size: 45rpx;
&::after{
content: '';
position: absolute;
left: 0;
top: 100%;
display: block;
height: 8rpx;
width: 210rpx;
background: linear-gradient(to right,$uni-color, #fff);
}
}
.btn{
width: 80%;
height: 100rpx;
background-color: $uni-color;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
margin: 20rpx 0;
border-radius: 20rpx;
.icon{
margin-right: 10rpx;
image{
width: 40rpx;
height: 35rpx;
}
}
}
.b2{
background-color: #3c69f122;
color: #3c69f1;
}
.mt{
margin-top: 200rpx;
}
.config{
position: absolute;
bottom: 0;
font-size: 22rpx;
text-align: center;
line-height: 40rpx;
text{
color: $uni-color;
}
}
}
</style>

+ 133
- 0
pages_order/auth/wxUserInfo.vue View File

@ -0,0 +1,133 @@
<template>
<view class="login">
<view class="title">
酒店桌布租赁平台
</view>
<view class="title">
申请获取你的头像、昵称
</view>
<button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<view class="line">
<view class="">
头像
</view>
<view class="">
<image :src="userInfo.headImage" v-if="userInfo.headImage" style="width: 60rpx;height: 60rpx;"
mode=""></image>
<image src="../static/auth/headImage.png" v-else style="width: 50rpx;height: 50rpx;" mode=""></image>
</view>
</view>
</button>
<view class="line">
<view class="">
昵称
</view>
<view class="">
<input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName"
v-model="userInfo.nickName" />
</view>
</view>
<view class="btn" @click="submit">
确认
</view>
</view>
</template>
<script>
export default {
data() {
return {
userInfo: {
headImage: '',
nickName: '',
}
};
},
onShow() {},
computed: {},
methods: {
onChooseAvatar(res) {
let self = this
self.$Oss.ossUpload(res.target.avatarUrl)
.then(url => {
self.userInfo.headImage = url
})
},
submit() {
let self = this
uni.createSelectorQuery().in(this)
.select("#nickName")
.fields({
properties: ["value"],
})
.exec((res) => {
const nickName = res?.[0]?.value
self.userInfo.nickName = nickName
if (self.$utils.verificationAll(self.userInfo, {
headImage: '请选择头像',
nickName: '请填写昵称',
})) {
return
}
self.$api('infoUpdateInfo', self.userInfo, res => {
if (res.code == 200) {
uni.switchTab({
url:'/pages/center/center'
})
}
})
})
},
}
}
</script>
<style lang="scss" scoped>
.login {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 80vh;
.title {
line-height: 45rpx;
font-weight: 900;
}
.line {
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
border-bottom: 1px solid #00000023;
padding: 30rpx 0;
margin: 0 auto;
}
.chooseAvatar {
width: 100%;
padding: 0;
margin: 0;
margin-top: 10vh;
border: none;
}
.btn {
// background: $uni-linear-gradient-btn-color;
background: $uni-color;
color: #fff;
width: 80%;
padding: 20rpx 0;
text-align: center;
border-radius: 15rpx;
margin-top: 10vh;
}
}
</style>

+ 48
- 8
pages_order/components/product/submitUnitSelect.vue View File

@ -60,15 +60,23 @@
</view>
</view>
</view>
</view>
<!-- 费用明细 -->
<view class="">
</view>
<!-- 提交按钮 -->
<view class="">
<!-- 费用明细 -->
<view class="expense-detail">
<view class="title">
费用明细
</view>
<view class="detail">
押金：￥200
</view>
</view>
<!-- 提交按钮 -->
<view class="submit-btn">
{{ submiitTitle }}
</view>
</view>
@ -87,6 +95,12 @@
components : {
addressList
},
props : {
submiitTitle : {
default : '立即租赁',
type : String,
}
},
data() {
return {
unitIndex : 0,
@ -244,5 +258,31 @@
}
}
}
.expense-detail{
padding: 30rpx;
background-color: #fff;
font-size: 28rpx;
.title{
font-weight: 600;
}
.detail{
background-color: #F6F6F6;
color: #717171;
margin: 10rpx 0;
padding: 10rpx 20rpx;
}
}
.submit-btn{
background: $uni-color;
width: 600rpx;
height: 80rpx;
color: #fff;
border-radius: 40rpx;
font-size: 28rpx;
margin: 20rpx auto;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>

+ 1
- 1
pages_order/order/refundsOrExchange.vue View File

@ -181,7 +181,7 @@ export default {
}
</script>
<style lang="less" scoped>
<style lang="scss" scoped>
* {
box-sizing: border-box;
}


BIN
pages_order/static/auth/headImage.png View File

Before After
Width: 80  |  Height: 80  |  Size: 1.4 KiB

BIN
pages_order/static/auth/wx.png View File

Before After
Width: 22  |  Height: 18  |  Size: 453 B

BIN
static/image/PrivacyAgreementPoup/icon.png View File

Before After
Width: 39  |  Height: 39  |  Size: 1007 B

Write Preview
Loading…
Cancel
Save