whitechiina
/
H5-ThreeDoorder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updata

This commit is contained in:
whitechiina 2025-03-28 14:06:25 +08:00
commit 361f444663
10278 changed files with 823067 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
unpackage

24
.hbuilderx/launch.json Normal file
View File

@ -0,0 +1,24 @@
{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
// launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
"version": "0.0",
"configurations": [{
"app-plus" :
{
"launchtype" : "local"
},
"default" :
{
"launchtype" : "local"
},
"h5" :
{
"launchtype" : "local"
},
"mp-weixin" :
{
"launchtype" : "local"
},
"type" : "uniCloud"
}
]
}

238
App.vue Normal file
View File

@ -0,0 +1,238 @@
<script>
let uri = require('urijs');
/**
* 用来处理从小程序拿到的参数
* */
function getUrlParams(url) {
try {
// 通过 ? 分割获取后面的参数字符串
let urlStr = url.split('?')[1]
// 创建空对象存储参数
let obj = {};
// 再通过 & 将每一个参数单独分割出来
let paramsArr = urlStr.split('&')
for (let i = 0, len = paramsArr.length; i < len; i++) {
// 再通过 = 将每一个参数分割为 key:value 的形式
let arr = paramsArr[i].split('=')
obj[arr[0]] = arr[1];
}
return obj
} catch {
return false
}
}
import store from '@/store/index';
export default {
globalData: {
// FPT上传地址
urlfileName:'https://jc.agrimedia.cn/discountt',
// parameters: {
// isWechat: true,
// token: "123456",
// cityInfor:{
// city: "天津市",
// lat: '39.093471137152775',
// lon: '117.12767279730903',
// }
// },
parameters: {}
},
onLaunch: function(parameters = {}) {
console.log(navigator.userAgent,'userAgent');
// 动态构建script标签，用于引入wxjs文件
var script = document.createElement('script');
script.src = "https://res.wx.qq.com/open/js/jweixin-1.6.0.js";
document.body.appendChild(script);
// 为适配旧版本项目代码中的取参逻辑此处为迭代后新版本传参并整合为旧版本参数格式
let basurl = uri(decodeURIComponent(window.location.href))
let querys = basurl.query(true);
console.log(querys,'querys');
if(Object.keys(querys)['length'] > 0){
if(querys?.para){
// 获取URL参数
var _para = getUrlParams(window.location.href);
console.log(_para,'_para');
// 小程序首页会直接进入店铺首页,首页无赋值店铺信息逻辑所再次处进入之后赋值
if(_para?.brand_id && typeof _para['brand_id'] != 'undefined' && typeof _para['brand_id'] != undefined && _para?.brand_name && typeof _para['brand_name'] != 'undefined' && typeof _para['brand_name'] != undefined){
store.commit('shopping/SETBRANDINFOR', { brand_id: _para['brand_id'], brand_name:decodeURIComponent(_para['brand_name'])});
};
// 参数初始化处理
if (typeof _para == 'object' && _para['para'] != undefined) {
console.log('存在参数');
// URL参数
var URLpara = decodeURIComponent(getUrlParams(window.location.href)['para']);
console.log(JSON.parse(URLpara),'*****');
try{
// 转换过来的URL参数为一个JSON字符串其中存在一个#/字符，直接使用JSON.parse会报错，所以将#/截取出来
var _r = URLpara.substr(0, URLpara.lastIndexOf("#/"));
this['globalData']['parameters'] = JSON.parse(`${_r}`);
}catch(e){
this['globalData']['parameters'] = JSON.parse(URLpara);
//TODO handle the exception
}
// 全局变量设置参数
console.log(this['globalData']['parameters'],'----');
// 合并其余参数
const other = JSON.parse(JSON.stringify(_para,(key,val)=>{
if(key === 'para') return undefined;
return val;
}))
this['globalData']['parameters'] = {...this['globalData']['parameters'],...other};
} else {
console.log('没有参数')
}
console.log(JSON.stringify(this['globalData']['parameters'],null,10), 'App Launch');
}else{
for(let key in querys){
console.log(querys);
querys[key] = JSON.parse(querys[key])
};
this['globalData']['parameters'] = { ...querys['userinfor'], ...querys['query'], timestamp:querys['timestamp']}
// 小程序首页会直接进入店铺首页,首页无赋值店铺信息逻辑所再次处进入之后赋值
if(this['globalData']['parameters']?.brand_id && typeof this['globalData']['parameters']['brand_id'] != 'undefined' && typeof this['globalData']['parameters']['brand_id'] != undefined && this['globalData']['parameters']?.brand_name && typeof this['globalData']['parameters']['brand_name'] != 'undefined' && typeof this['globalData']['parameters']['brand_name'] != undefined){
store.commit('shopping/SETBRANDINFOR', { brand_id: this['globalData']['parameters']['brand_id'], brand_name:decodeURIComponent(this['globalData']['parameters']['brand_name'])});
};
}
};
console.log(this['globalData']['parameters'],'测试取参');
return;
// 小程序进入H5逻辑
/**
* 小程序进入H5会携带从小程序中获取到的部分参数(利用encodeURIComponent函数编码,所以接收是需要decodeURIComponent函数解码)
* {
* token
* isWechat
* lat
* lon
* city
* }
*
* */
// 解码
// if (parameters['query']?.para)
// this['globalData']['parameters'] = JSON.parse(decodeURIComponent(parameters['query']['para']));
// console.log(this['globalData']['parameters'], 'globalData');
},
onShow: function() {
console.log('App Show');
// 全局初始化参数中存在isWechat属性则代表就是从小程序跳入
if (this['globalData']['parameters']?.isWechat) {
store.commit('SetcityInfor', this['globalData']['parameters']['cityInfor']);
} else {
// 反之则代表从APP进入H5
/**
* @获取用户位置信息
*/
// APP是由第三方开发,第三方开发文档中API-getLocation方法获取用户位置
// 因为IOS端会跳进Safari浏览器,而Safari浏览器会提示getLocation方法不存在所以此处进行判断打断执行
let isSafari = (/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent));
console.log(isSafari, 'isSafari');
if (isSafari) return;
if (process.env.NODE_ENV !== 'development' && !this['globalData']['parameters']['isWechat']) {
getLocation().then(res => {
console.log(res, 'res');
store.commit('SetcityInfor', res);
});
}
}
},
onHide: function() {
console.log('App Hide')
},
}
</script>
<style lang="scss">
@import 'uview-ui/theme.scss';
@import "@/static/css/flex.css";
@import "@/static/css/themeColor.scss";
@import "@/static/css/icon/iconfont.css";
*::-webkit-scrollbar {
display: none;
}
*::-webkit-scrollbar-horizontal {
display: none;
}
/*每个页面公共css */
page {
width: 100%;
height: auto;
min-height: 100%;
position: relative;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
image {
width: 100%;
height: 100%;
}
uni-button:after {
border: none !important;
}
// 点餐缺省样式
.default {
margin: auto;
color: #999999;
font-size: $FONTSIZE28;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 150rpx;
.img {
width: 160rpx;
height: 132rpx;
margin-bottom: 15rpx;
}
}
@keyframes move {
/* 开始状态 */
0% {
background-color: #f1f2f4;
};
50%{
background-color: #E0E0E0;
}
/* 结束状态 */
100% {
background-color: #f1f2f4;
}
}
.skeleton {
width: 200rpx;
height: 200rpx;
animation-name: move;
animation-duration: 0.5s;
}
/* 适配 iPhoneX */
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.mescroll-safearea {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}
</style>

81
components/Banner/Banner.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<view class="banner">
<view class="swiper_wrap">
<swiper class='swiper' @change="e => currentNum = e.detail.current" :indicator-dots='false' :autoplay='true' interval='3000' duration='300' width="100%" height="350rpx"
circular="true">
<block v-for='(item,index) in imageList' :key="index">
<swiper-item>
<view class='exp__list'>
<image :lazy-load="true" class="swiper_img" :src="item"></image>
</view>
</swiper-item>
</block>
</swiper>
</view>
<view class="indicator-num">
<text class="indicator-num__text">{{imageList.length==0?'0':currentNum+1}}/{{imageList.length}}</text>
</view>
</view>
</template>
<script>
export default {
name:"Banner",
props:{
imageList:Array,
},
data() {
return {
currentNum:0
};
},
methods:{
getVal(e){
this.$emit('getVal',e)
}
}
}
</script>
<style lang="scss" scoped>
.banner{
position: relative;
// background-color: #000;
border-radius: 20rpx;
.banner_image{
width: 100%;
height: 350rpx;
}
.indicator-num{
position: absolute;
bottom:20rpx;
right: 20rpx;
.indicator-num__text{
font-size: 24rpx;
color: #fff;
padding:6rpx 20rpx;
background: rgba(0, 0, 0,0.4);
border-radius: 60rpx;
}
}
.swiper-items{
height: 350rpx;
image{
height: 350rpx;
display: block;
}
}
.swiper{
height: 350rpx;
width: 100%;
}
.swiper_img{
width: 100%;
height: 350rpx;
border-radius: 10rpx;
}
}
</style>

121
components/Month-Day-picker/Month-Day-picker.vue Normal file
View File

@ -0,0 +1,121 @@
<template>
<u-popup :show="MonthDayShow" :round="10" mode="bottom" closeOnClickOverlay @close="cancel">
<view style="width: 100%;height: 500rpx;">
<view class="btn">
<view class="cancel" @click="cancel">
取消
</view>
<view class="confirm" @click="confirm">
确认
</view>
</view>
<picker-view :indicator-style="indicatorStyle" :value="value" class="picker-view"
@change="bindChange">
<picker-view-column>
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
</u-popup>
</template>
<script>
function repair(t){
if(t <= 9){
return `0${t}`
}else{
return t
}
}
export default {
name: "Month-Day-picker",
props:{
show:{
type:Boolean,
default:false,
}
},
data() {
// 当前月
const month = new Date().getMonth() + 1;
// 当前月的数组
const months = [];
// 当前月一共几天
const day = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate();
// 当前月每一天的数组
const days = [];
// 当天月的当前天
let cday = new Date().getDate();
for (let i = 1; i <= 12; i++) {
months.push(i)
}
for (let i = 1; i <= day; i++) {
days.push(i)
}
return {
month,
cday,
months,
days,
indicatorStyle: `height: 50px;`,
value:[month-1,cday-1],
valuelist:[month,cday]
};
},
computed:{
MonthDayShow(){
return this['show']
}
},
methods:{
// 取消点击事件
cancel(){
this.$emit('cancel')
},
// 确认点击事件
confirm(){
this['valuelist'] = [new Date().getFullYear(),repair(this['value'][0]+1),repair(this['value'][1]+1)];
this.$emit('confirm',this['valuelist'])
},
// 月日选择器值改变
bindChange(value){
this['value'] = [value['detail']['value'][0],value['detail']['value'][1]];
}
}
}
</script>
<style lang="scss">
.btn {
height: 100rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
padding: 0 32rpx;
.cancel,.confirm{
padding: 32rpx;
}
.confirm {
color: #FF4F04;
}
}
.picker-view {
width: 100%;
height: 400rpx;
margin-top: 20rpx;
}
.item {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
</style>

97
components/OrderStatus/OrderStatus.vue Normal file
View File

@ -0,0 +1,97 @@
<template>
<view class="OrderStatus">
<!-- 待结算 -->
<view class="un_commission_count" :class="{activation:lastCLick === uncommission?true:false}" @tap="switchClick(uncommission)">
待结算{{un_commission_count}}单
</view>
<!-- 已结算 -->
<view class="commission_count" :class="{activation:lastCLick === commission?true:false}" @tap="switchClick(commission)">
已结算{{commission_count}}单
</view>
</view>
</template>
<script>
/**
* 订单列表顶部筛选组件
* @param {type} uncommission // 待结算点击时向后台传入的筛选字段
* @param {type} commission // 已结算点击时向后台传入的筛选字段
* @param {type} un_commission_count // 待结算待结算数量
* @param {type} commission_count // 已结算待结算数量
* */
export default {
name: "OrderStatus",
props:{
un_commission_count:{
type:Number,
default:0
},
commission_count:{
type:Number,
default:0
},
uncommission:{
type:Number,
default:0
},
commission:{
type:Number,
default:1
}
},
computed:{
// 待结算
// uncommissioncount(){
// return this['un_commission_count']
// },
// 待结算
// commissioncount(){
// return this['commission_count']
// }
},
data() {
return {
// un_commission_count:0,
// commission_count:0,
// 上一次点击状态
lastCLick:'',
// 本次点击状态
// thisCLick:'',
};
},
methods:{
// 切换事件
switchClick(type){
let _type = '';
if(this['lastCLick'] !== type) _type = type;
this['lastCLick'] = _type;
this.$emit('commission',_type)
}
}
}
</script>
<style lang="scss">
.OrderStatus {
width: 100%;
margin: 32rpx 0;
display: flex;
justify-content:space-between;
.un_commission_count,.commission_count{
width: 46%;
height: 120rpx;
border: 2rpx solid rgba(253,143,59,0.2);
border-radius: 15rpx;
color: #fd8f3b;
font-size: 28rpx;
text-align: center;
line-height: 120rpx;
}
.activation{
background-color: #fd8f3b;
border: none !important;
color: #FFFFFF;
}
}
</style>

123
components/add-address/add-address.vue Normal file
View File

@ -0,0 +1,123 @@
<template>
<view class="bm-Address" @tap="choice">
<view class="bm-Address-UserInfor">
<view class="bm-Address-UserInfor-name">
{{item['name']}}
</view>
<view class="bm-Address-UserInfor-phone">
{{setphone}}
</view>
<view class="defaults" v-if="item['is_default']">
默认
</view>
<!-- <view class="residence">
家
</view> -->
<!-- <view class="company">
公司
</view> -->
</view>
<view class="bm-Address-Infor">
<view class="bm-Address-Infor-Area">
{{item['region']}}-{{item['address']}}
</view>
<view class="bm-Address-Infor-edit" @tap.stop="editClick">
<image class="img" src="https://img.agrimedia.cn/chwl/diy/edit.png"></image>
</view>
</view>
</view>
</template>
<script>
export default {
name:"add-address",
props:{
item:{
type:Object,
default:()=>{}
}
},
data() {
return {
};
},
computed:{
setphone(){
let str = this['item']['mobile'];
str = str.replace(str.slice(3,7),"****")
return str;
}
},
methods:{
// 点击
choice(){
this.$emit('choice',this['item'])
},
// 编辑
editClick(){
uni.navigateTo({
url:`/pages/diy/addposition/addposition?add_id=${this['item']['add_id']}`
})
}
}
}
</script>
<style lang="scss">
.bm-Address{
padding: 32rpx;
background-color: #ffffff;
margin-bottom: 32rpx;
&-UserInfor{
display: flex;
align-items: center;
font-size: 28rpx;
margin-bottom: 24rpx;
&-name{
min-width: 150rpx;
}
&-phone{
margin-right: 15rpx;
}
.defaults,.residence,.company{
color: #ffffff;
text-align: center;
padding: 5rpx 10rpx;
margin: 0 15rpx;
border-radius: 7rpx;
border: none;
overflow: hidden;
}
// 默认
.defaults{
background-color: #FD8F3B;
}
// 家
.residence{
background-color: #3191fd;
}
// 公司
.company{
background-color: #bde577;
}
}
&-Infor{
display: flex;
justify-content:space-between;
&-Area{
font-size: 28rpx;
max-width: 630rpx;
min-width: 630rpx;
}
&-edit{
.img{
width: 30rpx;
height: 30rpx;
}
}
}
}
</style>

188
components/authorization-userinfor/authorization-userinfor.vue Normal file
View File

@ -0,0 +1,188 @@
<template>
<view class="UserInfor" v-show="GetStep">
<!-- 用户信息 -->
<u-modal :show="true" :title="title" confirmText="授权" cancelText="暂不" showCancelButton @confirm="confirm">
<template v-slot:confirmButton>
<view class="btn">
<view class="btn-item" @tap="SetStep(0)">
暂不
</view>
<view class="btn-item" v-if="GetStep == 1" @tap="getUserInfo">
同步个人信息
</view>
<view class="btn-item" v-if="GetStep == 2">
<button class="openbtn" open-type="getPhoneNumber" @getphonenumber="getUserInfo">同步手机号</button>
</view>
</view>
</template>
</u-modal>
</view>
</template>
<script>
/**
* @仿微信授权个人信息弹框
* */
import {
mapGetters,
mapMutations,
mapActions,
} from 'vuex';
export default {
name: "authorization-userinfor",
data() {
return {
};
},
methods: {
...mapMutations('api', ['SetStep']),
...mapActions('api', ['againAuth', 'alipayagainAuth', 'savePhone']),
/**
* @点击确认授权用户信息
* */
getUserInfo(e) {
let self = this;
// 判断当前是手机号授权还是用户信息授权
if (this['GetStep'] == 1) {
// 微信环境下
// #ifdef MP-WEIXIN
// 弹出授权
uni.getUserProfile({
desc: '用于完善会员资料',
success(res) {
// 重新获取code
uni.login({
provider: 'weixin',
success(loginRes) {
console.log('code', loginRes.code);
uni.showLoading({
title: '同步中...'
});
// 提交后台
self.againAuth({
rawData: res.rawData,
code: loginRes.code
}).then(res => {
self.SetStep(2);
uni.hideLoading();
}).catch(res => {
uni.hideLoading();
})
}
})
},
fail(e) {
console.log(e)
self.SetStep(0);
}
});
// #endif
// 支付宝环境下
// #ifdef MP-ALIPAY
my.getAuthCode({
scopes: 'auth_user',
success: (res) => {
my.alert({
content: res.authCode,
});
self.alipayagainAuth({
auth_code: res.authCode
})
},
});
// #endif
} else {
let encryptedData = e.detail.encryptedData;
let iv = e.detail.iv;
console.log(e,'-----------------');
if (e.detail.errMsg === 'getPhoneNumber:fail user deny') return;
uni.login({
provider: 'weixin',
success: res => {
uni.showLoading({
title: '同步中...'
});
self.savePhone({
iv: iv,
encryptedData: encryptedData,
code: res.code,
}).then(res => {
uni.hideLoading();
self.SetStep(0);
}).catch(res => {
uni.hideLoading();
uni.showToast({
title:res['msg'],
icon:'none'
})
})
},
fail:()=>{
}
})
}
}
},
computed: {
...mapGetters('api', ['GetStep']),
title() {
switch (this['GetStep']) {
case 1:
return '您需要授权个人信息';
case 2:
return '您需要授权手机号';
}
}
},
}
</script>
<style lang="scss">
.UserInfor {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99999;
}
.btn {
width: 100%;
height: 88rpx;
display: flex;
justify-content: space-between;
}
.btn-item {
text-align: center;
line-height: 88rpx;
width: 50%;
height: 100%;
font-size: 30rpx;
font-weight: 800;
position: relative;
}
.openbtn {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: transparent;
font-size: 30rpx;
&::after {
border: none !important;
}
}
</style>

46
components/b-Bottom-Fit/b-Bottom-Fit.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<view class="b-Bottom-Fit" :class="[Class]"></view>
</template>
<script>
export default {
name: "b-Bottom-Fit",
data() {
return {
// Class: ''
};
},
computed:{
Class(){
// 获取系统信息
let system = uni.getSystemInfoSync();
console.log(system.platform, '设备类型');
if (system.platform === 'android') {
return 'Android';
} else if (system.platform === 'ios') {
return 'IOS';
}
}
},
mounted() {
}
}
</script>
<style lang="scss">
.b-Bottom-Fit {
width: 100%;
}
.Android {
padding-bottom: 32rpx;
box-sizing: content-box;
}
.IOS {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: calc(env(safe-area-inset-bottom));
box-sizing: content-box;
}
</style>

96
components/b-Collection/b-Collection.vue Normal file
View File

@ -0,0 +1,96 @@
<template>
<view class="b-Collection">
<!-- 时间 -->
<view class="b-Collection-Date">
{{data['date']}}
</view>
<!-- 收款/应结算 -->
<view class="b-Collection-row-A">
<view class="row-Item">
<view class="row-Item-Label">
收款：
</view>
<view class="row-Item-Value">
￥{{RetainDecimalPoint(data['total_mount'])}}
</view>
</view>
<view class="row-Item">
<view class="row-Item-Label">
应结算：
</view>
<view class="row-Item-Value">
￥{{RetainDecimalPoint(data['total_split_amount'])}}
</view>
</view>
</view>
<!-- 未入账/已入账 -->
<view class="b-Collection-row-B">
<view class="row-Item">
<view class="row-Item-Label">
未入账：
</view>
<view class="row-Item-Value">
￥{{RetainDecimalPoint(data['un_entry'])}}
</view>
</view>
<view class="row-Item">
<view class="row-Item-Label">
已入账：
</view>
<view class="row-Item-Value">
￥{{RetainDecimalPoint(data['entry'])}}
</view>
</view>
</view>
</view>
</template>
<script>
import mixin from '@/static/js/mixin.js'
export default {
mixins: [mixin],
name: "b-Collection",
props: {
data: {
type: Object,
default: () => {}
}
},
data() {
return {
};
}
}
</script>
<style lang="scss">
.b-Collection {
margin-bottom: 40rpx;
&-Date {
line-height: 60rpx;
color: #666666;
font-size: 22rpx;
line-height: 60rpx;
}
.b-Collection-row-A,
.b-Collection-row-B {
display: flex;
justify-content: space-between;
.row-Item {
display: flex;
font-size: 30rpx;
&-Label {
max-width: 120rpx;
min-width: 120rpx;
}
&-Label {}
}
}
}
</style>

108
components/b-Datetime-Picker/b-Datetime-Picker.vue Normal file
View File

@ -0,0 +1,108 @@
<template>
<view class="Datetime-Picker">
<view class="Choose-Input" @tap="show = true">
{{date}}
<view class="arrow"></view>
</view>
<!-- 年月选择组件 -->
<u-datetime-picker ref="datetimePicker" :minDate="GetUserInfor['store_join_time'] * 1000"
:maxDate="new Date().getTime()" @cancel="show = false" :show="show" @confirm="confirm" v-model="value"
mode="year-month">
</u-datetime-picker>
</view>
</template>
<script>
import mixin from '@/static/js/mixin.js'
export default {
mixins: [mixin],
name: "Datetime-Picker",
data() {
return {
value: Number(new Date()),
show: false,
date: ''
};
},
mounted() {
this.DataConvert(new Date().getTime());
// console.log(this['GetUserInfor']['store_join_time'], 'GetUserInfor');
},
methods: {
/**
* @日期选择点击确认时触发事件
* */
confirm(e) {
this['show'] = false;
this.DataConvert(e['value']);
},
/**
* @将时间戳转为年月
* @param {number} t 要转换的时间戳
* @param {number} bit 是否需要将十位时间戳转为13位
* */
DataConvert(t, bit = false) {
if (bit) {
// 后台需要的是十位而前端需要的是十三位,所以需要转换一下
t = t * 1000;
};
let d = new Date(t);
let y = d.getFullYear();
let m = d.getMonth() + 1;
this['date'] = `${y}年${m}月`;
// console.log(t);
this.$emit('Change', Math.ceil(t / 1000));
}
}
}
</script>
<style lang="scss">
.Datetime-Picker {
padding: 10rpx 55rpx 10rpx 32rpx;
border: 1rpx solid #DEDEDE;
box-sizing: border-box;
border-radius: 15rpx;
position: relative;
.arrow {
position: absolute;
width: 40rpx;
height: 100%;
right: 10rpx;
top: 0;
&::after {
content: '';
position: absolute;
left: 50%;
bottom: 10%;
transform: translateX(-50%);
display: block;
margin: 0 auto;
width: 0;
height: 0;
border: 10rpx solid transparent;
border-top-color: #DEDEDE;
}
&::before {
content: '';
position: absolute;
left: 50%;
top: 10%;
transform: translateX(-50%);
display: block;
margin: 0 auto;
width: 0;
height: 0;
border: 10rpx solid transparent;
border-bottom-color: #DEDEDE;
}
}
}
</style>

76
components/b-GroupBuy/b-GroupBuy.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<view class="b-GroupBuy" @tap="Details">
<!-- 时间 -->
<view class="b-GroupBuy-Date">
{{data['date']}}
</view>
<!-- 单子数量 -->
<view class="b-GroupBuy-Quantity">
共{{data['order_num']}}单
</view>
<view class="b-GroupBuy-Amount">
￥{{RetainDecimalPoint(data['total_mount'])}}
<text class="icon iconfont icon-youjiantou"></text>
</view>
</view>
</template>
<script>
import mixin from '@/static/js/mixin.js'
export default {
name: "b-GroupBuy",
mixins: [mixin],
props: {
data: {
type: Object,
default: -1
}
},
data() {
return {
};
},
methods: {
Details() {
// 时间戳格式
let t = new Date(this['data']['date']).getTime() / 1000;
uni.navigateTo({
url: `/b_client/AccountDetails/AccountDetails?date=${this['data']['date']}`
})
}
}
}
</script>
<style lang="scss">
.b-GroupBuy {
position: relative;
margin-bottom: 40rpx;
&-Date {
color: #666666;
font-size: 22rpx;
line-height: 60rpx;
}
&-Quantity {
line-height: 60rpx;
font-size: 24rpx;
}
&-Amount {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
line-height: 60rpx;
font-size: 24rpx;
.icon {
font-size: 30rpx !important;
margin-left: 20rpx !important;
}
}
}
</style>

1169
components/b-Shopping-Cart/b-Shopping-Cart.vue Normal file
View File

File diff suppressed because it is too large Load Diff

69
components/b-Store/b-Store.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<view class="b-Store">
<template v-for="(item,index) in storeList">
<view class="b-Store-Item" :key="index" @tap="Pagego(index,item)">
<image class="img" :src="item['img_url']"></image>
</view>
</template>
</view>
</template>
<script>
import {
GetBrandListAPI
} from '@/common/api/restaurant.js';
import { mapMutations } from 'vuex'
export default {
name: "b-Store",
data() {
return {
storeList: [],
};
},
mounted() {
this.GetList()
},
methods: {
...mapMutations({
SETBRANDINFOR:'shopping/SETBRANDINFOR'
}),
Pagego(index,item) {
if(!item['url'] || !item['brand_status']) return;
// 存入品牌信息
// this.SETBRANDINFOR(item)
uni.navigateTo({
url: `/pages${item['url']}`
})
},
/**
* @获取品牌列表
* */
GetList() {
GetBrandListAPI().then(data => {
this['storeList'] = data;
})
}
}
}
</script>
<style lang="scss">
.b-Store {
padding: 32rpx;
box-sizing: border-box;
.b-Store-Item {
width: 100%;
height: 232rpx;
border-radius: 15rpx;
color: #ffffff;
margin-bottom: 20rpx;
.img {
width: 100%;
height: 100%;
}
}
}
</style>

166
components/b-load/b-load.vue Normal file
View File

@ -0,0 +1,166 @@
<template>
<view class="b-load" :style="[Style]" v-show="display">
<view class="b-load-content">
<view class="b-load-content-Img">
<image :src="LoadImg" mode="" :style="[ImgStyle]"></image>
</view>
<view class="b-load-content-text" :style="[TextStyle]">
{{LoadText}}
</view>
</view>
</view>
</template>
<script>
/**
* 点餐加载组件
* @property { Boolean } show 组件显示
* @property { String } position 加载组件的定位对应css中的定位属性，值为absolute时组件父元素必须是relative
* @property { String } background 加载组件的背景色，16进的或者rgba都可以
* @property { String } img 组件加载中图片
* @property { String } type 加载组件类型
* @property { String } color 提示文字颜色
*/
// 加载中 load
// 已打烊 close
// 没订单 orders
// 无门店 store
import props from './prop.js';
import mixin from '@/static/js/mixin/mixin.js'
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js'
export default {
mixins: [props, mixin, restaurantmixins],
name: "b-load",
data() {
return {
};
},
computed: {
display() {
console.log('组件状态');
return this['show']
},
GetType() {
return this['type']
},
Style() {
let style = {};
style['position'] = this['position'];
style['background-color'] = this['background'];
// 判断是否需要设置层级
if (typeof this['zIndex'] == 'string' && !isNaN(+this['zIndex']) || typeof this['zIndex'] == 'number') {
style['z-index'] = this['zIndex'];
};
// if(typeof this['zindex'] == 'string' && this['zindex'] == 'none'){
// }
return style;
},
ImgStyle() {
return {
width: `${this['width']}rpx`,
height: `${this['height']}rpx`
}
},
TextStyle() {
return {
color: this['color']
};
},
LoadText() {
if (this['text'] != '') {
return this['text'];
}
// 加载中
if (this['GetType'] == 'load') {
return '加载中，请稍后'
} else if (this['GetType'] == 'close') {
// 闭店
return '抱歉，该门店已打烊'
} else if (this['GetType'] == 'orders') {
// 没有订单
return '您还没有小食订单 '
} else if (this['GetType'] == 'store') {
// 没有门店
return '该地区暂无门店信息'
}
},
LoadImg() {
if (this['img'] != '') {
return this['img'];
}
// 加载中
if (this['GetType'] == 'load') {
if (this['BrandInfor']['brand_id'] == 1) {
return this.qnyurl('kdjload.png');
} else if (this['BrandInfor']['brand_id'] == 10) {
return this.qnyurl('load.gif', 'xbk');
} else if (this['BrandInfor']['brand_id'] == 13) {
return this.qnyurl('load.png', 'rx');
} else if (this['BrandInfor']['brand_id'] == 5) {
return this.qnyurl('load.png?', 'mdl');
} else if (this['BrandInfor']['brand_id'] == 19) {
return this.qnyurl('load.png?', 'dyp');
}else if (this['BrandInfor']['brand_id'] == 2) {
// return this.qnyurl('load.png', 'nx');
}
} else if (this['GetType'] == 'close') {
// 闭店
if (this['BrandInfor']['brand_id'] == 2) {
return this.qnyurl('closureimg.png','nx');
}
return this.qnyurl('closureimg.png', 'rx');
} else if (this['GetType'] == 'orders') {
if (this['BrandInfor']['brand_id'] == 2) {
return this.qnyurl('orderno.png','nx');
}
return this.qnyurl('orderno.png', 'rx');
// 没有订单
// if (this['BrandInfor']['brand_id'] == 13) {
// return this.qnyurl('orderno.png', 'rx');
// } else if (this['BrandInfor']['brand_id'] == 13) {
// return this.qnyurl('orderno.png', 'rx');
// } else if (this['BrandInfor']['brand_id'] == 13) {
// return this.qnyurl('orderno.png', 'rx');
// } else if (this['BrandInfor']['brand_id'] == 13) {
// return this.qnyurl('orderno.png', 'rx');
// }
} else if (this['GetType'] == 'store') {
// 没有门店
if (this['BrandInfor']['brand_id'] == 2) {
return this.qnyurl('closureimg.png','nx');
}
return this.qnyurl('default.png', 'rx');
}
},
}
}
</script>
<style lang="scss">
.b-load {
width: 100%;
height: 100%;
left: 0;
top: 0;
&-content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
&-text {
margin-top: 34rpx;
font-size: 28rpx;
}
}
}
</style>

45
components/b-load/prop.js Normal file
View File

@ -0,0 +1,45 @@
export default {
props: {
img: {
type: String,
default: ''
},
text: {
type: String,
default: ''
},
show: {
type: Boolean,
default: false
},
position: {
type: String,
default: 'fixed'
},
background: {
type: String,
default: '#FFFFFF'
},
width: {
type: String,
default: ''
},
height: {
type: String,
default: ''
},
type: {
type: String,
default: 'load'
},
color: {
type: String,
default: '#FFFFFF'
},
zIndex: {
type:[Number,String],
default:10
}
}
}

533
components/b-nx-sku-popup/b-nx-sku-popup.vue Normal file
View File

@ -0,0 +1,533 @@
<template>
<view class="b-nx-sku-popup">
<u-popup :show="show" @close="show = false" round="20" closeable zIndex="20080">
<view class="commodity-sku">
<!-- 商品图 -->
<view class="commodity-sku-cover">
<!-- 封面 -->
<image class="img" :src="skuinfor['product_img']" mode="widthFix"></image>
<!-- 名称-数量 -->
<view class="commodity-sku-cover-name">
<view class="commodity-sku-cover-name-title" :style="{color:Brand()['ThemeColor']}">
{{skuinfor['product_name']}}
</view>
<view class="commodity-sku-cover-name-cart">
<image class="img" :src="qnyurl('reduce.png','rx')" mode="" @tap="reducequantity()"></image>
<view class="num" style="color: #a7d500;">
{{skuinfor['num']}}
</view>
<image class="img" :src="qnyurl('add.png','rx')" mode="" @tap="Addquantity()"></image>
</view>
</view>
</view>
<view class="commodity-sku-option" v-if="skuinfor['details']">
<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" style="height: 400rpx;">
<view class="commodity-sku-option-item" v-if="skuinfor['details']['accessories']['length']">
<view class="commodity-sku-option-item-label">
加料
</view>
<view class="commodity-sku-option-item-values">
<template v-for="(item,index) in skuinfor['details']['accessories']">
<view :class="{'commodity-sku-option-item-values-Disable':item['disable'],
'commodity-sku-option-item-values-activation':item['checked']}" @tap="accessoriesClick(item)"
class="commodity-sku-option-item-values-item" :key="index">
<text>{{item['name']}}</text>
<text v-if="(+item['price']) > 0 ">￥{{_amount(item['price'])}}</text>
</view>
</template>
</view>
</view>
<template v-for="(item,index) in skuinfor['details']['spu_specs']">
<view class="commodity-sku-option-item" :key="index" v-if="item['code']">
<view class="commodity-sku-option-item-label">
{{item['name']}}
</view>
<view class="commodity-sku-option-item-values">
<template v-for="(item2,index2) in item['values']">
<view @tap="skuClick(index,index2)"
:class="{'commodity-sku-option-item-values-activation':item2['checked']}"
class="commodity-sku-option-item-values-item" :key="index2">
<text>{{item2['name']}}</text>
<text v-if="(+item2['price']) > 0 ">￥{{__amount(item2['price'])}}</text>
</view>
</template>
</view>
</view>
</template>
</scroll-view>
</view>
<view class="commodity-sku-Infor">
<view class="commodity-sku-Infor-left">
<view class="commodity-sku-Infor-left-Price">
<text class="text1">￥</text>
<text class="text2">{{_amount(skuinfor['adj_pay'] * skuinfor['num'])}}</text>
</view>
<view class="commodity-sku-Infor-left-sku">
<view class="">
{{Infos['sku']}}
</view>
<view class="">
加料:{{Infos['accessories']}}
</view>
</view>
</view>
<!-- Addcommodity方法中不可设置形参,因为点击事件默认第一个参数就是点击事件的各种参数并不是形参中所设置的默认值 -->
<!-- 所以在点击时手动传入skuinfor参数 -->
<view class="commodity-sku-Infor-right" @tap="Addcommodity">
加入购物车
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import {
mapGetters
} from 'vuex';
import mixin from '@/static/js/mixin/mixin.js'
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js'
export default {
mixins: [mixin, restaurantmixins],
name: "b-nx-sku-popup",
data() {
return {
// 弹框显示/隐藏
show: false,
// 弹框商品详情
skuinfor: {},
// 规格文字
skutext: '',
// 所选择的辅料组合数据,包含展示文字以及code
Infos: {},
// 所选的辅料
skuInfos:[],
};
},
computed: {
...mapGetters({
GetcommodityInfor: 'shopping/GetcommodityInfor'
}),
},
watch: {
// 计算属性获取到的弹框详情数据不可直接修改,所以重新赋值便于修改数量
GetcommodityInfor(value) {
this['skuinfor'] = JSON.parse(JSON.stringify(value));
this.skuInit();
},
},
mounted() {
// 默认选择
// this['spuCode'] = this['skuinfor']['spu_specs'][0]['code'];
},
methods: {
/**
* @添加数量
* */
Addquantity(num = 1) {
this['skuinfor']['num'] += num;
},
/**
* @选择规格数量减
* */
reducequantity(num = 1) {
if (this['skuinfor']['num'] == 1) return;
this['skuinfor']['num'] -= num;
},
/**
* @加入购物车
* */
Addcommodity() {
let self = this;
// console.log(self['skuinfor'],'skuinfor');
// return;
uni.$u.debounce(() => {
self.ADD_CART({
commodity: self['skuinfor'],
quantity: self['skuinfor']['num']
}).then(() => {
// console.log('加入成功');
self['show'] = false;
// console.log(self['show'],'show');
});
}, 800, true)
},
/**
* @规格选择
* */
skuClick(index1, index2) {
// 将当前点击的类型规格高亮状态改变,其他的设置为不高亮
this['skuinfor']['details']['spu_specs'][index1]['values'].map((item, index) => {
if (index2 == index) {
item['checked'] = true;
} else {
item['checked'] = false;
}
});
this.__skuintegration__();
},
/**
* 规格匹配辅助方法
* 先将可组合的辅料(sku_infos)code全部转为字符串，利用字符串对比方式对比用户所选择的组合
* */
skuInit() {
for (let i = 0; i < this['skuinfor']['details']['sku_infos']['length']; i++) {
let item = this['skuinfor']['details']['sku_infos'][i];
let _KYE = "name";
// 文字排序
let _SKU = item['specs'].concat([]).sort((a, b) => a[_KYE].localeCompare(b[_KYE])).map(item => item[
'spec_code']).join('_');
item['skuCode'] = _SKU;
};
/**
* 为加料选项添加是否可选，用于对用户选择辅料之后加料选项是否可选做准备
* 默认不选中
* */
if(this['skuinfor']['details']['accessories']['length']){
this['skuinfor']['details']['accessories'].map(item => {
// 是否禁用
item['disable'] = false;
// 是否选择
item['checked'] = false;
});
}
this.__skuintegration__();
},
/**
* 重点逻辑
* */
__skuintegration__() {
let self = this;
const _item = this['skuinfor']['details'];
// 该方法中每一个Promise所返回的都为一个步骤结束所得到的结果
/**
* 将spu_specs中所有辅料合并到一个数组中，并且添加新属性skuname
* 用于筛选出已经选择的(或者默认选中的)
* */
this.choice().then(_newSupItem => {
// 取出_newSupItem中checked为选中状态的每一项
this['skuInfos'] = _newSupItem.filter(item => item['checked']);
console.log(this['skuInfos'], '选择的辅料');
return self.codeSort();
}).then(skuArray=>{
console.log(skuArray, '选择的辅料在sku_infos中的数据包');
this['Infos'] = skuArray;
this.$forceUpdate();
return self.accessoriesmutex();
}).then(res=>{
console.log(res,'加料');
return this.price();
}).then(res=>{
console.log(res,'价格');
this.ExhibitionText();
})
},
// 计算价格
price() {
return new Promise(resolve => {
let skupay = 0;
try{
skupay = this['skuinfor']['details']['accessories'].map(item => {
if (item['checked']) {
return +item['price']
};
return 0;
}).reduce(function(previousValue, currentValue) {
return previousValue + currentValue;
});
}catch(e){
//TODO handle the exception
}
let price = +this['Infos']['pay_price'] + skupay;
// 加价价格
// this['skuinfor']['add_price'] = skupay;
// 实际价格
// this['skuinfor']['adj_pay'] = price;
// 加价价格
this.$set(this['skuinfor'], 'adj_pay', price);
// 实际价格
this.$set(this['skuinfor'], 'add_price', skupay);
// 计算价格之后匹配文字
resolve(price);
})
},
// 点击加料
accessoriesClick(t) {
if (t['disable']) return;
let index = this['skuinfor']['details']['accessories'].findIndex(item => item['code'] == t['code']);
let checked = !this['skuinfor']['details']['accessories'][index]['checked'];
this.$set(this['skuinfor']['details']['accessories'][index], 'checked', checked);
this.price().then(res=>{
this.ExhibitionText();
this.$forceUpdate();
});
// console.log(this['skuinfor']['details']['accessories']);
},
// 处理选择数据
choice() {
return new Promise(resolve => {
const _newSupItemArr = this['skuinfor']['details']['spu_specs'].map(item => {
// 过滤掉吸管
if (item['code']) {
item['values'].map(_item => {
_item['skuname'] = item['name'];
});
return item['values']
};
return [];
});
const newSupItem = _newSupItemArr.flatMap(item => item);
resolve(newSupItem)
})
},
// 选中辅料组合code与可排列组合code排序,方便后面对比
codeSort(){
return new Promise(resolve=>{
/**
* sku_infos为可组合的辅料数组,为防止用户所选择的辅料组合与可选择的辅料组合的code对比匹配出现问题,利用skuname字段对两个组合经行排序
* 保证所对比的code前后顺序一直
* 注意：如果直接取出code然后转为字符串会有所不同。因为spu_specs与sku_infos的规格排序不一样
* */
let _KYE = "skuname";
let _K = this['skuInfos'].concat([]).sort((a, b) => a[_KYE].localeCompare(b[_KYE]));
let _SKU = _K.map(item => item['code']).join('_');
// 利用用户已经选择的排列组合与数据给出的可匹配的组合对比,取出整个对象
const res = this['skuinfor']['details']['sku_infos'].find(item => item['skuCode'] == _SKU);
resolve(res);
})
},
// 辅料与加料互斥处理
accessoriesmutex(){
return new Promise(resolve=>{
// 取出当前辅料互斥匹配规则
let spuSpecsCode = [];
for (let x = 0; x < this['skuinfor']['details']['allow_rules']['length']; x++) {
let item = this['skuinfor']['details']['allow_rules'][x];
for (let l = 0; l < item['length']; l++) {
if (item[l] == this['Infos']['code']) {
spuSpecsCode = item;
}
}
};
// 处理加料禁用
let skuArray = [];
{
for (let k = 0; k < this['skuinfor']['details']['accessories']['length']; k++) {
let accItem = this['skuinfor']['details']['accessories'][k];
if (spuSpecsCode.indexOf(accItem['code']) == -1) {
accItem['disable'] = true;
accItem['checked'] = false;
continue;
};
// 因为只在初始化时将disable设了状态,当用户再次选择之后如果已经设置为false的状态需要转换回来
accItem['disable'] = false;
skuArray.push(accItem);
};
};
console.log(this['skuinfor']['details']['accessories'],'*-*-*-');
this.$forceUpdate();
resolve(skuArray)
})
},
// 展示文字处理
ExhibitionText(){
// 辅料展示文字
let _KYE = "skuname";
let KYE_ = "name";
let _K = this['skuInfos'].concat([]).sort((a, b) => a[_KYE].localeCompare(b[_KYE]));
let _ACC = this['skuinfor']['details']['accessories'].filter(item => { return item['checked'] });
// 展示文字处理
const _SKUTEXT = _K.map(item => item[KYE_]).join('/');
const _ACCTEXT = _ACC.map(item => item['name']).join('/');
// CODE处理
const _ACCCODE = _ACC.map(item => item['code']).join(',');
// 展示数据
this.$set(this['Infos'],'sku',_SKUTEXT);
this.$set(this['Infos'],'accessories',_ACCTEXT);
let skustr_ = `${this['Infos']['sku']}/${this['Infos']['accessories']}`;
// 如果只有一个规格可选则不显示最后一位的/
if(skustr_[skustr_.length-1] == '/'){
skustr_ = skustr_.substr(0,skustr_['length']-1)
};
// 设置提交数据
this.$set(this['skuinfor'],'sku',`${this['Infos']['sku']}/${this['Infos']['accessories']}`);
this.$set(this['skuinfor'],'sku_code',`${this['Infos']['code']}|${_ACCCODE}`);
},
}
}
</script>
<style lang="scss">
// 规格弹框样式
.commodity-sku {
&-cover {
// height: 560rpx;
height: auto;
position: relative;
.img {
width: 100%;
}
&-title {
color: #333333;
font-size: 34rpx;
}
&-name {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
color: #ffffff;
padding: 10rpx 32rpx;
background-color: rgba(255, 255, 255, 0.5);
&-cart {
flex: 1;
height: 60rpx;
display: flex;
justify-content: flex-end;
font-size: 36rpx;
align-items: center;
.num {
max-width: 100rpx;
min-width: 100rpx;
text-align: center;
color: #000000;
}
.img {
width: 42rpx;
height: 42rpx;
}
}
}
}
&-option {
padding: 32rpx;
&-item {
width: 100%;
// height: 70rpx;
font-size: 26rpx;
margin-bottom: 32rpx;
// display: flex;
// justify-content: flex-start;
// margin-bottom: 15rpx;
&-label {
min-width: 112rpx;
height: 100%;
color: #999999;
line-height: 70rpx;
}
&-values {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
&-activation {
background: rgba(167, 213, 0, 0.2) !important;
border: 1rpx solid rgba(167, 213, 0, 0.5) !important;
color: rgb(167, 213, 0) !important;
}
&-Disable {
background-color: #adadad33 !important;
border: 1rpx solid #adadad33 !important;
color: #939393 !important;
}
&-item {
// min-width: 112rpx;
padding: 0 20rpx;
height: 100%;
line-height: 70rpx;
background: #F7F8FA;
border-radius: 6rpx;
margin-bottom: 20rpx;
text-align: center;
margin-right: 15rpx;
border: 1rpx solid #F7F8FA;
}
}
}
}
&-Infor {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx;
border-top: 1rpx solid rgba(102, 102, 102, 0.1);
&-left {
&-Price {
color: #FF780F;
.text1 {
font-size: 24rpx;
}
.text2 {
font-size: 36rpx;
}
}
&-sku {
color: #666666;
font-size: 22rpx;
}
}
&-right {
width: 254rpx;
height: 86rpx;
max-width:254rpx;
max-height:86rpx;
min-width:254rpx;
min-height:86rpx;
background: linear-gradient(-77deg, #a7d500, #d0dbaa);
box-shadow: 0 6rpx 8rpx 0 rgba(74, 111, 231, 0.2300);
border-radius: 43rpx;
text-align: center;
line-height: 86rpx;
color: #ffffff;
}
}
}
</style>

409
components/b-orders/b-order-item-settlement.vue Normal file
View File

@ -0,0 +1,409 @@
<template>
<view class="Order-settlement">
<view class="Order-settlement-left">
<view class="Order-settlement-left-item">
原价: ￥{{RetainDecimalPoint(InforData['original_price'])}}
</view>
<view class="Order-settlement-left-item">
消费补贴卡抵扣：￥{{RetainDecimalPoint(InforData['deduction_amount_total'])}}
</view>
<view class="Order-settlement-left-item">
预估佣金：￥{{InforData['self_commission']}}
</view>
</view>
<view class="Order-settlement-btn-price">
<view class="Order-settlement-btn-price-pay-price">
<text class="text1">{{InforData['status'] | OrderStateText}}：</text>
<text class="text2" style="color:#DE2F2C">￥{{RetainDecimalPoint(InforData['pay_price'])}}</text>
</view>
<!-- 待支付 -->
<view class="Order-settlement-btn-price-operate" v-if="InforData['status'] == OrderStatus0">
<view class="btn btn1" @tap.stop="cancel(InforData['order_sn'],index)">
取消订单
</view>
<view class="btn btn2" :style="[orderStyle]" @tap.stop="payment(InforData['order_sn'],index)">
去支付
</view>
</view>
<!-- 已出餐 -->
<view class="Order-settlement-btn-price-operate" v-if="InforData['status'] == OrderStatus2">
<!-- 瑞幸-已出参订单按钮 -->
<template v-if="Brand_RX">
<view class="btn btn1" @tap.stop="location">
联系客服
</view>
<!-- <navigator hover-class="none" -->
<!-- :url="`/pages/restaurant/order/order-details/rx-orders-details?order=${InforData['order_sn']}`"> -->
<view class="btn btn2" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['RX_brand_id'])">
查看取餐码
</view>
<!-- </navigator> -->
</template>
<!-- 肯德基-已出参订单按钮 -->
<template v-if="Brand_KFC">
<!-- <navigator hover-class="none"
:url="`/pages/restaurant/order/order-details/order-details?order=${InforData['order_sn']}`"> -->
<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['KFC_brand_id'])">
查看取餐码
</view>
<!-- </navigator> -->
</template>
<!-- 麦当劳-已出参订单按钮 -->
<template v-if="Brand_MDL">
<!-- <navigator hover-class="none" -->
<!-- :url="`/pages/restaurant/order/order-details/xbk-orders-details?order=${InforData['order_sn']}`"> -->
<view class="btn btn1" :class="`theme-Union-Class-${BrandInfor['brand_id']}-1`" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['XBK_brand_id'])">
查看取餐码
</view>
<!-- </navigator> -->
</template>
<!-- 星巴克-已出参订单按钮 -->
<template v-if="Brand_XBK">
<!-- <navigator hover-class="none" -->
<!-- :url="`/pages/restaurant/order/order-details/xbk-orders-details?order=${InforData['order_sn']}`"> -->
<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['XBK_brand_id'])">
取餐口令
</view>
<!-- </navigator> -->
</template>
</view>
<!-- 已出餐（部分退款） -->
<view class="Order-settlement-btn-price-operate" v-if="InforData['status'] == OrderStatus4">
<!-- 瑞幸-已出参（部分退款）订单按钮 -->
<template v-if="Brand_RX">
<!-- <navigator hover-class="none" -->
<!-- :url="`/pages/restaurant/order/order-details/rx-orders-details?order=${InforData['order_sn']}`"> -->
<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['RX_brand_id'])">
查看取餐码
</view>
<!-- </navigator> -->
</template>
<!-- 肯德基-已出参（部分退款）订单按钮 -->
<template v-if="Brand_KFC">
<!-- <navigator hover-class="none" -->
<!-- :url="`/pages/restaurant/order/order-details/order-details?order=${InforData['order_sn']}`"> -->
<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['KFC_brand_id'])">
查看取餐码
</view>
<!-- </navigator> -->
</template>
<!-- 麦当劳-已出参订单按钮 -->
<template v-if="Brand_MDL">
<!-- <navigator hover-class="none" -->
<!-- :url="`/pages/restaurant/order/order-details/xbk-orders-details?order=${InforData['order_sn']}`"> -->
<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['XBK_brand_id'])">
查看取餐码
</view>
<!-- </navigator> -->
</template>
<!-- 星巴克-已出参（部分退款）订单按钮 -->
<template v-if="Brand_XBK">
<!-- <navigator hover-class="none" -->
<!-- :url="`/pages/restaurant/order/order-details/xbk-orders-details?order=${InforData['order_sn']}`"> -->
<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['XBK_brand_id'])">
查看口令
</view>
<!-- </navigator> -->
</template>
</view>
<!-- 待出餐/已退款（订单失败就会退款） -->
<view class="Order-settlement-btn-price-operate"
v-if="InforData['status'] == OrderStatus1 || InforData['status'] == OrderStatus3">
<!-- 瑞幸-待出餐/已退款订单按钮 -->
<template v-if="Brand_RX">
<view class="btn btn1" @tap.stop="location">
联系客服
</view>
<!-- <navigator hover-class="none" -->
<!-- :url="`/pages/restaurant/order/order-details/rx-orders-details?order=${InforData['order_sn']}`"> -->
<view class="btn btn1 btn2" @tap.stop="OrderDetails(shopid['RX_brand_id'])">
查看订单
</view>
<!-- </navigator> -->
</template>
<!-- 肯德基-待出餐/已退款订单按钮 -->
<template v-if="Brand_KFC">
<view class="btn btn1" @tap.stop="location">
联系客服
</view>
</template>
<!-- 麦当劳-待出餐/已退款订单按钮 -->
<template v-if="Brand_MDL">
<view class="btn btn1" :class="`theme-Union-Class-${BrandInfor['brand_id']}-1`" @tap.stop="location">
联系客服
</view>
</template>
<!-- 星巴克-待出餐/已退款订单按钮 -->
<template v-if="Brand_XBK">
<!-- <navigator hover-class="none" -->
<!-- :url="`/pages/restaurant/order/order-details/xbk-orders-details?order=${InforData['order_sn']}`"> -->
<view class="btn btn1 btn2" @tap.stop="OrderDetails(shopid['XBK_brand_id'])">
查看订单
</view>
<!-- </navigator> -->
</template>
</view>
<!-- 已取消 -->
<view class="Order-settlement-btn-price-operate" v-if="InforData['status'] == OrderStatus5">
<!-- 瑞幸-已取消订单按钮 -->
<template v-if="Brand_RX">
<view class="btn btn1" @tap.stop="location">
联系客服
</view>
<view class="btn btn1 btn2" @tap.stop="OrderReorder">
再来一单
</view>
</template>
<!-- 肯德基-已取消订单按钮 -->
<template v-if="Brand_KFC">
<view class="btn btn1 btn2" @tap.stop="OrderReorder">
重新下单
</view>
</template>
<!-- 肯德基-已取消订单按钮 -->
<template v-if="Brand_MDL">
<view class="btn btn1 btn2" :class="`theme-Union-Class-${BrandInfor['brand_id']}-1`" @tap.stop="OrderReorder">
重新下单
</view>
</template>
<!-- 星巴克-已取消订单按钮 -->
<template v-if="Brand_XBK">
<view class="btn btn1" @tap.stop="location">
联系客服
</view>
<view class="btn btn1 btn2" @tap.stop="OrderReorder">
重新下单
</view>
</template>
</view>
</view>
</view>
</template>
<script>
import {
RXSERVICE
} from '@/static/js/serviceurl.js'
import mixin from '@/static/js/mixin/mixin.js';
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
import {
mapGetters,
} from 'vuex'
export default {
name: 'b-order-item-settlement',
mixins: [mixin, restaurantmixins],
// 取消订单,再次支付,重新下单
inject: ["cancel", "Reorder", "payments"],
props: {
index: {
type: Number,
default: 0
},
infor: {
type: Object,
default: () => {}
}
},
computed: {
InforData() {
return this['infor']
},
// 各品牌主体色不一样
orderStyle() {
let style = {};
switch (this['BrandInfor']['brand_id']) {
case 1:
style['color'] = uni.$u.addUnit('#C63836');
style['border'] = uni.$u.addUnit('1px solid #DC7473');
break;
case 5:
style['color'] = uni.$u.addUnit('#000000');
style['background-color'] = uni.$u.addUnit('#FFBC0D');
break;
case 10:
style['color'] = uni.$u.addUnit('#ffffff');
style['background-color'] = uni.$u.addUnit('#00AF66');
// style['border'] = uni.$u.addUnit('1px solid #00AF66');
break;
case 13:
style['color'] = uni.$u.addUnit('#4A6FE7');
style['border'] = uni.$u.addUnit('1px solid #4A6FE7');
break;
};
return style;
},
Brand_RX() {
return this['BrandInfor']['brand_id'] == 13;
},
Brand_KFC() {
return this['BrandInfor']['brand_id'] == 1;
},
Brand_XBK() {
return this['BrandInfor']['brand_id'] == 10;
},
Brand_MDL() {
return this['BrandInfor']['brand_id'] == 5;
},
Brand_DYP() {
return this['BrandInfor']['brand_id'] == 19;
}
},
data() {
return {
}
},
methods: {
// 重新下单前数据重构
OrderReorder() {
let arr = this['InforData']['goods'].map(item => {
console.log(this['InforData'],'InforData')
item['restaurant_id'] = this['InforData']['restaurant_id'];
// 以下数据用于重新下单时保存当前店铺信息
item['restaurant_address'] = this['InforData']['restaurant_address'];
item['restaurant_name'] = this['InforData']['restaurant_name'];
item['latitude'] = this['InforData']['lat'];
item['longitude'] = this['InforData']['lng'];
// 因为前端记录商品数量使用的是num,而重新加入购物车时后台代表数量的则是amount
item['num'] = item['amount'];
item['pay'] = item['original_price'] / item['amount'];
// item['pay_price'] = item['original_price'];
return item;
});
this.Reorder(arr);
},
OrderDetails(type) {
let url;
switch (type) {
case this['shopid']['KFC_brand_id']:
url =
`/pages/restaurant/order/order-details/order-details?order=${this['InforData']['order_sn']}`;
break;
case this['shopid']['XBK_brand_id']:
url =
`/pages/restaurant/order/order-details/xbk-orders-details?order=${this['InforData']['order_sn']}`;
break;
case this['shopid']['RX_brand_id']:
url =
`/pages/restaurant/order/order-details/rx-orders-details?order=${this['InforData']['order_sn']}`;
break;
};
uni.navigateTo({url})
},
/**
* @跳转客服
* */
service() {
uni.openCustomerServiceChat({
extInfo: {
url: RXSERVICE,
},
corpId: 'ww4f46b491a045158c',
success(e) {
console.log(e)
},
fail(e) {
console.log(e)
}
})
},
}
}
</script>
<style lang="scss">
.Order-settlement {
padding: 0 32rpx 21rpx 32rpx;
margin-top: 48rpx;
display: flex;
justify-content: space-between;
&-left {
color: #333333;
font-size: $FONTSIZE24;
&-item:nth-of-type(1) {
margin-bottom: 12rpx;
}
&-item:nth-of-type(2) {
margin-bottom: 12rpx;
}
}
&-btn-price {
display: flex;
align-items: flex-end;
flex-direction: column;
justify-content: space-between;
&-pay-price {
.text1 {
color: #333333;
font-size: $FONTSIZE24;
}
.text2 {
// color: #CE211F;
font-size: $FONTSIZE36;
}
}
&-operate {
display: flex;
.btn {
width: 160rpx;
height: 58rpx;
font-size: $FONTSIZE22;
text-align: center;
// line-height: 58rpx;
display: flex;
align-items: center;
justify-content: center;
}
.btn1 {
border: 2rpx solid #E3E3E3;
border-radius: 50rpx;
color: #666666;
}
.btn2 {
// border: 2rpx solid #C63836;
border-radius: 50rpx;
// color: #C63836;
margin-left: 20rpx;
}
}
}
}
</style>

390
components/b-orders/b-orders-kfc.vue Normal file
View File

@ -0,0 +1,390 @@
<template>
<view class="b-orders" @tap.stop="orderdetails">
<!-- 肯德基门店信息 -->
<view class="b-orders-header" v-if="item['brand_id'] == 1">
<view class="b-orders-header-label">
门店
</view>
<view class="b-orders-header-name">
{{item['restaurant_name']}}
</view>
<!-- 待出餐 -->
<view class="b-orders-header-state-70B452">
<text v-if="InforData['status'] == OrderStatus0">{{wait_for}}</text>{{InforData['status'] | OrderState}}
</view>
</view>
<!-- 麦当劳门店信息 -->
<view class="b-orders-header-Mdl" v-if="item['brand_id'] == 5">
<view class="b-orders-header-Mdl-label">
门店
</view>
<view class="b-orders-header-Mdl-name">
{{item['restaurant_name']}}
</view>
<!-- 待出餐 -->
<view class="b-orders-header-Mdl-state-MDL-70B452">
<text class="tiem" v-if="InforData['status'] == OrderStatus0">{{wait_for}}</text>
<text>{{InforData['status'] | OrderState}}</text>
</view>
</view>
<!-- 订单信息 -->
<view class="b-orders-infor">
<view class="b-orders-infor-item">
<view class="b-orders-infor-item-label">
订单编号:
</view>
<view class="b-orders-infor-item-value">
{{item['order_no']?item['order_no']:item['order_sn']}}
</view>
</view>
<view class="b-orders-infor-item">
<view class="b-orders-infor-item-label">
下单时间:
</view>
<view class="b-orders-infor-item-value">
{{item['create_time']}}
</view>
</view>
</view>
<view class="b-orders-list" :style="{height: item['goods']['length']>3?height:'auto'}">
<template v-for="(item,index) in item['goods']">
<view class="b-orders-list-item" :key="index">
<view class="b-orders-list-item-name">
{{item['product_name']}}
</view>
<view class="b-orders-list-item-num">
x{{item['amount']}}
</view>
</view>
</template>
</view>
<!-- 展开 -->
<view class="b-orders-expand" v-if="item['goods'] && item['goods']['length']>3" @tap.stop="show = !show">
{{ShowText}}
</view>
<!-- 订单底部结算组件 -->
<b-order-item-settlement :infor="item" :index="index"></b-order-item-settlement>
</view>
</template>
<script>
// 客服链接
import {
KFCSERVICE
} from '@/static/js/serviceurl.js';
// 订单底部结算组件
import bOrderItemSettlement from './b-order-item-settlement.vue';
import mixin from '@/static/js/mixin/mixin.js';
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
export default {
mixins: [mixin,restaurantmixins],
name: "b-orders",
components: {
bOrderItemSettlement
},
props: {
item: {
type: Object,
default: () => {}
},
index: {
type: Number,
default: 0
}
},
data() {
return {
height: '200rpx',
show: false,
// countDown:null,
// wait_for:''
};
},
watch: {
show(v) {
if (v) {
this['height'] = 'auto';
} else {
this['height'] = '200rpx';
}
},
// 状态改变再次调用
status(v){
if(v != 0){
clearTimeout(this['countDown']);
}
},
},
computed: {
ShowText() {
return this['show'] ? '收起' : '展开';
},
InforData() {
return this['item'];
},
order_no() {
return this['InforData']['order_no'] ? this['InforData']['order_no'] : this['InforData']['order_sn']
},
status(){
return this['InforData']['status']
}
},
mounted() {
this.tiem(this['InforData']['status'], this['InforData']['createtime'])
},
methods: {
orderdetails() {
if (this['InforData']['status'] == 2 || this['InforData']['status'] == 5 || this['InforData']['status'] ==
1) {
uni.navigateTo({
url: `/pages/restaurant/order/order-details/order-details?order=${this['item']['order_sn']}`
})
}
},
// 取消订单
cancel(order_sn) {
this.$emit('cancel', order_sn, this['index']);
},
// 重新支付
payment(order_sn) {
this.$emit('payment', order_sn, this['item']['restaurant_id']);
},
// 重新下单
Reorder() {
let arr = this['item']['goods'].map(item => {
item['restaurant_id'] = this['item']['restaurant_id'];
// 以下数据用于重新下单时保存当前店铺信息
item['restaurant_address'] = this['item']['restaurant_address'];
item['restaurant_name'] = this['item']['restaurant_name'];
item['latitude'] = this['item']['lat'];
item['longitude'] = this['item']['lng'];
return item
})
// console.log(arr, 'arr');
this.$emit('Reorder', arr);
},
/**
* @跳转客服
* */
service() {
uni.openCustomerServiceChat({
extInfo: {
url: KFCSERVICE,
},
corpId: 'ww4f46b491a045158c',
success(e) {
// console.log(e)
},
fail(e) {
// console.log(e)
}
})
},
},
}
</script>
<style lang="scss">
.b-orders {
width: 100%;
// min-height: 637rpx;
background: #FFFFFF;
box-shadow: 0 0 14rpx 1rpx rgba(174, 174, 174, 0.3300);
border-radius: 20rpx;
overflow: hidden;
margin-top: 20rpx;
&-header-Mdl{
background: #FFFAEC !important;
}
&-header,&-header-Mdl {
// height: 70rpx;
background: #F6F6F6;
padding: 21rpx 30rpx;
font-size: $FONTSIZE28;
display: flex;
justify-content: flex-start;
&-label {
background: #E64946;
border-radius: 2rpx;
color: #FFFFFF;
margin-right: 15rpx;
padding: 2rpx 10rpx;
}
&-name {
color: #333333;
flex: 1;
}
&-state-E64946 {
color: #E64946;
}
&-state-999999 {
color: #999999;
}
&-state-70B452 {
color: #70B452;
}
&-state-MDL-70B452 {
.tiem{
color: #DE2F2C;
margin-right: 10rpx;
}
}
}
&-infor {
font-size: $FONTSIZE28;
color: #666666;
padding: 26rpx 32rpx;
position: relative;
&::after {
content: '';
position: absolute;
width: 90%;
bottom: 0;
left: 50%;
height: 1rpx;
background-color: #E3E3E3;
transform: scale(0.5, 0.5);
transform: translateX(-50%);
}
&-item {
margin-bottom: 23rpx;
display: flex;
justify-content: space-between;
&-label {
max-width: 170rpx;
min-width: 170rpx;
}
&-value {
text-align: right;
flex: 1;
}
}
}
&-list {
padding: 32rpx 32rpx 0 32rpx;
overflow: hidden;
transition: all 0.5s;
&-item {
margin-bottom: 20rpx;
display: flex;
justify-content: space-between;
font-size: $FONTSIZE28;
&-name {
flex: 1;
}
}
}
&-expand {
width: 100%;
line-height: 80rpx;
font-size: $FONTSIZE24;
text-align: center;
position: relative;
// border-bottom: 1rpx solid #E3E3E3;
&::after {
content: '';
position: absolute;
width: 90%;
bottom: 0;
left: 50%;
height: 1rpx;
background-color: #E3E3E3;
transform: scale(0.5, 0.5);
transform: translateX(-50%);
}
}
&-operate {
padding: 0 32rpx 21rpx 32rpx;
margin-top: 48rpx;
display: flex;
justify-content: space-between;
&-left {
color: #333333;
font-size: $FONTSIZE24;
&-item:nth-of-type(1) {
margin-bottom: 12rpx;
}
&-item:nth-of-type(2) {
margin-bottom: 12rpx;
}
}
&-btn-price {
display: flex;
align-items: flex-end;
flex-direction: column;
justify-content: space-between;
&-pay-price {
.text1 {
color: #333333;
font-size: $FONTSIZE24;
}
.text2 {
color: #CE211F;
font-size: $FONTSIZE36;
}
}
&-operate {
display: flex;
.btn {
width: 160rpx;
height: 58rpx;
font-size: $FONTSIZE28;
text-align: center;
line-height: 58rpx;
}
.btn1 {
border: 2rpx solid #E3E3E3;
border-radius: 50rpx;
color: #666666;
}
.btn2 {
border: 2rpx solid #C63836;
border-radius: 50rpx;
color: #C63836;
margin-left: 20rpx;
}
}
}
}
}
</style>

229
components/b-orders/b-orders-rx.vue Normal file
View File

@ -0,0 +1,229 @@
<template>
<view class="b-orders-rx" @tap.stop="OrderDetails">
<!-- 顶部店铺名称/状态栏 -->
<view class="Order-infor">
<view class="Order-infor-Img">
<image :src="qnyurl('rxlogo.png','rx')" class="img"></image>
</view>
<view class="Order-infor-Shop">
<view class="Order-infor-Shop-Name">
{{InforData['restaurant_name']}}
</view>
<view class="Order-infor-Shop-Createtime">
{{InforData['create_time']}}
</view>
</view>
<view class="Order-infor-State">
<view class="State">{{ InforData['status'] | OrderState}}</view>
<view class="time" v-if="InforData['status'] == OrderStatus0">{{wait_for}}</view>
</view>
</view>
<view class="Order-Code">
<view class="Order-Code-Content">
<view class="Order-Code-Content-Number">
自提订单：{{order_no}}
</view>
<view class="Order-Code-Content-Copy" @tap.stop="Copy(order_no)">
复制
</view>
</view>
</view>
<view class="Order-Commodity">
<template v-for="(commodity,index) in InforData['goods']">
<view class="Order-Commodity-item">
<!-- 商品样式 -->
<b-rx-commodity-item :item="commodity" :key="index"></b-rx-commodity-item>
</view>
</template>
</view>
<!-- 订单底部结算组件 -->
<b-order-item-settlement :infor="InforData" :index="index"></b-order-item-settlement>
</view>
</template>
<script>
import mixin from '@/static/js/mixin/mixin.js';
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
// 商品样式组件引入
import bRxCommodityItem from '@/components/b-rx-commodity-item/b-rx-commodity-item.vue'
import bOrderItemSettlement from './b-order-item-settlement.vue'
export default {
name: 'b-orders-rx',
mixins: [mixin,restaurantmixins],
props: {
index:{
type:Number,
default:0
},
item: {
type: Object,
default: () => {}
}
},
components: {
bRxCommodityItem,
bOrderItemSettlement
},
data() {
return {
// status:0,
}
},
computed: {
InforData() {
// 重新下单时需要
return this['item'];
},
order_no(){
return this['InforData']['order_no']?this['InforData']['order_no']:this['InforData']['order_sn']
},
status(){
return this['InforData']['status']
}
},
watch:{
// 状态改变再次调用
status(v){
if(v != 0){
clearTimeout(this['countDown']);
}
},
},
mounted() {
if (this['status'] == this['OrderStatus0']) {
this.tiem(this['status'], this['InforData']['createtime'])
};
},
methods:{
/**
* @点击订单整体时
* */
OrderDetails() {
// 正常逻辑>从品牌进入点餐是会经行一步设置品牌ID的操作(用户进入的品牌)
// 订单逻辑>从我的tab点击进入订单,然后再进入点餐订单,此时是需要看到所有品牌的订单,所以不会设置品牌ID,此时点击订单不可进入详情
if(!this['BrandInfor']['brand_id']) return;
console.log(this['InforData']['status'],this['OrderStatus0']);
if (this['InforData']['status'] == this['OrderStatus0'] ||
this['InforData']['status'] == this['OrderStatus1'] ||
this['InforData']['status'] == this['OrderStatus2'] ||
this['InforData']['status'] == this['OrderStatus5']) {
uni.navigateTo({
url: `/pages/restaurant/order/order-details/rx-orders-details?order=${this['InforData']['order_sn']}`
})
}
},
}
}
</script>
<style lang="scss">
.b-orders-rx {
width: 100%;
background: #FFFFFF;
border-radius: 20rpx;
margin-bottom: 20rpx;
.Order-infor {
width: 100%;
padding: 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
&-Img {
width: 60rpx;
height: 60rpx;
max-width: 60rpx;
max-height: 60rpx;
min-width: 60rpx;
min-height: 60rpx;
margin-right: 17rpx;
.img {
width: 100%;
height: 100%;
}
}
&-Shop {
flex: 1;
&-Name {
color: #333333;
font-size: 30rpx;
margin-bottom: 10rpx;
max-width: 460rpx;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
&-Createtime {
color: #999999;
font-size: 24rpx;
}
}
&-State {
color: #83ACFE;
text-align: center;
.State {
font-size: 26rpx;
margin-bottom: 12rpx;
}
.time {
font-size: 24rpx;
}
}
}
.Order-Code {
padding: 0 30rpx;
font-size: 28rpx;
&-Content {
background-color: #F7F9FC;
width: 100%;
padding: 20rpx;
display: flex;
align-items: center;
justify-content: flex-start;
&-Number {
color: #333333;
}
&-Copy {
color: #4B6FE7;
padding-left:20rpx;
}
}
}
.Order-Commodity {
padding: 32rpx;
&-item {
margin-bottom: 20rpx;
}
}
}
</style>

373
components/b-orders/b-orders-xbk.vue Normal file
View File

@ -0,0 +1,373 @@
<template>
<view class="b-orders-xbk" @tap.stop="orderdetails">
<!-- 门店信息 -->
<view class="b-orders-xbk-header">
<view class="b-orders-xbk-header-Img">
<image :src="qnyurl('xbk_home.png','xbk')" class="img"></image>
</view>
<view class="b-orders-xbk-header-name">
{{item['restaurant_name']}}
</view>
<!-- 待出餐 -->
<view class="b-orders-xbk-header-state-70B452">
<text v-if="InforData['status'] == OrderStatus0">{{wait_for}}</text>{{InforData['status'] | OrderState}}
</view>
</view>
<!-- 订单信息 -->
<view class="b-orders-xbk-infor">
<view class="b-orders-xbk-infor-item">
<view class="b-orders-xbk-infor-item-label">
订单编号:
</view>
<view class="b-orders-xbk-infor-item-value">
{{item['order_no']?item['order_no']:item['order_sn']}}
</view>
</view>
<view class="b-orders-xbk-infor-item">
<view class="b-orders-xbk-infor-item-label">
下单时间:
</view>
<view class="b-orders-xbk-infor-item-value">
{{item['create_time']}}
</view>
</view>
</view>
<view class="b-orders-xbk-list" :style="{height: item['goods']['length']>3?height:'auto'}">
<template v-for="(commodity,index) in item['goods']">
<!-- 商品样式 -->
<b-rx-commodity-item :item="commodity" :key="index"></b-rx-commodity-item>
</template>
</view>
<!-- 展开 -->
<view class="b-orders-xbk-expand" v-if="item['goods'] && item['goods']['length']>3" @tap.stop="show = !show">
{{ShowText}}
</view>
<!-- 订单底部结算组件 -->
<b-order-item-settlement :infor="item" :index="index"></b-order-item-settlement>
</view>
</template>
<script>
// 客服链接
import {
KFCSERVICE
} from '@/static/js/serviceurl.js';
// 订单底部结算组件
import bOrderItemSettlement from './b-order-item-settlement.vue';
import bRxCommodityItem from '@/components/b-rx-commodity-item/b-rx-commodity-item.vue'
import mixin from '@/static/js/mixin/mixin.js';
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
export default {
mixins: [mixin,restaurantmixins],
name: "b-orders",
components: {
bOrderItemSettlement,
bRxCommodityItem
},
props: {
item: {
type: Object,
default: () => {}
},
index: {
type: Number,
default: 0
}
},
data() {
return {
height: '200rpx',
show: false,
// countDown:null,
// wait_for:''
};
},
watch: {
show(v) {
if (v) {
this['height'] = 'auto';
} else {
this['height'] = '200rpx';
}
},
// 状态改变再次调用
status(v){
if(v != 0){
clearTimeout(this['countDown']);
}
},
},
computed: {
ShowText() {
return this['show'] ? '收起' : '展开';
},
InforData() {
return this['item'];
},
order_no() {
return this['InforData']['order_no'] ? this['InforData']['order_no'] : this['InforData']['order_sn']
},
status(){
return this['InforData']['status']
}
},
mounted() {
this.tiem(this['InforData']['status'], this['InforData']['createtime'])
},
methods: {
orderdetails() {
if (this['InforData']['status'] == 2 || this['InforData']['status'] == 5 || this['InforData']['status'] ==
1) {
uni.navigateTo({
url: `/pages/restaurant/order/order-details/xbk-orders-details?order=${this['item']['order_sn']}`
})
}
},
// 取消订单
cancel(order_sn) {
this.$emit('cancel', order_sn, this['index']);
},
// 重新支付
payment(order_sn) {
this.$emit('payment', order_sn, this['item']['restaurant_id']);
},
// 重新下单
Reorder() {
let arr = this['item']['goods'].map(item => {
item['restaurant_id'] = this['item']['restaurant_id'];
// 以下数据用于重新下单时保存当前店铺信息
item['restaurant_address'] = this['item']['restaurant_address'];
item['restaurant_name'] = this['item']['restaurant_name'];
item['latitude'] = this['item']['lat'];
item['longitude'] = this['item']['lng'];
return item
})
// console.log(arr, 'arr');
this.$emit('Reorder', arr);
},
/**
* @跳转客服
* */
service() {
uni.openCustomerServiceChat({
extInfo: {
url: KFCSERVICE,
},
corpId: 'ww4f46b491a045158c',
success(e) {
// console.log(e)
},
fail(e) {
// console.log(e)
}
})
},
},
}
</script>
<style lang="scss" scoped>
.b-orders-xbk {
width: 100%;
// min-height: 637rpx;
background: #FFFFFF;
box-shadow: 0 0 14rpx 1rpx rgba(174, 174, 174, 0.3300);
border-radius: 20rpx;
overflow: hidden;
margin-top: 20rpx;
&-header {
align-items: center;
&-Img{
width: 30rpx;
height: 30rpx;
margin-right: 15rpx;
.img{
width: 100%;
height: 100%;
}
}
// height: 70rpx;
background: #F6F6F6;
padding: 21rpx 30rpx;
font-size: $FONTSIZE28;
display: flex;
justify-content: flex-start;
&-label {
background: #E64946;
border-radius: 2rpx;
color: #FFFFFF;
margin-right: 15rpx;
padding: 2rpx 10rpx;
}
&-name {
color: #333333;
flex: 1;
}
&-state-E64946 {
color: #E64946;
}
&-state-999999 {
color: #999999;
}
&-state-70B452 {
color: #70B452;
}
}
&-infor {
font-size: $FONTSIZE28;
color: #666666;
padding: 26rpx 32rpx;
position: relative;
&::after {
content: '';
position: absolute;
width: 90%;
bottom: 0;
left: 50%;
height: 1rpx;
background-color: #E3E3E3;
transform: scale(0.5, 0.5);
transform: translateX(-50%);
}
&-item {
margin-bottom: 23rpx;
display: flex;
justify-content: space-between;
&-label {
max-width: 170rpx;
min-width: 170rpx;
}
&-value {
text-align: right;
flex: 1;
}
}
}
&-list {
padding: 32rpx;
overflow: hidden;
transition: all 0.5s;
&-item {
margin-bottom: 20rpx;
display: flex;
justify-content: space-between;
font-size: $FONTSIZE28;
&-name {
flex: 1;
}
}
}
&-expand {
width: 100%;
line-height: 80rpx;
font-size: $FONTSIZE24;
text-align: center;
position: relative;
// border-bottom: 1rpx solid #E3E3E3;
&::after {
content: '';
position: absolute;
width: 90%;
bottom: 0;
left: 50%;
height: 1rpx;
background-color: #E3E3E3;
transform: scale(0.5, 0.5);
transform: translateX(-50%);
}
}
&-operate {
padding: 0 32rpx 21rpx 32rpx;
margin-top: 48rpx;
display: flex;
justify-content: space-between;
&-left {
color: #333333;
font-size: $FONTSIZE24;
&-item:nth-of-type(1) {
margin-bottom: 12rpx;
}
&-item:nth-of-type(2) {
margin-bottom: 12rpx;
}
}
&-btn-price {
display: flex;
align-items: flex-end;
flex-direction: column;
justify-content: space-between;
&-pay-price {
.text1 {
color: #333333;
font-size: $FONTSIZE24;
}
.text2 {
color: #CE211F;
font-size: $FONTSIZE36;
}
}
&-operate {
display: flex;
.btn {
width: 160rpx;
height: 58rpx;
font-size: $FONTSIZE28;
text-align: center;
line-height: 58rpx;
}
.btn1 {
border: 2rpx solid #E3E3E3;
border-radius: 50rpx;
color: #666666;
}
.btn2 {
border: 2rpx solid #C63836;
border-radius: 50rpx;
color: #C63836;
margin-left: 20rpx;
}
}
}
}
}
</style>

618
components/b-page-home-mdl/b-page-home-mdl.vue Normal file
View File

@ -0,0 +1,618 @@
<template>
<view class="b-page-home-mdl">
<view class="content-top">
<view class="content-top-process">
<view class="content-top-process-item">
<image class="content-top-process-item-img" :src="qnyurl('mdl-1.png','mdl')"
mode=""></image>
<view class="content-top-process-item-text">
选择餐厅
</view>
</view>
<view class="content-top-process-item">
<image class="content-top-process-item-img" :src="qnyurl('mdl-2.png','mdl')"
mode=""></image>
<view class="content-top-process-item-text">
选择菜品
</view>
</view>
<view class="content-top-process-item">
<image class="content-top-process-item-img" :src="qnyurl('mdl-3.png','mdl')"
mode=""></image>
<view class="content-top-process-item-text">
等待取餐码
</view>
</view>
<view class="content-top-process-item">
<image class="content-top-process-item-img" :src="qnyurl('mdl-4.png','mdl')"
mode=""></image>
<view class="content-top-process-item-text">
到店取餐
</view>
</view>
</view>
<!-- 地址/搜索/选择 -->
<view class="content-top-search">
<view class="content-top-search-area-search">
<navigator url="/pages/restaurant/arealist/arealist" hover-class="none">
<view class="content-top-search-area-search-text">
<!-- 第一次获取肯定是获取不到的，主要是动态显示用户改变的地址 -->
{{UserArae1?UserArae1:UserArae2['city']}}
<view style="transform: rotate(90deg);">
<text class="icon iconfont icon-youjiantou"></text>
</view>
</view>
</navigator>
<u-search placeholder="输入门店名称查询" :showAction="false" v-model="keyword" @search="search">
</u-search>
</view>
<view class="content-top-search-tabs">
<u-tabs @change="e=>{tabsconfig['index'] = e['index']}" :list="tabsconfig['list']"
:scrollable="tabsconfig['scrollable']" :lineColor="tabsconfig['lineColor']"
:lineWidth="tabsconfig['lineWidth']"></u-tabs>
</view>
</view>
</view>
<!-- 店铺列表 -->
<!-- 因为骨架屏的颜色和UI设置背景色冲突所以在没有列表元素时先将背景色设置为白色 -->
<view class="Store-List" :style="{height:`${height}rpx`}">
<!-- 附近餐厅 -->
<view v-show="tabsconfig['index'] == 0">
<scroll-view scroll-y="true" class="scroll-Y" :style="{height:`${height}rpx`}"
@scrolltolower="scrolltolower">
<template v-for="(item,index) in StoreList[0]['list']">
<view class="Store-List-Item" :key="index">
<view class="infot">
<view class="Store-List-Item-Top">
<view class="Store-List-Item-Top-Name">
{{item['restaurant_name']}}
</view>
<view class="Store-List-Item-Top-distance">
{{item['distance']}}m
</view>
</view>
<view class="Store-List-Item-Area">
{{item['restaurant_address']}}
</view>
</view>
<view class="btn" @tap="SETSHOPDETAIL(item);eattypeShow = true;">
去点餐
</view>
</view>
</template>
<view class="default" v-if="StoreList[0]['list']['length'] <= 0">
<img class="img" :src="qnyurl('default.png','rx')" alt="">
<text>该地区暂无门店信息</text>
</view>
</scroll-view>
</view>
<!-- 我的收藏 -->
<view v-show="tabsconfig['index'] == 1">
<scroll-view scroll-y="true" class="scroll-Y" :style="{height:`${height}rpx`}"
@scrolltolower="scrolltolower">
<template v-for="(item,index) in StoreList[1]['list']">
<view class="Store-List-Item" :key="index">
<view class="infot">
<view class="Store-List-Item-Top">
<view class="Store-List-Item-Top-Name">
{{item['restaurant_name']}}
</view>
<view class="Store-List-Item-Top-distance">
{{item['distance']}}m
</view>
</view>
<view class="Store-List-Item-Area">
{{item['restaurant_address']}}
</view>
</view>
<view class="btn" @tap="SETSHOPDETAIL(item);eattypeShow = true;">
去点餐
</view>
</view>
</template>
<view class="default" v-if="StoreList[1]['list']['length'] <= 0">
<img class="img" :src="qnyurl('default.png','rx')" alt="">
<text>该地区暂无门店信息</text>
</view>
</scroll-view>
</view>
<!-- 加载状态 -->
<b-load :show="loading && height>0" position="absolute" width="79" height="80" color="#000000"></b-load>
</view>
<!-- 选择就餐方式弹框 -->
<u-popup :show="eattypeShow" @close="eattypeShow = false" closeable>
<view class="poupconten">
<view class="shop-inofr">
<view class="shop-inofr-name">
<image class="icon" :src="qnyurl('sopicon.png')" mode=""></image>
<text>{{GetShopInfor['restaurant_name']}}</text>
</view>
<view class="shop-inofr-area">
{{GetShopInfor['restaurant_address']}}
</view>
</view>
<view class="hint">
温馨提示：<text :class="`themeColor-${BrandInfor['brand_id']}`">肯德基点餐为第三方供应商提供的代下单服务（暂不支持外卖）</text>，<text
class="text2">出餐后可凭取餐码到店取餐。如有疑问请及时联系在线客服！</text>
</view>
<view class="Way">
<view class="Way-title">请选择就餐方式</view>
<view class="Way-type">
<view class="Way-type-item " :class="[GetMODE == 'EAT_IN'?`theme-Union-Class-${BrandInfor['brand_id']}-1`:'']"
@tap="InforPage('EAT_IN')">
<view class="Way-type-item-img">
<image class="img" :src="qnyurl('diannei.png')" mode="aspectFit"></image>
</view>
<view class="Way-type-item-right">
<view class="Way-type-item-right-text1">
店内就餐
</view>
<view class="Way-type-item-right-text2">
Dine In
</view>
</view>
</view>
<view class="Way-type-item" :class="[GetMODE == 'TAKE_AWAY'?`theme-Union-Class-${BrandInfor['brand_id']}-1`:'']"
@tap="InforPage('TAKE_AWAY')">
<view class="Way-type-item-img">
<image class="img" :src="qnyurl('dabao.png')" mode="aspectFit"></image>
</view>
<view class="Way-type-item-right">
<view class="Way-type-item-right-text1">
打包带走
</view>
<view class="Way-type-item-right-text2">
Take Away
</view>
</view>
</view>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
/**
* @肯德基首页
* */
// 混入
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
import mixin from '@/static/js/mixin/mixin.js';
// // 请求接口
import {
restaurantQueryAPI,
storeCollectionListAPI
} from '@/request/restaurant/index.js';
export default {
mixins: [mixin,restaurantmixins],
name: "b-page-home-mdl",
data() {
return {
// 就餐方式
eattypeShow: false,
eat_type: 'EAT_IN',
// 店铺接口数据用于分页
temporaryData: [],
// 收藏接口数据用于分页
CollectiontemporaryData: [],
// 餐厅列表/收藏列表
StoreList: [{
page: 1,
count: 0,
list: []
},
{
page: 1,
count: 0,
list: []
},
],
// 餐厅列表scroll高度
height: 0,
// 搜索值
keyword: '',
// 滑动tabs配置参数参数
tabsconfig: {
// 当前激活索引
index: 0,
scrollable: false,
// 滑块宽度
lineWidth: '40',
// 滑块颜色
lineColor: "#FFBC0F",
list: [{
name: '附近餐厅',
}, {
name: '我的关注',
}]
},
// 加载状态
loading:true,
};
},
computed: {
tabindex() {
return this['tabsconfig']['index']
},
},
watch: {
GetCityCode(val) {
console.log(val, '监听器');
// 用户自主切换地址时更换列表
this['StoreList'][0]['list'] = [];
this.GetList();
},
tabindex(val) {
if (val == 1) {
console.log(this['StoreList'][1]['list']);
this['StoreList'][1]['list'] = [];
this.GetstoreCollectionList();
}
}
},
mounted() {
console.log('进入选店组件');
this.initScrollView({
el: 'content-top'
}).then(res => {
this['height'] = res;
console.log(this['height'],'height')
// 获取列表
this.GetList();
// 获取收藏列表
// this.GetstoreCollectionList();
})
},
methods: {
/**
* @搜索
* */
search() {
if (this['tabsconfig']['index'] == 0) {
this['StoreList'][0]['page'] = 1;
this['StoreList'][0]['list'] = [];
this.GetList();
return
}
this['StoreList'][1]['page'] = 1;
this['StoreList'][1]['list'] = [];
this.GetstoreCollectionList();
},
/**
* @获取餐厅列表
* */
GetList() {
this['loading'] = true;
let parameters = {
brand_id: this['BrandInfor']['brand_id'],
city_code: this.GetCityCode,
address: this['keyword'],
}
restaurantQueryAPI(parameters).then(res => {
this['loading'] = false;
console.log(res,'res')
if(res['data']['data']['length'] <= 0){
uni.showToast({
title:'该区域暂无数据',
icon:'none'
});
return;
}
// 后端未按照分页数据格式返回所以前端自行分页
if (res['data']['data']['length'] > 0) {
// 赋值总长度
this['StoreList'][0]['count'] = res['count'];
// 辅助临时数据
this['temporaryData'] = res['data']['data'];
this['StoreList'][0]['page'] += 1;
// 取出数据
this.arrObtain('temporaryData', 0);
} else {
console.log('没数');
}
})
},
/**
* @获取关注冽表
* */
GetstoreCollectionList() {
this['loading'] = true;
let parameters = {
brand_id: this['BrandInfor']['brand_id'],
address: this['keyword'],
}
storeCollectionListAPI(parameters).then(data => {
this['loading'] = false;
if (data['data']['data']['length'] > 0) {
// 赋值总长度
this['StoreList'][1]['count'] = data['data']['count'];
// 辅助临时数据
this['CollectiontemporaryData'] = data['data']['data'];
this['StoreList'][1]['page'] += 1;
// 取出数据
this.arrObtain('CollectiontemporaryData', 1);
} else {
console.log('没数');
}
})
},
/**
* @进入餐厅
* */
InforPage(type) {
// 设置用户选择的就餐方式
this.SETMODE(type);
uni.navigateTo({
url: `/pages/restaurant/home/shop_home/shop_home?restaurant_id=${this['GetShopInfor']['restaurant_id']}`,
success: () => {
this['eattypeShow'] = false;
}
})
},
/**
* @scroll触底时间
* */
scrolltolower() {
// 触底防抖
uni.$u.debounce(() => {
// 是否是餐厅列表并且待取数组中的长度大于0
if (this['tabsconfig']['index'] == 0 && this['temporaryData']['length'] > 0) {
this.arrObtain('temporaryData', 0);
} else {
this.arrObtain('CollectiontemporaryData', 1);
}
}, 800, true)
},
/**
* @获取数据前十个
* */
arrObtain(key, index) {
let arr = this[key].splice(0, 9);
this['StoreList'][index]['list'].push(...arr);
}
}
}
</script>
<style lang="scss">
// 顶部步骤/筛选/查询样式
.content-top {
width: 100%;
height: auto;
background-color: #ffffff;
&-process {
position: relative;
width: 100%;
height: 210rpx;
.img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}
&-process {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #F4F4F4;
// background-image: url(https://img.agrimedia.cn/chwl/v2/choose.png);
// background-size: 100% 100%;
// background-repeat: no-repeat;
padding: 0 32rpx;
box-sizing: border-box;
&-item {
display: flex;
flex-direction: column;
align-items: center;
font-size: $FONTSIZE28;
color: #000000;
&-img {
width: 84rpx;
height: 84rpx;
border-radius: 50%;
box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.3);
margin-bottom: 13rpx;
}
}
}
&-search {
background-color: #ffffff;
padding-top: 32rpx;
&-area-search {
padding: 0 32rpx;
box-sizing: border-box;
display: flex;
align-items: center;
&-text {
font-size: $FONTSIZE28;
display: flex;
align-items: center;
.icon-youjiantou {
font-size: $FONTSIZE25;
color: #666666;
margin: 0 15rpx;
}
}
}
}
}
// 列表样式
.Store-List {
padding: 0 32rpx;
position: relative;
background-color: #ffffff;
&-Item {
width: 100%;
height: auto;
background-color: #ffffff;
border-radius: 15rpx;
min-height: 155rpx;
padding: 32rpx;
margin-top: 20rpx;
display: flex;
align-items:center;
.infot{
flex: 1;
}
.btn{
width: 146rpx;
height: 56rpx;
border: 2rpx solid #FFBC0F;
border-radius: 28rpx;
text-align: center;
line-height: 56rpx;
font-size: 28rpx;
color: #FFA200;
margin-left: 15rpx;
}
&-Top {
&-Name {
font-size: $FONTSIZE30;
color: $THEMECOLOR4;
margin-right: 20rpx;
}
&-distance {
font-size: $FONTSIZE26;
color: $THEMECOLOR5;
flex: 1;
}
}
&-Area {
font-size: $FONTSIZE26;
}
}
}
// 就餐方式弹框
.poupconten {
width: 100%;
height: 656rpx;
background-color: #ffffff;
padding: 32rpx;
.shop-inofr {
margin-bottom: 50rpx;
&-name {
font-size: $FONTSIZE32;
display: flex;
align-items: center;
margin-bottom: 20rpx;
.icon {
width: 33rpx;
height: 30rpx;
margin-right: 20rpx;
}
}
&-area {
font-size: $FONTSIZE24;
color: #999999;
}
}
.hint {
font-size: $FONTSIZE24;
line-height: 45rpx;
// .text1 {
// color: #DA2F35;
// }
.text2 {
color: #999999;
}
}
// 方式
.Way {
width: 100%;
&-title {
font-size: $FONTSIZE24;
color: #333333;
line-height: 40rpx;
}
&-type {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 32rpx;
&-rightactivation {
color: #FFFFFF !important;
border-color: #DE393F !important;
background-color: #DE393F !important;
}
&-item {
width: 320rpx;
height: 130rpx;
border: 1rpx solid #E3E3E3;
border-radius: 6rpx;
text-align: center;
color: #666666;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: space-around;
&-img {
width: 74rpx;
height: 61rpx;
.img {
width: 100%;
height: 100%;
}
}
&-right {
display: flex;
flex-direction: column;
justify-content: center;
&-text1 {
font-size: $FONTSIZE30;
}
&-text2 {
font-size: $FONTSIZE24;
}
}
}
}
}
}
</style>

598
components/b-page-home/b-page-home-kfc.vue Normal file
View File

@ -0,0 +1,598 @@
<template>
<view class="b-page-home">
<view class="content-top">
<view class="content-top-process">
<view class="content-top-process-item">
<image class="content-top-process-item-img" src="https://img.agrimedia.cn/chwl/v2/choose_two.png"
mode=""></image>
<view class="content-top-process-item-text">
选择餐厅
</view>
</view>
<view class="content-top-process-item">
<image class="content-top-process-item-img" src="https://img.agrimedia.cn/chwl/v2/choose_two.png"
mode=""></image>
<view class="content-top-process-item-text">
选择菜品
</view>
</view>
<view class="content-top-process-item">
<image class="content-top-process-item-img" src="https://img.agrimedia.cn/chwl/v2/choose_two.png"
mode=""></image>
<view class="content-top-process-item-text">
等待取餐码
</view>
</view>
<view class="content-top-process-item">
<image class="content-top-process-item-img" src="https://img.agrimedia.cn/chwl/v2/choose_two.png"
mode=""></image>
<view class="content-top-process-item-text">
到店取餐
</view>
</view>
</view>
<!-- 地址/搜索/选择 -->
<view class="content-top-search">
<view class="content-top-search-area-search">
<navigator url="/pages/restaurant/arealist/arealist" hover-class="none">
<view class="content-top-search-area-search-text">
<!-- 第一次获取肯定是获取不到的，主要是动态显示用户改变的地址 -->
{{UserArae1?UserArae1:UserArae2['city']}}
<view style="transform: rotate(90deg);">
<text class="icon iconfont icon-youjiantou"></text>
</view>
</view>
</navigator>
<u-search placeholder="输入门店名称查询" :showAction="false" v-model="keyword" @search="search">
</u-search>
</view>
<view class="content-top-search-tabs">
<u-tabs @change="e=>{tabsconfig['index'] = e['index']}" :list="tabsconfig['list']"
:scrollable="tabsconfig['scrollable']" :lineColor="tabsconfig['lineColor']"
:lineWidth="tabsconfig['lineWidth']"></u-tabs>
</view>
</view>
</view>
<!-- 店铺列表 -->
<!-- 因为骨架屏的颜色和UI设置背景色冲突所以在没有列表元素时先将背景色设置为白色 -->
<view class="Store-List" :style="{height:`${height}rpx`,'background-color':loading? '#ffffff':'#F2F2F2'}">
<!-- 附近餐厅 -->
<view v-show="tabsconfig['index'] == 0">
<scroll-view scroll-y="true" class="scroll-Y" :style="{height:`${height}rpx`}"
@scrolltolower="scrolltolower">
<template v-for="(item,index) in StoreList[0]['list']">
<view class="Store-List-Item" @tap="SETSHOPDETAIL(item);eattypeShow = true;" :key="index">
<view class="Store-List-Item-Top">
<view class="Store-List-Item-Top-Name">
{{item['restaurant_name']}}
</view>
<b-restaurant-state></b-restaurant-state>
<view class="Store-List-Item-Top-distance">
{{item['distance']}}m
</view>
</view>
<view class="Store-List-Item-Area">
{{item['restaurant_address']}}
</view>
</view>
</template>
<view class="default" v-if="StoreList[0]['list']['length'] <= 0">
<img class="img" :src="qnyurl('default.png','rx')" alt="">
<text>该地区暂无门店信息</text>
</view>
</scroll-view>
</view>
<!-- 我的收藏 -->
<view v-show="tabsconfig['index'] == 1">
<scroll-view scroll-y="true" class="scroll-Y" :style="{height:`${height}rpx`}"
@scrolltolower="scrolltolower">
<template v-for="(item,index) in StoreList[1]['list']">
<view class="Store-List-Item" @tap="SETSHOPDETAIL(item);eattypeShow = true;" :key="index">
<view class="Store-List-Item-Top">
<view class="Store-List-Item-Top-Name">
{{item['restaurant_name']}}
</view>
<b-restaurant-state></b-restaurant-state>
<view class="Store-List-Item-Top-distance">
{{item['distance']}}m
</view>
</view>
<view class="Store-List-Item-Area">
{{item['restaurant_address']}}
</view>
</view>
</template>
<view class="default" v-if="StoreList[1]['list']['length'] <= 0">
<img class="img" :src="qnyurl('default.png','rx')" alt="">
<text>该地区暂无门店信息</text>
</view>
</scroll-view>
</view>
<!-- 加载状态 -->
<b-load :show="loading && height>0" position="absolute" width="79" height="80" color="#000000"></b-load>
</view>
<!-- 选择就餐方式弹框 -->
<u-popup :show="eattypeShow" @close="eattypeShow = false" closeable>
<view class="poupconten">
<view class="shop-inofr">
<view class="shop-inofr-name">
<image class="icon" :src="qnyurl('sopicon.png')" mode=""></image>
<text>{{GetShopInfor['restaurant_name']}}</text>
</view>
<view class="shop-inofr-area">
{{GetShopInfor['restaurant_address']}}
</view>
</view>
<view class="hint">
温馨提示：<text class="text1">肯德基点餐为第三方供应商提供的代下单服务（暂不支持外卖）</text>，<text
class="text2">出餐后可凭取餐码到店取餐。如有疑问请及时联系在线客服！</text>
</view>
<view class="Way">
<view class="Way-title">请选择就餐方式</view>
<view class="Way-type">
<view class="Way-type-item " :class="[GetMODE == 'EAT_IN'?'Way-type-rightactivation':'']"
@tap="InforPage('EAT_IN')">
<view class="Way-type-item-img">
<image class="img" :src="qnyurl('diannei.png')" mode="aspectFit"></image>
</view>
<view class="Way-type-item-right">
<view class="Way-type-item-right-text1">
店内就餐
</view>
<view class="Way-type-item-right-text2">
Dine In
</view>
</view>
</view>
<view class="Way-type-item" :class="[GetMODE == 'TAKE_AWAY'?'Way-type-rightactivation':'']"
@tap="InforPage('TAKE_AWAY')">
<view class="Way-type-item-img">
<image class="img" :src="qnyurl('dabao.png')" mode="aspectFit"></image>
</view>
<view class="Way-type-item-right">
<view class="Way-type-item-right-text1">
打包带走
</view>
<view class="Way-type-item-right-text2">
Take Away
</view>
</view>
</view>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
/**
* @肯德基首页
* */
// 混入
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
import mixin from '@/static/js/mixin/mixin.js';
// // 请求接口
import {
restaurantQueryAPI,
storeCollectionListAPI
} from '@/request/restaurant/index.js';
export default {
mixins: [mixin,restaurantmixins],
name: "b-page-home",
data() {
return {
// 就餐方式
eattypeShow: false,
eat_type: 'EAT_IN',
// 店铺接口数据用于分页
temporaryData: [],
// 收藏接口数据用于分页
CollectiontemporaryData: [],
// 餐厅列表/收藏列表
StoreList: [{
page: 1,
count: 0,
list: []
},
{
page: 1,
count: 0,
list: []
},
],
// 餐厅列表scroll高度
height: 0,
// 搜索值
keyword: '',
// 滑动tabs配置参数参数
tabsconfig: {
// 当前激活索引
index: 0,
scrollable: false,
// 滑块宽度
lineWidth: '40',
// 滑块颜色
lineColor: "#C63836",
list: [{
name: '附近餐厅',
}, {
name: '我的关注',
}]
},
// 加载状态
loading:true,
};
},
computed: {
tabindex() {
return this['tabsconfig']['index']
},
},
watch: {
GetCityCode(val) {
console.log(val, '监听器');
// 用户自主切换地址时更换列表
this['StoreList'][0]['list'] = [];
this.GetList();
},
tabindex(val) {
if (val == 1) {
console.log(this['StoreList'][1]['list']);
this['StoreList'][1]['list'] = [];
this.GetstoreCollectionList();
}
}
},
mounted() {
console.log('进入选店组件');
this.initScrollView({
el: 'content-top'
}).then(res => {
this['height'] = res;
console.log(this['height'],'height')
// 获取列表
this.GetList();
// 获取收藏列表
// this.GetstoreCollectionList();
})
},
methods: {
/**
* @搜索
* */
search() {
if (this['tabsconfig']['index'] == 0) {
this['StoreList'][0]['page'] = 1;
this['StoreList'][0]['list'] = [];
this.GetList();
return
}
this['StoreList'][1]['page'] = 1;
this['StoreList'][1]['list'] = [];
this.GetstoreCollectionList();
},
/**
* @获取餐厅列表
* */
GetList() {
this['loading'] = true;
let parameters = {
brand_id: this['BrandInfor']['brand_id'],
city_code: this.GetCityCode,
address: this['keyword'],
}
restaurantQueryAPI(parameters).then(res => {
this['loading'] = false;
console.log(res,'res')
if(res['data']['data']['length'] <= 0){
uni.showToast({
title:'该区域暂无数据',
icon:'none'
});
return;
}
// 后端未按照分页数据格式返回所以前端自行分页
if (res['data']['data']['length'] > 0) {
// 赋值总长度
this['StoreList'][0]['count'] = res['count'];
// 辅助临时数据
this['temporaryData'] = res['data']['data'];
this['StoreList'][0]['page'] += 1;
// 取出数据
this.arrObtain('temporaryData', 0);
} else {
console.log('没数');
}
})
},
/**
* @获取关注冽表
* */
GetstoreCollectionList() {
this['loading'] = true;
let parameters = {
brand_id: this['BrandInfor']['brand_id'],
address: this['keyword'],
}
storeCollectionListAPI(parameters).then(data => {
this['loading'] = false;
if (data['data']['data']['length'] > 0) {
// 赋值总长度
this['StoreList'][1]['count'] = data['data']['count'];
// 辅助临时数据
this['CollectiontemporaryData'] = data['data']['data'];
this['StoreList'][1]['page'] += 1;
// 取出数据
this.arrObtain('CollectiontemporaryData', 1);
} else {
console.log('没数');
}
})
},
/**
* @进入餐厅
* */
InforPage(type) {
// 设置用户选择的就餐方式
this.SETMODE(type);
uni.navigateTo({
url: `/pages/restaurant/home/shop_home/shop_home?restaurant_id=${this['GetShopInfor']['restaurant_id']}`,
success: () => {
this['eattypeShow'] = false;
}
})
},
/**
* @scroll触底时间
* */
scrolltolower() {
// 触底防抖
uni.$u.debounce(() => {
// 是否是餐厅列表并且待取数组中的长度大于0
if (this['tabsconfig']['index'] == 0 && this['temporaryData']['length'] > 0) {
this.arrObtain('temporaryData', 0);
} else {
this.arrObtain('CollectiontemporaryData', 1);
}
}, 800, true)
},
/**
* @获取数据前十个
* */
arrObtain(key, index) {
let arr = this[key].splice(0, 9);
this['StoreList'][index]['list'].push(...arr);
}
}
}
</script>
<style lang="scss">
// 顶部步骤/筛选/查询样式
.content-top {
width: 100%;
height: auto;
background-color: #ffffff;
&-process {
position: relative;
width: 100%;
height: 210rpx;
.img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}
&-process {
display: flex;
justify-content: space-between;
align-items: center;
background-image: url(https://img.agrimedia.cn/chwl/v2/choose.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 0 32rpx;
box-sizing: border-box;
&-item {
display: flex;
flex-direction: column;
align-items: center;
font-size: $FONTSIZE28;
color: #FCFCFC;
&-img {
width: 84rpx;
height: 84rpx;
border-radius: 50%;
box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.3);
margin-bottom: 13rpx;
}
}
}
&-search {
background-color: #ffffff;
padding-top: 32rpx;
&-area-search {
padding: 0 32rpx;
box-sizing: border-box;
display: flex;
align-items: center;
&-text {
font-size: $FONTSIZE28;
display: flex;
align-items: center;
.icon-youjiantou {
font-size: $FONTSIZE25;
color: #666666;
margin: 0 15rpx;
}
}
}
}
}
// 列表样式
.Store-List {
padding: 0 32rpx;
position: relative;
&-Item {
width: 100%;
height: auto;
background-color: #ffffff;
border-radius: 15rpx;
min-height: 155rpx;
padding: 32rpx;
margin-top: 20rpx;
&-Top {
display: flex;
align-items: flex-end;
margin-bottom: 30rpx;
&-Name {
font-size: $FONTSIZE30;
color: $THEMECOLOR4;
margin-right: 20rpx;
}
&-distance {
font-size: $FONTSIZE26;
color: $THEMECOLOR5;
flex: 1;
text-align: right;
}
}
&-Area {
font-size: $FONTSIZE26;
}
}
}
// 就餐方式弹框
.poupconten {
width: 100%;
height: 656rpx;
background-color: #ffffff;
padding: 32rpx;
.shop-inofr {
margin-bottom: 50rpx;
&-name {
font-size: $FONTSIZE32;
display: flex;
align-items: center;
margin-bottom: 20rpx;
.icon {
width: 33rpx;
height: 30rpx;
margin-right: 20rpx;
}
}
&-area {
font-size: $FONTSIZE24;
color: #999999;
}
}
.hint {
font-size: $FONTSIZE24;
line-height: 45rpx;
.text1 {
color: #DA2F35;
}
.text2 {
color: #999999;
}
}
// 方式
.Way {
width: 100%;
&-title {
font-size: $FONTSIZE24;
color: #333333;
line-height: 40rpx;
}
&-type {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 32rpx;
&-rightactivation {
color: #FFFFFF !important;
border-color: #DE393F !important;
background-color: #DE393F !important;
}
&-item {
width: 320rpx;
height: 130rpx;
border: 1rpx solid #E3E3E3;
border-radius: 6rpx;
text-align: center;
color: #666666;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: space-around;
&-img {
width: 74rpx;
height: 61rpx;
.img {
width: 100%;
height: 100%;
}
}
&-right {
display: flex;
flex-direction: column;
justify-content: center;
&-text1 {
font-size: $FONTSIZE30;
}
&-text2 {
font-size: $FONTSIZE24;
}
}
}
}
}
}
</style>

396
components/b-page-home/b-page-home-rx.vue Normal file
View File

@ -0,0 +1,396 @@
<template>
<view class="b-page-home">
<view class="content-top">
<view class="content-top-banner">
<image class="img" :src="qnyurl('banner-1.jpg','rx')" mode=""></image>
</view>
<!-- 地址/搜索/选择 -->
<view class="content-top-search">
<view class="content-top-search-area-search">
<navigator url="/pages/restaurant/arealist/arealist" hover-class="none">
<view class="content-top-search-area-search-text">
<!-- 第一次获取肯定是获取不到的，主要是动态显示用户改变的地址 -->
{{UserArae1?UserArae1:UserArae2['city']}}
<view
style="width: 50rpx;height: 30rpx;display: flex;justify-content: center;align-items: center;">
<image style="width: 15rpx;height: 12rpx;" class="img" :src="qnyurl('xiala.jpg','rx')">
</image>
</view>
</view>
</navigator>
<u-search placeholder="输入门店名称查询" :showAction="false" v-model="keyword" @search="search">
</u-search>
</view>
<!-- 收藏项 -->
<!-- <view class="content-top-search-tabs">
<u-tabs @change="e=>{tabsconfig['index'] = e['index']}" :list="tabsconfig['list']"
:scrollable="tabsconfig['scrollable']" :lineColor="tabsconfig['lineColor']"
:lineWidth="tabsconfig['lineWidth']"></u-tabs>
</view> -->
</view>
</view>
<!-- 店铺列表 -->
<!-- 因为骨架屏的颜色和UI设置背景色冲突所以在没有列表元素时先将背景色设置为白色 -->
<view class="Store-List" :style="{height:`${height}rpx`,'background-color':'#F2F2F2'}">
<!-- 附近餐厅 -->
<view v-show="tabsconfig['index'] == 0">
<scroll-view scroll-y="true" class="scroll-Y" :style="{height:`${height}rpx`,'position': 'relative'}"
@scrolltolower="scrolltolower">
<!-- 骨架屏占位元素 -->
<template v-if="StoreList[0]['list']['length'] > 0">
<!-- 组件内部会获取到品牌类型,从而显示对应类型的店铺列表样式 -->
<view style="padding-bottom: 32rpx;" v-for="(item,index) in StoreList[0]['list']">
<!-- 店铺列表样式 -->
<b-shop-list-item :item="item" :key="index" @itemclick="SETSHOPDETAIL(item);eattypeShow = true">
</b-shop-list-item>
</view>
</template>
<template v-else>
<!-- 必须先确保scoll有高度 -->
<!-- 缺省图 -->
<view class="default" v-if="Show == 1">
<img class="img" :src="qnyurl('default.png','rx')" alt="">
<text>该地区暂无门店信息</text>
</view>
<!-- 加载中 -->
<b-load :show="Show == 2" position="absolute" background="transparent" width="79" height="80" color="#000000"></b-load>
</template>
<!-- <b-shop-load type="load" width="79" height="74" :show="loading"></b-shop-load> -->
</scroll-view>
</view>
</view>
<u-modal :show="eattypeShow" title="温馨提示" width="580rpx">
<template v-slot:default>
<view class="slot-content">
<view class="slot-content-Tips">
瑞幸咖啡点餐为<text class="text1">第三方提供的点餐服务</text>，该服务与瑞幸官方无关，有问题请联系在线客服。
</view>
<view class="slot-content-Tips2">
<view>
● 优惠点餐，不支持开发票!
</view>
<view>
● 出餐后不支持退款！
</view>
</view>
</view>
</template>
<template v-slot:confirmButton>
<view class="confirmButton" @tap="InforPage">
我知道了
</view>
</template>
</u-modal>
</view>
</template>
<script>
import mixin from '@/static/js/mixin/mixin.js';
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
// 请求接口
import {
restaurantQueryAPI,
storeCollectionListAPI
} from '@/request/restaurant/index.js';
// vuex
import {
mapGetters,
mapMutations
} from 'vuex';
export default {
mixins: [mixin,restaurantmixins],
name: "b-page-home",
data() {
return {
// 就餐方式
eattypeShow: false,
eat_type: 'EAT_IN',
// 店铺接口数据用于分页
temporaryData: [],
// 收藏接口数据用于分页
CollectiontemporaryData: [],
// 餐厅列表/收藏列表
StoreList: [{
page: 1,
count: 0,
list: []
},
{
page: 1,
count: 0,
list: []
},
],
// 餐厅列表scroll高度
height: 0,
// 搜索值
keyword: '',
// 滑动tabs配置参数参数
tabsconfig: {
// 当前激活索引
index: 0,
scrollable: false,
// 滑块宽度
lineWidth: '40',
// 滑块颜色
lineColor: "#C63836",
list: [{
name: '附近餐厅',
}, {
name: '我的关注',
}]
},
// 加载状态
loading: true,
};
},
computed: {
tabindex() {
return this['tabsconfig']['index']
},
Show(){
console.log(this['StoreList'][0]['list']['length'],'length');
console.log(this['loading'],'loading');
// 显示没地区门店
if(this['StoreList'][0]['list']['length'] <= 0 && !this['loading'] && this['height'] > 0){
return 1;
};
// 显示正在加载
if(this['loading'] && this['height'] > 0){
return 2
}
}
// islist(){
// return this['StoreList'][0]['list']['length'] <= 0;
// }
},
watch: {
GetCityCode(val) {
console.log(val, '监听器');
// 用户自主切换地址时更换列表
this['StoreList'][0]['list'] = [];
this.GetList();
},
tabindex(val) {
if (val == 1) {
console.log(this['StoreList'][1]['list']);
this['StoreList'][1]['list'] = [];
this.GetstoreCollectionList();
}
}
},
mounted() {
console.log('进入选店组件');
this.GetList();
},
methods: {
/**
* @搜索
* */
search() {
if (this['tabsconfig']['index'] == 0) {
this['StoreList'][0]['page'] = 1;
this['StoreList'][0]['list'] = [];
this.GetList();
return
}
this['StoreList'][1]['page'] = 1;
this['StoreList'][1]['list'] = [];
this.GetstoreCollectionList();
},
/**
* @获取餐厅列表
* */
GetList() {
let self = this;
this['loading'] = true;
// 预留足够的时间让DOM渲染完毕
setTimeout(()=>{
self.initScrollView({
el: 'content-top',
}).then(eres => {
self['height'] = eres;
let parameters = {
brand_id: this['BrandInfor']['brand_id'],
city_code: this.GetCityCode,
address: this['keyword'],
}
restaurantQueryAPI(parameters).then(res => {
console.log(res,'ressssssss');
self['loading'] = false;
if (res['data']['data']['length'] <= 0) {
uni.showToast({
title: '该区域暂无数据',
icon: 'none'
});
return;
}
// 后端未按照分页数据格式返回所以前端自行分页
if (res['data']['data']['length'] > 0) {
// 赋值总长度
self['StoreList'][0]['count'] = res['data']['count'];
// 辅助临时数据
self['temporaryData'] = res['data']['data'];
self['StoreList'][0]['page'] += 1;
// 取出数据
self.arrObtain('temporaryData', 0);
} else {
console.log('没数1');
}
}).catch(err=>{
self['loading'] = false;
})
})
},1000)
},
/**
* @获取关注冽表
* */
GetstoreCollectionList() {
let parameters = {
brand_id: this['BrandInfor']['brand_id'],
address: this['keyword'],
}
storeCollectionListAPI(parameters).then(data => {
if (data['data']['length'] > 0) {
// 赋值总长度
this['StoreList'][1]['count'] = data['data']['count'];
// 辅助临时数据
this['CollectiontemporaryData'] = data['data']['data'];
this['StoreList'][1]['page'] += 1;
// 取出数据
this.arrObtain('CollectiontemporaryData', 1);
} else {
console.log('没数');
}
})
},
/**
* @进入餐厅
* */
InforPage(item) {
uni.navigateTo({
url: `/pages/restaurant/home/shop_home/shop_home?restaurant_id=${this['GetShopInfor']['restaurant_id']}`,
success: () => {
this['eattypeShow'] = false;
}
})
},
/**
* @scroll触底时间
* */
scrolltolower() {
// 触底防抖
uni.$u.debounce(() => {
// 是否是餐厅列表并且待取数组中的长度大于0
if (this['tabsconfig']['index'] == 0 && this['temporaryData']['length'] > 0) {
this.arrObtain('temporaryData', 0);
} else {
this.arrObtain('CollectiontemporaryData', 1);
}
}, 800, true)
},
/**
* @获取数据前十个
* */
arrObtain(key, index) {
let arr = this[key].splice(0, 9);
this['StoreList'][index]['list'].push(...arr);
console.log(this['StoreList'][index]['list'], 'list');
}
}
}
</script>
<style lang="scss">
// 顶部步骤/筛选/查询样式
.content-top {
width: 100%;
height: auto;
background-color: #ffffff;
&-banner {
width: 100%;
height: 314rpx;
.img {
width: 100%;
height: 100%;
}
}
&-search {
background-color: #ffffff;
padding: 32rpx;
&-area-search {
padding: 0 32rpx;
box-sizing: border-box;
display: flex;
align-items: center;
&-text {
font-size: $FONTSIZE28;
display: flex;
align-items: center;
.icon-youjiantou {
font-size: $FONTSIZE25;
color: #666666;
margin: 0 15rpx;
}
}
}
}
}
// 列表样式
.Store-List {
padding: 0 32rpx;
}
// 就餐方式弹框
.slot-content-Tips {
font-size: 30rpx;
line-height: 40rpx;
.text1 {
color: #DB9F5E;
}
}
.slot-content-Tips2 {
width: 100%;
background-color: #FFF9F3;
margin-top: 20rpx;
color: #FF7910;
font-size: 26rpx;
line-height: 49rpx;
padding: 15rpx 32rpx;
}
.confirmButton{
background: linear-gradient(-77deg, #4A6FE7, #83ACFF);
border-radius: 43px;
color: #ffffff;
font-size: 30rpx;
text-align: center;
line-height: 80rpx;
}
</style>

648
components/b-page-home/b-page-home-xbk.vue Normal file
View File

@ -0,0 +1,648 @@
<template>
<view class="b-page-home">
<view class="content-top">
<view class="store_background">
<image class="store_background-img" :src="qnyurl('store_background.jpg','xbk')" mode="widthFix"></image>
<view class="store_background-content">
<view class="store_background-content-text1">
<image class="img" :src="qnyurl('icon.png','xbk')" mode=""></image>
<text>自助点餐，不支持外卖</text>
</view>
<view class="store_background-content-text2">
到店前10~15分钟在线点餐，到店后直接在“取品台”领取即可
</view>
</view>
</view>
<!-- 步骤 -->
<view class="content-top-process">
<view class="content-top-process-item">
<image class="content-top-process-item-img" :src="qnyurl('choose_one.png','xbk')" mode=""></image>
<view class="content-top-process-item-text">
选择餐厅
<text class="content-top-process-item-text-choose">》</text>
</view>
</view>
<view class="content-top-process-item">
<image class="content-top-process-item-img" :src="qnyurl('choose_two.png','xbk')" mode=""></image>
<view class="content-top-process-item-text">
选择菜品
<text class="content-top-process-item-text-choose">》</text>
</view>
</view>
<view class="content-top-process-item">
<image class="content-top-process-item-img" :src="qnyurl('choose_three.png','xbk')" mode=""></image>
<view class="content-top-process-item-text">
等待取餐码
<text class="content-top-process-item-text-choose">》</text>
</view>
</view>
<view class="content-top-process-item">
<image class="content-top-process-item-img" :src="qnyurl('choose_four.png','xbk')" mode=""></image>
<view class="content-top-process-item-text">
到店取餐
</view>
</view>
</view>
<!-- 占位元素 -->
<view style="width: 100%;height: 100rpx;"></view>
<!-- 搜索店铺/地址选择 -->
<view class="content-top-search">
<view class="content-top-search-area-search">
<navigator url="/pages/restaurant/arealist/arealist" hover-class="none">
<view class="content-top-search-area-search-text">
<!-- 第一次获取肯定是获取不到的，主要是动态显示用户改变的地址 -->
{{UserArae1?UserArae1:UserArae2['city']}}
<view style="transform: rotate(90deg);">
<text class="icon iconfont icon-youjiantou"></text>
</view>
</view>
</navigator>
<u-search placeholder="输入门店名称查询" :showAction="false" v-model="keyword" @search="search">
</u-search>
</view>
<view class="content-top-search-tabs">
<u-tabs @change="e=>{tabsconfig['index'] = e['index']}" :list="tabsconfig['list']"
:scrollable="tabsconfig['scrollable']" :lineColor="tabsconfig['lineColor']"
:lineWidth="tabsconfig['lineWidth']"></u-tabs>
</view>
</view>
</view>
<view class="Store-List" :style="{height:`${height}rpx`,'background-color':loading? '#ffffff':'#F2F2F2'}">
<!-- 附近餐厅 -->
<view v-show="tabsconfig['index'] == 0">
<scroll-view scroll-y="true" class="scroll-Y" :style="{height:`${height}rpx`}"
@scrolltolower="scrolltolower">
<!-- 骨架屏占位元素 -->
<template v-for="(item,index) in StoreList[0]['list']">
<view class="Store-List-Item" @tap="PageShopHome(item)" :key="index">
<view class="Store-List-Item-Top">
<view class="Store-List-Item-Top-Name">
{{item['restaurant_name']}}
</view>
<view class="Store-List-Item-Top-distance">
{{item['distance']}}km
</view>
</view>
<view class="Store-List-Item-Area">
{{item['restaurant_address']}}
</view>
</view>
</template>
<view style="width: 100%;height: 32rpx;"></view>
<view class="default" v-if="StoreList[0]['list']['length'] <= 0">
<img class="img" :src="qnyurl('default.png','rx')" alt="">
<text>该地区暂无门店信息</text>
</view>
</scroll-view>
</view>
<!-- 我的收藏 -->
<view v-show="tabsconfig['index'] == 1">
<scroll-view scroll-y="true" class="scroll-Y" :style="{height:`${height}rpx`}"
@scrolltolower="scrolltolower">
<template v-for="(item,index) in StoreList[1]['list']">
<view class="Store-List-Item" @tap="PageShopHome(item)" :key="index">
<view class="Store-List-Item-Top">
<view class="Store-List-Item-Top-Name">
{{item['restaurant_name']}}
</view>
<view class="Store-List-Item-Top-distance">
{{item['distance']}}m
</view>
</view>
<view class="Store-List-Item-Area">
{{item['restaurant_address']}}
</view>
</view>
</template>
<view style="width: 100%;height: 32rpx;"></view>
<view class="default" v-if="StoreList[1]['list']['length'] <= 0">
<img class="img" :src="qnyurl('default.png','rx')" alt="">
<text>该地区暂无门店信息</text>
</view>
</scroll-view>
</view>
<!-- 加载状态 -->
<b-load :show="loading && height>0" position="absolute" width="79" height="80" color="#000000"></b-load>
<!-- 必须先确保scoll有高度 -->
</view>
</view>
</template>
<script>
/**
* @肯德基首页
* */
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
import mixin from '@/static/js/mixin/mixin.js';
// 请求接口
import {
restaurantQueryAPI,
storeCollectionListAPI
} from '@/request/restaurant/index.js';
// vuex
import {
mapGetters,
mapMutations
} from 'vuex';
export default {
mixins: [mixin,restaurantmixins],
name: "b-page-home",
data() {
return {
// 就餐方式
eattypeShow: false,
eat_type: 'EAT_IN',
// 店铺接口数据用于分页
temporaryData: [],
// 收藏接口数据用于分页
CollectiontemporaryData: [],
// 餐厅列表/收藏列表
StoreList: [{
page: 1,
count: 0,
list: []
},
{
page: 1,
count: 0,
list: []
},
],
// 餐厅列表scroll高度
height: 0,
// 搜索值
keyword: '',
// 滑动tabs配置参数参数
tabsconfig: {
// 当前激活索引
index: 0,
scrollable: false,
// 滑块宽度
lineWidth: '40',
// 滑块颜色
lineColor: "#00AF66",
list: [{
name: '附近餐厅',
}, {
name: '我的关注',
}]
},
// 加载状态
loading: true,
// 暂无门店
Show:false
};
},
computed: {
tabindex() {
return this['tabsconfig']['index']
},
// islist(){
// return this['StoreList'][0]['list']['length'] <= 0;
// }
},
watch: {
GetCityCode(val) {
console.log(val, '监听器');
// 用户自主切换地址时更换列表
this['StoreList'][0]['list'] = [];
this.GetList();
},
tabindex(val) {
if (val == 1) {
console.log(this['StoreList'][1]['list']);
this['StoreList'][1]['list'] = [];
this.GetstoreCollectionList();
}
},
},
mounted() {
console.log('进入选店组件');
// 获取列表
this.GetList();
},
methods: {
...mapMutations({
SETSHOPDETAIL: 'shopping/SETSHOPDETAIL',
SETMODE: 'shopping/SETMODE'
}),
/**
* @搜索
* */
search() {
if (this['tabsconfig']['index'] == 0) {
this['StoreList'][0]['page'] = 1;
this['StoreList'][0]['list'] = [];
this.GetList();
return
}
this['StoreList'][1]['page'] = 1;
this['StoreList'][1]['list'] = [];
this.GetstoreCollectionList();
},
/**
* @获取餐厅列表
* */
GetList() {
let self = this;
// 每次进入设置加载状态显示
self['loading'] = true;
// 每次进入隐藏暂无门店状态
self['Show'] = false;
// 延迟获取元素信息给渲染足够的时间
setTimeout(()=>{
self.initScrollView({
el: 'content-top',
}).then(eres => {
console.log(eres,'resresresres');
self['height'] = eres;
let parameters = {
brand_id: this['BrandInfor']['brand_id'],
city_code: this.GetCityCode,
address: this['keyword'],
}
restaurantQueryAPI(parameters).then(res => {
console.log(res,'餐厅列表');
self['loading'] = false;
// 后端未按照分页数据格式返回所以前端自行分页
if (res['data']['data']['length'] > 0) {
// 赋值总长度
self['StoreList'][0]['count'] = res['count'];
// 辅助临时数据
self['temporaryData'] = res['data']['data'];
self['StoreList'][0]['page'] += 1;
// 取出数据
self.arrObtain('temporaryData', 0);
} else {
self['Show'] = true;
console.log('没数');
};
})
});
},800)
},
/**
* @获取关注冽表
* */
GetstoreCollectionList() {
// 每次进入设置加载状态显示
this['loading'] = true;
// 每次进入隐藏暂无门店状态
this['Show'] = false;
let parameters = {
brand_id: this['BrandInfor']['brand_id'],
address: this['keyword'],
}
storeCollectionListAPI(parameters).then(data => {
this['loading'] = false;
if (data['data']['data']['length'] > 0) {
// 赋值总长度
this['StoreList'][1]['count'] = data['data']['count'];
// 辅助临时数据
this['CollectiontemporaryData'] = data['data']['data'];
this['StoreList'][1]['page'] += 1;
// 取出数据
this.arrObtain('CollectiontemporaryData', 1);
} else {
this['Show'] = false;
console.log('没数');
};
})
},
/**
* @进入餐厅
* */
InforPage(type) {
// 设置用户选择的就餐方式
this.SETMODE(type);
uni.navigateTo({
url: `/pages/restaurant/home/shop_home/shop_home?restaurant_id=${this['GetShopInfor']['restaurant_id']}`,
success: () => {
this['eattypeShow'] = false;
}
})
},
/**
* @scroll触底事件
* */
scrolltolower() {
// 触底防抖
uni.$u.debounce(() => {
// 是否是餐厅列表并且待取数组中的长度大于0
if (this['tabsconfig']['index'] == 0 && this['temporaryData']['length'] > 0) {
this.arrObtain('temporaryData', 0);
} else {
this.arrObtain('CollectiontemporaryData', 1);
};
}, 800, true)
},
/**
* @获取数据前十个
* */
arrObtain(key, index) {
let arr = this[key].splice(0, 9);
this['StoreList'][index]['list'].push(...arr);
},
/**
* @进入店铺
* */
PageShopHome(item){
this.SETSHOPDETAIL(item);
uni.navigateTo({
url: `/pages/restaurant/home/shop_home/shop_home?restaurant_id=${this['GetShopInfor']['restaurant_id']}`,
})
}
}
}
</script>
<style lang="scss">
page{
background-color: #ffffff;
};
// 顶部步骤/筛选/查询样式
.content-top {
width: 100%;
height: auto;
background-color: #ffffff;
position: relative;
.store_background {
width: 100%;
height: auto;
&-img {
width: 100%;
display: block;
}
&-content{
color: #ffffff;
padding: 20rpx 20rpx 0 20rpx;
position: absolute;
left: 0;
top: 0;
width: 100%;
&-text1{
font-size: 30rpx;
line-height: 60rpx;
display: flex;
align-items: center;
.img{
width: 20rpx;
height: 30rpx;
margin-right: 10rpx;
}
}
&-text2{
font-size: 24rpx;
opacity: 0.7;
}
}
}
// &-process {
// position: relative;
// width: 100%;
// height: 210rpx;
// .img {
// width: 100%;
// height: 100%;
// position: absolute;
// top: 0;
// left: 0;
// }
// }
&-process {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 32rpx;
box-sizing: border-box;
position: absolute;
width: 94%;
height: 210rpx;
top: 150rpx;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 15rpx;
overflow: hidden;
background-repeat: no-repeat;
box-shadow: -5px 0px 20px 0px rgba(101, 101, 101, 0.2400);
background-color: #ffffff;
&-item {
display: flex;
flex-direction: column;
align-items: center;
font-size: $FONTSIZE25;
color: #333333;
&-img {
width: 84rpx;
height: 84rpx;
border-radius: 50%;
box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.3);
margin-bottom: 13rpx;
}
&-text {
position: relative;
&-choose {
font-size: 25rpx;
position: absolute;
right: -60%;
top: -5%;
transform: translateX(-50%);
color: #a0a0a0;
display: flex;
align-items: center;
}
}
}
}
&-search {
background-color: #ffffff;
padding-top: 32rpx;
&-area-search {
padding: 0 32rpx;
box-sizing: border-box;
display: flex;
align-items: center;
&-text {
font-size: $FONTSIZE28;
display: flex;
align-items: center;
.icon-youjiantou {
font-size: $FONTSIZE25;
color: #666666;
margin: 0 15rpx;
}
}
}
}
}
// 列表样式
.Store-List {
padding: 0 32rpx;
position: relative;
&-Item {
width: 100%;
height: auto;
background-color: #ffffff;
border-radius: 15rpx;
min-height: 155rpx;
padding: 32rpx;
margin-top: 20rpx;
&-Top {
display: flex;
align-items: flex-end;
margin-bottom: 30rpx;
&-Name {
font-size: $FONTSIZE30;
color: $THEMECOLOR4;
margin-right: 20rpx;
}
&-distance {
font-size: $FONTSIZE26;
color: $THEMECOLOR5;
flex: 1;
text-align: right;
}
}
&-Area {
font-size: $FONTSIZE26;
}
}
}
// 就餐方式弹框
.poupconten {
width: 100%;
height: 656rpx;
background-color: #ffffff;
padding: 32rpx;
.shop-inofr {
margin-bottom: 50rpx;
&-name {
font-size: $FONTSIZE32;
display: flex;
align-items: center;
margin-bottom: 20rpx;
.icon {
width: 33rpx;
height: 30rpx;
margin-right: 20rpx;
}
}
&-area {
font-size: $FONTSIZE24;
color: #999999;
}
}
.hint {
font-size: $FONTSIZE24;
line-height: 45rpx;
.text1 {
color: #DA2F35;
}
.text2 {
color: #999999;
}
}
// 方式
.Way {
width: 100%;
&-title {
font-size: $FONTSIZE24;
color: #333333;
line-height: 40rpx;
}
&-type {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 32rpx;
&-rightactivation {
color: #FFFFFF !important;
border-color: #DE393F !important;
background-color: #DE393F !important;
}
&-item {
width: 320rpx;
height: 130rpx;
border: 1rpx solid #E3E3E3;
border-radius: 6rpx;
text-align: center;
color: #666666;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: space-around;
&-img {
width: 74rpx;
height: 61rpx;
.img {
width: 100%;
height: 100%;
}
}
&-right {
display: flex;
flex-direction: column;
justify-content: center;
&-text1 {
font-size: $FONTSIZE30;
}
&-text2 {
font-size: $FONTSIZE24;
}
}
}
}
}
}
</style>

302
components/b-page-orders/b-page-orders.vue Normal file
View File

@ -0,0 +1,302 @@
<template>
<view class="content">
<view class="OrderToggleType">
<view class="typebtn" @tap="Typetoggle(0)">
待结算{{count['un_commission_total']}}单
</view>
<view class="typebtn" @tap="Typetoggle(1)">
已结算{{count['commission_total']}}单
</view>
</view>
<view class="order-list">
<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y"
:style="{'height':`${scrollHeight}rpx`}"
@scrolltolower="GetorderList">
<template v-for="(item,index) in List">
<!-- 肯德基 -->
<template v-if="item['brand_id'] == 1 || item['brand_id'] == 5">
<b-orders-kfc :key="index" :index="index" :item="item">
</b-orders-kfc>
</template>
<!-- 瑞幸 -->
<template v-if="item['brand_id'] == 13">
<b-orders-rx :key="index" :index="index" :item="item">
</b-orders-rx>
</template>
<!-- 星巴克 -->
<template v-if="item['brand_id'] == 10">
<b-orders-xbk :key="index" :index="index" :item="item">
</b-orders-xbk>
</template>
</template>
<template v-if="List['length'] <= 0">
<b-shop-load width="161" height="148" type="orders" :offset="['25%','0']"></b-shop-load>
</template>
</scroll-view>
</view>
<!-- 加载状态 -->
<b-load :show="loading" width="79" height="80" background="rgba(0,0,0,0.3)" type="load"></b-load>
</view>
</template>
<script>
import {
orderListAPI,
agOrderPayAPI,
cancelOrderAPI
} from '@/request/restaurant/index.js';
import bOrdersKfc from '@/components/b-orders/b-orders-kfc.vue'
import bOrdersRx from '@/components/b-orders/b-orders-rx.vue'
import bOrdersXbk from '@/components/b-orders/b-orders-xbk.vue'
import {
mapMutations,
mapGetters,
mapActions
} from 'vuex';
import mixin from '@/static/js/mixin/mixin.js';
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
export default {
name: "b-page-orders",
mixins:[mixin,restaurantmixins],
components: {
bOrdersKfc,
bOrdersRx,
bOrdersXbk
},
provide() {
return {
// 取消订单
cancel: this.cancel,
// 重新下单
Reorder: this.Reorder,
// 再次支付
payments: this.payments
}
},
data() {
return {
List: [],
page: 1,
total: 0,
scrollHeight: 0,
// 记录上次点击切换的type
last_time_toggle:'',
type: '',
count: {
un_commission_total: 0,
commission_total: 0
},
// 加载状态
loading:false
};
},
watch: {
// 顶部筛选时切换
// type() {
// this['page'] = 1;
// this.GetorderList();
// },
// // 底部tab切换时重新刷新数据
// Getnavindex(){
// this['page'] = 1;
// this.GetorderList();
// },
Getnavindex(val) {
// 每次进入订单列表都将重新请求
if (val != 0) {
this['type'] = '';
this.GetorderList();
}else{
this['loading'] = true;
this['page'] = 1;
this['List'] = [];
}
}
},
mounted() {
let self = this;
this['loading'] = true;
// 设置scollview高度之前必须得到底部导航高度
console.log(self['NAVHEIGHT'],'------------');
setTimeout(()=>{
this.initScrollView({
el: 'OrderToggleType',
}).then(res => {
self.scrollHeight = res;
self.GetorderList();
})
},1000)
},
methods: {
/**
* @顶部选项
* */
Typetoggle(type){
// 如果上次切换与本次切换类型一致则代表用户点击了两次,此时需要将列表切换至所有列表
console.log(this['last_time_toggle'],type);
if(this['last_time_toggle'] === type){
this['type'] = '';
}else{
this['type'] = type;
}
this['page'] = 1;
this['List'] = [];
this.GetorderList();
this['last_time_toggle'] = this['type'];
},
/**
* @获取订单列表
* */
GetorderList() {
// uni.showLoading({
// title: '加载中...'
// });
let self = this;
orderListAPI({
page: this['page'],
type: this['type'],
brand_id: this['BrandInfor']['brand_id']
}).then(data => {
if (self['page'] == 1) {
self['List'] = [];
};
self['count'] = data['data']['count'];
self['List'].push(...data['data']['data']['data']);
self['total'] = data['data']['data']['total'];
self['page'] += 1;
// uni.hideLoading();
this['loading'] = false;
})
},
/**
* @再次支付
* */
payments(order_sn, restaurant_id) {
let self = this;
this.againpayment(order_sn)
// let redirect_url;
// // 肯德基
// if (self['BrandInfor']['brand_id'] == 1) {
// redirect_url = `/pages/restaurant/order/order-status/order-status?order=${order_sn}`
// } else if (self['BrandInfor']['brand_id'] == 10) {
// // 星巴克
// redirect_url = `/pages/restaurant/order/order-details/xbk-orders-details?order=${order_sn}`
// } else if (self['BrandInfor']['brand_id'] == 13) {
// // 瑞幸
// redirect_url = `/pages/restaurant/order/order-details/rx-orders-details?order=${order_sn}`
// }
// agOrderPayAPI({
// order_sn,
// type:3,
// redirect_url
// }).then(data => {
// location.href = data['data']['redirect_url'];
// })
},
/**
* @取消订单
* */
cancel(order_sn, index) {
cancelOrderAPI({
order_sn
}).then(data => {
this.$set(this['List'][index], 'status', 5);
this.$forceUpdate();
})
},
/**
* @重新下单
* */
Reorder(commodity) {
console.log(commodity,'重新下单商品');
uni.showLoading({
title:'加载中...',
})
let self = this;
let index = 0;
// 创建进入餐厅所需要的参数对象
let {
restaurant_id,
latitude,
longitude,
restaurant_address,
restaurant_name
} = commodity[0];
this.SETSHOPDETAIL({
city_name: "",
close_time: "",
distance: "",
latitude,
longitude,
open_time: "",
province_name: "",
regoin_name: "",
restaurant_address,
restaurant_id,
restaurant_name,
special: false,
});
let add = function(){
console.log(`第${index}个,总共有${commodity['length']-1}`);
self.ADD_CART({
commodity: commodity[index]
}).then(()=>{
if(index >= commodity['length']-1) {
uni.hideLoading();
uni.navigateTo({
url: `/pages/restaurant/home/shop_home/shop_home?restaurant_id=${restaurant_id}`
});
return;
};
index += 1;
add();
})
}
this.EMPTY(commodity[0]['restaurant_id']).then( res => {
console.log(res);
setTimeout( () => {
add();
}, 1000);
})
},
}
}
</script>
<style lang="scss">
.content {
padding: 0 19rpx;
}
.scroll-Y{
box-sizing: border-box;
padding-top:30rpx;
position: relative;
}
.OrderToggleType {
display: flex;
justify-content: space-between;
.typebtn {
width: 347rpx;
height: 91rpx;
background: #FFFFFF;
border: 1rpx solid #DEDEDE;
border-radius: 20rpx;
text-align: center;
line-height: 91rpx;
color: #333333;
font-size: $FONTSIZE24;
}
}
</style>

101
components/b-pay/b-pay.vue Normal file
View File

@ -0,0 +1,101 @@
<template>
<view class="b-pay">
<view class="Shop-Infor">
<view class="Shop-Infor-Left">
<image class="Shop-Infor-Left-Img" :src="storeInofr['store_img']"></image>
</view>
<view class="Shop-Infor-Right">
<!-- 为防止后期该位置添加东西所以再里面再包裹一层 -->
<view class="Shop-Infor-Right-Title">
{{storeInofr['store_name']}}
</view>
</view>
</view>
</view>
</template>
<script>
import mixin from '@/static/js/mixin.js'
export default {
name: "b-pay",
props: {
storeid: {
type: Number,
default: 0
}
},
data() {
return {
storeInofr: {
store_img: '',
store_name: ''
}
};
},
methods: {
/**
* @获取店铺信息
* */
getStoreInfo(store_id) {
this.$store.dispatch('shop/getStore', {
store_id
}).then(res => {
this.storeInofr = res
}).catch(err=>{
if(err['code'] == 7777){
// 此处逻辑是因为当用户扫码进入支付页面时先判断是否存在token然后调用商家信息,但是当token存在但是token标识过期将会出现错误,
// 所以在此处将判断接口返回的状态码是否需要登录,然后删除本地token重新进入登录逻辑
console.log(err,'接口错误');
uni.removeStorageSync('token');
this.DetectUserLogin(()=>{
this.getStoreInfo(store_id);
})
}
})
},
}
}
</script>
<style lang="scss">
.b-pay {
padding: 32rpx;
box-sizing: border-box;
}
.Shop-Infor {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
border-radius: 15rpx;
padding: 20rpx;
box-sizing: border-box;
&-Left {
width: 240rpx;
height: 240rpx;
&-Img {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
&-Right {
padding-left: 20rpx;
box-sizing: border-box;
flex: 1;
display: flex;
align-items: center;
&-Title {
color: #333333;
font-size: 36rpx;
}
}
}
</style>

194
components/b-restaurant-nav/b-restaurant-nav.vue Normal file
View File

@ -0,0 +1,194 @@
<template>
<!-- 肯德基底部导航 -->
<view class="b-restaurant-nav">
<!-- 肯德基底部导航 -->
<template v-if="BrandInfor['brand_id'] == 1">
<view class="nav-KFC">
<view class="b-restaurant-nav-item" @tap="SETNAVINDEX(index)" v-for="(item,index) in navtab">
<image :src="Getnavindex == index?item['activation']:item['icon']" class="b-restaurant-nav-item-img"
mode="">
</image>
<view class="b-restaurant-nav-item-title" :style="{color:Getnavindex == index?'#C63836':'#999999'}">
{{item['title']}}
</view>
</view>
</view>
</template>
<!-- 肯德基底部导航 -->
<template v-if=" BrandInfor['brand_id'] == 5">
<view class="nav-KFC">
<view class="b-restaurant-nav-item" @tap="SETNAVINDEX(index)" v-for="(item,index) in mdlbtnnav">
<image :src="Getnavindex == index?item['activation']:item['icon']" class="b-restaurant-nav-item-img"
mode="">
</image>
<view class="b-restaurant-nav-item-title" :style="{color:Getnavindex == index?'#FFA200':'#999999'}">
{{item['title']}}
</view>
</view>
</view>
</template>
<!-- 瑞幸底部导航 -->
<template v-if="BrandInfor['brand_id'] == 13">
<view class="nav-rx">
<view class="b-restaurant-nav-item-RX" @tap="SETNAVINDEX(index)" v-for="(item,index) in navtab">
<view class="b-restaurant-nav-item-RX-title">
{{item['title']}}
</view>
</view>
</view>
</template>
<!-- 星巴克 -->
<template v-if="BrandInfor['brand_id'] == 10">
<view class="nav-xbk">
<view class="b-restaurant-nav-item-xbk" @tap="SETNAVINDEX(index)" v-for="(item,index) in xbkbtnnav">
<image :src="item['activation']" class="b-restaurant-nav-item-xbk-img"
mode="">
</image>
<view class="b-restaurant-nav-item-xbk-title" >
{{item['title']}}
</view>
</view>
</view>
</template>
<b-Bottom-Fit></b-Bottom-Fit>
</view>
</template>
<script>
import Vue from 'vue'
/**
* @底部导航组件
* */
import config from '@/static/js/config.js';
import {
mapMutations,
mapGetters
} from 'vuex'
export default {
name: "b-restaurant-nav",
data() {
return {
navtab: config['btnnav'],
xbkbtnnav:config['xbkbtnnav'],
mdlbtnnav:config['mdlbtnnav'],
};
},
computed: {
...mapGetters({
Getnavindex: 'shopping/Getnavindex',
// 获取品牌Id
BrandInfor: 'shopping/BrandInfor',
})
},
watch: {
Getnavindex: {
immediate: true,
handler(val) {
console.log(val, '导航索引变化');
uni.setNavigationBarTitle({
// 此处配置在/config/config/config.js
title: config['btnnav'][val]['title']
});
}
}
},
mounted() {
},
methods: {
...mapMutations({
SETNAVINDEX: 'shopping/SETNAVINDEX'
}),
/**
* @获取导航高度
*/
GetEMH(){
return new Promise((resolve,reject)=>{
let query = uni.createSelectorQuery().in(this);
query.select('.b-restaurant-nav').boundingClientRect();
query.exec(res => {
Vue.prototype.NAVHEIGHT = res[0]['height'];
console.log(this['NAVHEIGHT'],'NAVHEIGHT----');
resolve();
});
})
}
// PageGo(index) {
// this.SETNAVINDEX(index);
// }
}
}
</script>
<style lang="scss">
.b-restaurant-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffffff;
display: flex;
flex-direction: column;
.nav-KFC,
.nav-rx,
.nav-xbk{
display: flex;
justify-content: space-around;
align-items: center;
padding-top: 20rpx;
}
// 肯德基样式
&-item {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&-img {
width: 43rpx;
height: 43rpx;
margin-bottom: 13rpx;
}
&-title {
font-size: $FONTSIZE24;
font-weight: 700;
}
}
// 瑞幸
&-item-RX {
width: 335rpx;
height: 85rpx;
text-align: center;
line-height: 85rpx;
border: 1rpx solid #4A6FE7;
border-radius: 43rpx;
color: $THEMECOLOR6;
font-size: $FONTSIZE30;
}
// 星巴克样式
&-item-xbk {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
&-img {
width: 43rpx;
height: 43rpx;
margin-right: 15rpx;
}
&-title {
font-size: $FONTSIZE24;
font-weight: 700;
}
}
}
</style>

268
components/b-restaurant-order-status/b-restaurant-order-status.vue Normal file
View File

@ -0,0 +1,268 @@
<template>
<view class="b-restaurant-order-status">
<!-- 订单状态 -->
<!-- 瑞幸订单状态 -->
<template v-if="InforData['brand_id'] == 13">
<view class="rx-Order-status style" v-if="InforData['status'] != 2 && InforData['status'] != 4">
<image class="rx-Order-status-Img" v-if="InforData['status'] == OrderStatus0"
:src="qnyurl('Unpaid.png','rx')" mode=""></image>
<image class="rx-Order-status-Img" v-if="InforData['status'] == OrderStatus1"
:src="qnyurl('NotServed.png','rx')" mode=""></image>
<image class="rx-Order-status-Img" v-if="InforData['status'] == OrderStatus5"
:src="qnyurl('cancel.png','rx')" mode=""></image>
<!-- 订单状态 -->
<view class="rx-Order-status-Title">
{{InforData['status'] | OrderState}}
</view>
<!-- 未支付 -->
<template v-if="InforData['status'] == OrderStatus0">
<view class="rx-Order-status-time">
剩余付款时间 {{wait_for}}
</view>
<view class="rx-Order-status-pay" :style="BtnStyle" @tap="payments">
立即支付
</view>
<view class="rx-Order-status-wait">
若您已支付请耐心等待商家结算
</view>
</template>
<!-- 待出餐 -->
<template v-if="InforData['status'] == OrderStatus1">
<view class="rx-Order-status-wait">
下单成功，取餐码生成中，请稍后查看
</view>
</template>
</view>
<!-- 已经出餐 -->
<view class="rx-Order-status-take style" v-else>
<view class="rx-Order-status-take-code">
<text class="text1">取餐码</text>
<text class="text2">{{InforData['codes'].join('')}}</text>
</view>
<view class="rx-Order-status-take-codeimg">
<img class="img" :src="InforData['qrcode']" alt="">
</view>
</view>
</template>
<template v-if="InforData['brand_id'] == 10">
<view class="xbk-Order-status style" v-if="InforData['status'] != 2 && InforData['status'] != 4">
<image class="xbk-Order-status-Img" v-if="InforData['status'] == OrderStatus0"
:src="qnyurl('Unpaid.png','xbk')" mode=""></image>
<image class="xbk-Order-status-Img" v-if="InforData['status'] == OrderStatus1"
:src="qnyurl('Unpaid.png','xbk')" mode=""></image>
<image class="xbk-Order-status-Img" v-if="InforData['status'] == OrderStatus5"
:src="qnyurl('cancel.png','xbk')" mode=""></image>
<!-- 订单状态 -->
<view class="xbk-Order-status-Title">
{{InforData['status'] | OrderState}}
</view>
<!-- 未支付 -->
<template v-if="InforData['status'] == OrderStatus0">
<view class="xbk-Order-status-time">
剩余付款时间 {{wait_for}}
</view>
<view class="xbk-Order-status-pay" @tap="payments">
立即支付
</view>
<view class="xbk-Order-status-wait">
若您已支付请耐心等待商家结算
</view>
</template>
<!-- 待出餐 -->
<template v-if="InforData['status'] == OrderStatus1">
<view class="xbk-Order-status-wait">
排队下单中，请耐心等待
</view>
<view class="xbk-Order-status-Tips">
本页面可关闭，将短信通知取单号，或稍后查询我的订单
</view>
</template>
</view>
<!-- 已经出餐 -->
<view class="xbk-Order-status-take style" v-else>
<view class="codes" v-for="(item,index) in InforData['codes']">
<view class="codes-img">
<image class="img" :src="qnyurl('Password.png','xbk')" mode=""></image>
</view>
<view class="codes-Password">
口令{{index+1}}：{{item}}
</view>
</view>
</view>
</template>
</view>
</template>
<script>
import mixin from '@/static/js/mixin/mixin.js';
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
export default {
mixins: [mixin,restaurantmixins],
name: "b-restaurant-order-status",
props: {
InforData: {
type: Object,
default: () => {}
}
},
computed: {
BtnStyle() {
let style = {};
switch (this['InforData']['brand_id']) {
case 1:
style['color'] = uni.$u.addUnit('#C63836');
style['border'] = uni.$u.addUnit('1px solid #DC7473');
break;
case 10:
style['color'] = uni.$u.addUnit('#ffffff');
style['background-color'] = uni.$u.addUnit('#00AF66');
// style['border'] = uni.$u.addUnit('1px solid #00AF66');
break;
case 13:
style['color'] = uni.$u.addUnit('#ffffff');
style['border'] = uni.$u.addUnit('1px solid #4A6FE7');
break;
};
return style;
}
},
mounted() {
if (this['InforData']['status'] == this['OrderStatus0']) {
this.tiem(this['InforData']['status'], this['InforData']['createtime'])
};
},
data() {
return {};
},
methods: {
payments() {
this.$emit('payments', {
order_sn: this['InforData']['order_sn'],
restaurant_id: this['InforData']['restaurant_id']
});
},
}
}
</script>
<style lang="scss">
page {
background-color: #f8f8f8;
padding: 32rpx;
box-sizing: border-box;
}
.b-restaurant-order-status {
width: 100%;
height: 100%;
.style {
border-radius: 20rpx;
background-color: #ffffff;
}
// 瑞幸待出餐/未支付/已取消状态
.rx-Order-status {
display: flex;
flex-direction: column;
align-items: center;
padding: 35rpx 0;
&-Img {
width: 108rpx;
height: 108rpx;
}
&-Title {
font-size: 36rpx;
margin-bottom: 20rpx;
}
&-time {
color: #666666;
font-size: 26rpx;
margin-bottom: 20rpx;
}
&-pay {
width: 220rpx;
height: 60rpx;
color: #ffffff;
font-size: 28rpx;
background: linear-gradient(-77deg, #4A6FE7, #83ACFF);
border-radius: 30rpx;
text-align: center;
line-height: 60rpx;
}
&-wait {
background: #F7F8FA;
border-radius: 28rpx;
padding: 15rpx 30rpx;
color: #666666;
font-size: 26rpx;
}
// 星巴克
&-Tips {
color: #999999;
font-size: 24rpx;
}
}
// 瑞幸订单完成状态
.rx-Order-status-take {
display: flex;
flex-direction: column;
align-items: center;
padding: 15rpx 0;
&-code {
display: flex;
align-items: center;
.text1 {
color: #000000;
font-size: 26rpx;
margin-right: 15rpx;
}
.text2 {
color: #4B6FE7;
font-size: 52rpx;
}
}
&-codeimg {
width: 234rpx;
height: 235rpx;
.img {
width: 100%;
height: 100%;
}
}
}
}
.b-restaurant-order-status {
width: 100%;
height: 100%;
.style {
border-radius: 20rpx;
background-color: #ffffff;
}
}
</style>

202
components/b-restaurant-state/b-restaurant-state.vue Normal file
View File

@ -0,0 +1,202 @@
<template>
<view class="b-restaurant-state">
<!-- 肯德基 -->
<template v-if="BrandInfor['brand_id'] == 1">
<view class="b-restaurant-state-KDJ" :style="{
'backgroundColor':type == 1?activation:inactivated,
'color':type == 1?activationcolor:inactivatedcolor,
}">
{{ type | state}}
</view>
</template>
<!-- 奈雪 -->
<template v-if="BrandInfor['brand_id'] == 2">
<view class="b-restaurant-state-NX">
<view class="b-restaurant-state-NX-Name">
{{Brand()['BrandName']}}
</view>
<view class="b-restaurant-state-NX-Tiem">
{{item['open_time']}}-{{item['close_time']}}
<!-- 07:30-20:00 -->
<!-- 今日休息中 -->
</view>
<view class="b-restaurant-state-NX-status" v-if="!item['is_open']">
未营业
</view>
</view>
</template>
<!-- 瑞幸 -->
<template v-if="BrandInfor['brand_id'] == 13">
<view class="b-restaurant-state-RX">
<view class="b-restaurant-state-RX-Name">
{{Brand()['BrandName']}}
</view>
<view class="b-restaurant-state-RX-Tiem">
{{item['open_time']}}-{{item['close_time']}}
<!-- 07:30-20:00 -->
<!-- 今日休息中 -->
</view>
<view class="b-restaurant-state-RX-status" v-if="!item['is_open']">
未营业
</view>
</view>
</template>
</view>
</template>
<script>
// 混入
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
/**
* @店铺状态组件
* */
import {
mapGetters,
} from 'vuex';
export default {
mixins:[restaurantmixins],
name: "b-restaurant-state",
props: {
item: {
type: Object,
default: () => {}
},
// 状态
type: {
type: [Number,String],
default: 1
},
// 营业中背景色
activation: {
type: String,
default: '#C63836'
},
// 营业中文字颜色
activationcolor: {
type: String,
default: '#ffffff'
},
// 未营业背景色
inactivated: {
type: String,
default: '#F6F6F6'
},
// 未营业文字颜色
inactivatedcolor: {
type: String,
default: '#999999'
}
},
computed: {
...mapGetters({
// 获取品牌Id
BrandInfor: 'shopping/BrandInfor',
}),
},
data() {
return {
};
},
filters: {
state(v) {
switch (v) {
case 1:
return '点餐';
case 0:
return '未营业';
}
}
}
}
</script>
<style lang="scss">
// 肯德基样式
.b-restaurant-state-KDJ {
width: 96rpx;
height: 32rpx;
font-size: $FONTSIZE24;
text-align: center;
line-height: 32rpx;
}
// 瑞幸咖啡
.b-restaurant-state-RX {
width: auto;
height: 38rpx;
border-radius: 5rpx;
display: flex;
&-Name {
width: 111rpx;
color: #ffffff;
font-size: $FONTSIZE24;
background: linear-gradient(-77deg, $THEMECOLOR6, #83ACFF);
line-height: 38rpx;
text-align: center;
}
&-Tiem {
border: 1rpx solid $THEMECOLOR6;
color: #83ACFF;
line-height: 32rpx;
font-size: $FONTSIZE24;
padding: 0 20rpx;
}
&-status {
width: 91rpx;
height: 38rpx;
background: #FFFFFF;
border: 1rpx solid #CCCCCC;
border-radius: 5rpx;
color: #CCCCCC;
font-size: $FONTSIZE24;
margin-left: 10rpx;
text-align: center;
}
}
// 奈雪
// 瑞幸咖啡
.b-restaurant-state-NX {
width: auto;
height: 38rpx;
border-radius: 5rpx;
display: flex;
&-Name {
width: 111rpx;
color: #ffffff;
font-size: $FONTSIZE24;
background: linear-gradient(-77deg, #9BC419, #B0D342);
line-height: 38rpx;
text-align: center;
}
&-Tiem {
border-top: 1rpx solid $themeBackColor-2-1;
border-bottom: 1rpx solid $themeBackColor-2-1;
border-right: 1rpx solid $themeBackColor-2-1;
color: $themeBackColor-2-1;
line-height: 32rpx;
font-size: $FONTSIZE24;
padding: 0 20rpx;
}
&-status {
width: 91rpx;
height: 38rpx;
background: #FFFFFF;
border: 1rpx solid #CCCCCC;
border-radius: 5rpx;
color: #CCCCCC;
font-size: $FONTSIZE24;
margin-left: 10rpx;
text-align: center;
}
}
</style>

141
components/b-rx-commodity-item/b-rx-commodity-item.vue Normal file
View File

@ -0,0 +1,141 @@
<template>
<view class="b-rx-commodity-item">
<view class="b-rx-commodity-item-commodity">
<view class="b-rx-commodity-item-commodity-img">
<image class="img" :src="item['product_img']" mode=""></image>
</view>
<view class="b-rx-commodity-item-commodity-infor">
<!-- 商品 -->
<view class="b-rx-commodity-item-commodity-infor-name">
{{item['product_name']}}
</view>
<view v-if="item['sku']" class="b-rx-commodity-item-commodity-infor-sku">
{{item['sku']}}
</view>
<!-- 价格 -->
<view class="b-rx-commodity-item-commodity-infor-money">
<view class="b-rx-commodity-item-commodity-infor-money-price">
<text class="b-rx-commodity-item-commodity-infor-money-yang">x</text>
<text class="b-rx-commodity-item-commodity-infor-money-amount">{{item['num']?item['num']:item['amount']}}</text>
</view>
</view>
</view>
</view>
<!-- 数量 -->
<view class="quantity">
<!-- 订单列表中的商品数据价格是后台计算过的所以直接使用就行了original_price属性之后订单数据才会返回 -->
<view class="num" v-if="item['original_price']">
￥{{RetainDecimalPoint(item['pay_price'])}}
</view>
<view class="num" v-else-if="!item['original_price'] && (BrandInfor['brand_id'] == 13 || BrandInfor['brand_id'] == 1)">
￥{{RetainDecimalPoint(item['pay_price'] * (item['num']?item['num']:item['amount']))}}
</view>
<view class="num" v-else-if="!item['original_price'] && BrandInfor['brand_id'] == 10">
￥{{RetainDecimalPoint(item['adj_pay'] * (item['num']?item['num']:item['amount']))}}
</view>
</view>
</view>
</template>
<script>
// 注意:该组件是星巴克与瑞幸共用若需单独修改请另行复制出一份
import mixin from '@/static/js/mixin/mixin.js';
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
export default {
name: "b-rx-commodity-item",
mixins:[mixin,restaurantmixins],
props:{
item:{
type:Object,
default:()=>{}
}
},
data() {
return {
};
}
}
</script>
<style lang="scss">
.b-rx-commodity-item {
width: 100%;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding-bottom: 20rpx;
&-commodity {
display: flex;
flex: 1;
&-img {
width: 120rpx;
height: 120rpx;
min-width: 120rpx;
min-height: 120rpx;
.img {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
&-infor {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-left: 22rpx;
&-name {
font-size: $FONTSIZE30;
max-width: 336rpx;
min-width: 336rpx;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
&-sku {
color: #999999;
font-size: $FONTSIZE22;
}
&-money {
// max-width: 115rpx;
// min-width: 115rpx;
text-align: center;
&-yang {
font-size: $FONTSIZE22;
}
&-price {
display: flex;
align-items: center;
font-size: $FONTSIZE30;
}
}
}
}
.quantity {
// display: flex;
// justify-content: space-between;
font-size: 30rpx;
flex: 1;
color: #4A6FE7;
.num {
text-align: center;
}
.img {
width: 42rpx;
height: 42rpx;
}
}
}
</style>

331
components/b-rx-sku-popup/b-rx-sku-popup.vue Normal file
View File

@ -0,0 +1,331 @@
<template>
<view class="b-rx-sku-popup">
<u-popup :show="show" @close="show = false" round="20" closeable zIndex="20080">
<view class="commodity-sku">
<!-- 商品图 -->
<view class="commodity-sku-cover">
<!-- 封面 -->
<image class="img" :src="skuinfor['product_img']" mode="widthFix"></image>
<!-- 名称-数量 -->
<view class="commodity-sku-cover-name">
<view class="commodity-sku-cover-name-title" :style="{color:Brand()['ThemeColor']}">
{{skuinfor['product_name']}}
</view>
<view class="commodity-sku-cover-name-cart">
<image class="img" :src="qnyurl('reduce.png','rx')" mode="" @tap="reducequantity()"></image>
<view class="num">
{{skuinfor['num']}}
</view>
<image class="img" :src="qnyurl('add.png','rx')" mode="" @tap="Addquantity()"></image>
</view>
</view>
</view>
<!-- 规格 -->
<view class="commodity-sku-option" v-if="skuinfor['details']">
<template v-for="(item,index) in skuinfor['details']['specifications']">
<view class="commodity-sku-option-item" :key="index">
<view class="commodity-sku-option-item-label">
{{item['name']}}
</view>
<view class="commodity-sku-option-item-values">
<template v-for="(item2,index2) in item['ingredients']">
<view @tap="skuClick(index,index2)"
:class="{'commodity-sku-option-item-values-activation':item2['checked']}"
class="commodity-sku-option-item-values-item" :key="index2">
{{item2['name']}}
</view>
</template>
</view>
</view>
</template>
</view>
<view class="commodity-sku-Infor">
<view class="commodity-sku-Infor-left">
<view class="commodity-sku-Infor-left-Price">
<text class="text1">￥</text>
<text class="text2">{{_amount(skuinfor['adj_pay'] * skuinfor['num'])}}</text>
<view>{{skuinfor['sku']}}</view>
</view>
<view class="commodity-sku-Infor-left-sku">
{{skutext}}
</view>
</view>
<!-- Addcommodity方法中不可设置形参,因为点击事件默认第一个参数就是点击事件的各种参数并不是形参中所设置的默认值 -->
<!-- 所以在点击时手动传入skuinfor参数 -->
<view class="commodity-sku-Infor-right" @tap="Addcommodity">
加入购物车
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import {
mapGetters
} from 'vuex';
import mixin from '@/static/js/mixin/mixin.js'
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js'
export default {
mixins: [mixin, restaurantmixins],
name: "b-rx-sku-popup",
data() {
return {
// 弹框显示/隐藏
show: false,
// 弹框商品详情
skuinfor: {},
// 规格文字
skutext: '',
};
},
computed: {
...mapGetters({
GetcommodityInfor: 'shopping/GetcommodityInfor'
}),
},
watch: {
// 计算属性获取到的弹框详情数据不可直接修改,所以重新赋值便于修改数量
GetcommodityInfor(value) {
this['skuinfor'] = JSON.parse(JSON.stringify(value));
this.skuInit();
}
},
methods: {
/**
* @添加数量
* */
Addquantity(num = 1) {
this['skuinfor']['num'] += num;
},
/**
* @选择规格数量减
* */
reducequantity(num = 1) {
if (this['skuinfor']['num'] == 1) return;
this['skuinfor']['num'] -= num;
},
/**
* @加入购物车
* */
Addcommodity() {
let self = this;
uni.$u.debounce(() => {
self.ADD_CART({
commodity: self['skuinfor'],
quantity: self['skuinfor']['num']
}).then(() => {
console.log('加入成功');
self['show'] = false;
console.log(self['show'], 'show');
});
}, 800, true)
},
/**
* @筛选出当前选择的高亮规格
* */
skuInit() {
let r = [];
let t = this['skuinfor']['details']['specifications'];
let pay = 0;
for (let i = 0; i < t['length']; i++) {
let item = t[i];
r.push(...item['ingredients']);
};
// 规格文字
let newarr = r.filter(item => item['checked']).map(item => item['name']);
this['skuinfor']['sku'] = newarr.join('/');
// 计算加料价格
pay + r.filter(item => item['checked']).map(item => item['price']).reduce(function(previousValue, currentValue) {
return previousValue + currentValue;
});
this['skuinfor']['add_price'] = pay;
// 实际价格
this['skuinfor']['adj_pay'] = (+this['skuinfor']['pay_price']) + (pay * 100);
// 查找code
let index = -1;
let code = '';
outer: for (let j = 0; j < this['skuinfor']['details']['sku_infos']['length']; j++) {
let item1 = this['skuinfor']['details']['sku_infos'][j];
index = 0;
code = item1['code'];
for (let k = 0; k < item1['values']['length']; k++) {
let item2 = item1['values'][k];
if (newarr.indexOf(item2['spec_name']) != -1) {
index += 1;
} else {
continue;
}
if (index >= newarr['length']) {
this['skuinfor']['sku_code'] = code;
break outer;
}
}
};
if (!code) this['skuinfor']['sku_code'] = this['skuinfor']['details']['sku_infos'][0]['code'];
// this['skuinfor']['add_price'] = _newSupItemArr.flatMap(item => item)
console.log(this['skuinfor'],'瑞幸筛选的CODE');
},
/**
* @规格选择
* */
skuClick(index1, index2) {
let pay = 0;
// 将当前点击的类型规格高亮状态改变,其他的设置为不高亮
this['skuinfor']['details']['specifications'][index1]['ingredients'].map((item, index) => {
if (index2 == index) {
item['checked'] = true;
} else {
item['checked'] = false;
}
});
this.skuInit();
},
}
}
</script>
<style lang="scss">
// 规格弹框样式
.commodity-sku {
&-cover {
// height: 560rpx;
height: auto;
position: relative;
.img {
width: 100%;
}
&-title {
color: #333333;
font-size: 34rpx;
}
&-name {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
color: #ffffff;
padding: 10rpx 32rpx;
background-color: rgba(255, 255, 255, 0.5);
&-cart {
flex: 1;
height: 60rpx;
display: flex;
justify-content: flex-end;
font-size: 36rpx;
align-items: center;
.num {
max-width: 100rpx;
min-width: 100rpx;
text-align: center;
color: #000000;
}
.img {
width: 42rpx;
height: 42rpx;
}
}
}
}
&-option {
padding: 32rpx;
&-item {
width: 100%;
height: 70rpx;
font-size: 26rpx;
display: flex;
justify-content: flex-start;
margin-bottom: 15rpx;
&-label {
min-width: 112rpx;
height: 100%;
color: #999999;
line-height: 70rpx;
}
&-values {
width: 100%;
display: flex;
justify-content: flex-start;
&-activation {
background: rgba(131, 172, 255, 0.3) !important;
border: 1rpx solid #83ACFF !important;
color: #4A6FE7 !important;
}
&-item {
min-width: 112rpx;
height: 100%;
line-height: 70rpx;
background: #F7F8FA;
border-radius: 6rpx;
margin-bottom: 20rpx;
text-align: center;
margin-right: 15rpx;
border: 1rpx solid #F7F8FA;
}
}
}
}
&-Infor {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx;
border-top: 1rpx solid rgba(102, 102, 102, 0.1);
&-left {
&-Price {
color: #FF780F;
.text1 {
font-size: 24rpx;
}
.text2 {
font-size: 36rpx;
}
}
&-sku {
color: #666666;
font-size: 22rpx;
}
}
&-right {
width: 254rpx;
height: 86rpx;
background: linear-gradient(-77deg, #4A6FE7, #83ACFF);
box-shadow: 0 6rpx 8rpx 0 rgba(74, 111, 231, 0.2300);
border-radius: 43rpx;
text-align: center;
line-height: 86rpx;
color: #ffffff;
}
}
}
</style>

24
components/b-settlement/b-settlement.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<view class="b-settlement">
</view>
</template>
<script>
/**
* @deprecated 页面底部结算组件
* @property {Boolean} mode 展示方式
* */
export default {
name: "b-settlement",
data() {
return {
};
}
}
</script>
<style lang="scss">
</style>

285
components/b-shop-infor-head/b-shop-infor-head.vue Normal file
View File

@ -0,0 +1,285 @@
<template>
<view class="b-shop-infor-head">
<!-- 瑞幸 -->
<view class="shop-top-rx shop-top" v-if="BrandInfor['brand_id'] == 13">
<view class="shop-top-rx-infor ">
<view class="shop-top-rx-infor-icon">
<image class="img" :src="qnyurl('shopareaioc.png','rx')" mode=""></image>
</view>
<view class="shop-top-rx-infor-Name-Area">
<view class="shop-top-rx-infor-Name-Area-name">
{{GetShopInfor['restaurant_name']}}
</view>
<view class="shop-top-rx-infor-Name-Area-area">
{{GetShopInfor['restaurant_address']}}
</view>
</view>
<view class="shop-top-rx-infor-Navigation" @click="openLocation()">
导航
</view>
</view>
</view>
<!-- 星巴克 -->
<view class="shop-top-xbk shop-top" v-if="BrandInfor['brand_id'] == 10">
<view class="shop-top-xbk-infor-Name-Area">
<view class="shop-top-xbk-infor-Name-Area-icon">
<image class="img" :src="qnyurl('xbk_home.png','xbk')" mode=""></image>
</view>
<view class="shop-top-xbk-infor-Name-Area-name">
{{GetShopInfor['restaurant_name']}}>
</view>
<view class="shop-top-xbk-infor-Name-Area-map-address" @tap="openLocation()">
<image class="img" :src="qnyurl('map.png','xbk')" mode=""></image>
</view>
</view>
<view class="shop-top-xbk-infor-Name-area">
{{GetShopInfor['restaurant_address']}}
</view>
</view>
<!-- 奈雪 -->
<view class="shop-top-xbk shop-top" v-if="BrandInfor['brand_id'] == 2">
<view class="shop-top-xbk-infor-Name-Area">
<view class="shop-top-xbk-infor-Name-Area-icon">
<image class="img" :src="qnyurl('xbk_home.png','xbk')" mode=""></image>
</view>
<view class="shop-top-xbk-infor-Name-Area-name">
{{GetShopInfor['restaurant_name']}}>
</view>
<view class="shop-top-xbk-infor-Name-Area-map-address" @tap="openLocation()">
<image class="img" :src="qnyurl('map.png','xbk')" mode=""></image>
</view>
</view>
<view class="shop-top-xbk-infor-Name-area">
{{GetShopInfor['restaurant_address']}}
</view>
</view>
</view>
</template>
<script>
import {
mapGetters,
} from 'vuex';
import {
isCollectionAPI,
storeCollectionAPI,
} from '@/request/restaurant/index.js';
import mixin from '@/static/js/mixin/mixin.js';
export default {
name: "b-shop-infor-head",
mixins: [mixin],
data() {
return {
// 是否关注
isCollection: false,
};
},
computed: {
...mapGetters({
// 获取餐厅信息
GetShopInfor: 'shopping/GetShopInfor',
// 获取品牌Id
BrandInfor: 'shopping/BrandInfor',
}),
},
mounted() {
if (this['BrandInfor']['brand_id'] == 1) {
let parameters = {
brand_id: this['BrandInfor']['brand_id'],
restaurant_id: this['GetShopInfor']['restaurant_id']
}
isCollectionAPI(parameters).then(res => {
this['isCollection'] = res ? true : false;
})
}
},
methods: {
/**
* @关注或者取消关注
* */
Collection() {
let parameters = {
lng: this['GetShopInfor']['longitude'],
lat: this['GetShopInfor']['latitude'],
status: !this['isCollection'],
brand_id: this['BrandInfor']['brand_id'],
brand_name: this['BrandInfor']['brand_name'],
restaurant_id: this['GetShopInfor']['restaurant_id'],
restaurant_name: this['GetShopInfor']['restaurant_name'],
restaurant_address: this['GetShopInfor']['restaurant_address']
}
storeCollectionAPI(parameters).then(res => {
this['isCollection'] = !this['isCollection'];
if (this['isCollection']) {
uni.showToast({
title: '关注成功',
icon: 'none'
});
return;
};
uni.showToast({
title: '取消关注',
icon: 'none'
})
})
},
}
}
</script>
<style lang="scss">
.shop-top{
background-color: #FFFFFF;
}
// 肯德基收藏样式
.shop-infor {
display: flex;
align-items: center;
width: 100%;
height: 131rpx;
padding: 0 30rpx 30rpx 30rpx;
.shop-infor-left {
flex: 1;
&-name {
font-size: $FONTSIZE28;
font-weight: 700;
margin-bottom: 18rpx;
}
&-area {
font-size: $FONTSIZE24;
color: #999999;
}
}
.shop-infor-right {
font-size: $FONTSIZE24;
color: $PROMPTTEXTCOLOR;
font-size: 24rpx;
color: #666666;
display: flex;
flex-direction: column;
align-items: center;
.img {
max-width: 36rpx;
min-width: 36rpx;
min-height: 36rpx;
max-height: 36rpx;
margin-bottom: 16rpx;
}
}
}
// 瑞幸导航样式
.shop-top-rx {
width: 100%;
padding: 0 30rpx 30rpx 30rpx;
&-infor {
display: flex;
align-items: center;
justify-content: flex-start;
&-icon {
width: 37rpx;
height: 43rpx;
margin-right: 30rpx;
.img {
width: 100%;
height: 100%;
}
}
&-Name-Area {
flex: 1;
&-name {
font-size: 30rpx;
line-height: 65rpx;
}
&-area {
color: #999999;
font-size: 26rpx;
}
}
&-Navigation {
width: 89rpx;
height: 43rpx;
background: #FFFFFF;
border: 1rpx solid #4A6FE7;
border-radius: 22rpx;
color: #4A6FE7;
text-align: center;
line-height: 43rpx;
margin-left: 60rpx;
font-size: 26rpx;
}
}
// .shop-infor-Navigation{
// width: 89rpx;
// height: 43rpx;
// background: #FFFFFF;
// border: 1rpx solid #4A6FE7;
// border-radius: 22rpx;
// color: #4A6FE7;
// text-align: center;
// line-height: 43rpx;
// margin-left: 60rpx;
// }
// &-icon{
// .img{
// width: 37px;
// height: 43px;
// }
// }
}
.shop-top-xbk{
width: 100%;
padding:32rpx;
&-infor-Name-Area{
display: flex;
justify-content:flex-start;
margin-bottom: 16rpx;
align-items: center;
&-icon{
width: 30rpx;
height: 30rpx;
margin-right: 15rpx;
.img{
width: 100%;
height: 100%;
}
}
&-name{
color: #333333;
font-size: 30rpx;
flex: 1;
}
&-map-address{
width: 42rpx;
height: 38rpx;
.img{
width: 100%;
height: 100%;
}
}
}
&-infor-Name-area{
font-size: 24rpx;
color: #777777;
}
}
</style>

191
components/b-shop-item/b-kfc-shop-item.vue Normal file
View File

@ -0,0 +1,191 @@
<template>
<view class="b-kfc-shop-item">
<view class="b-kfc-shop-item-commodity">
<image class="b-kfc-shop-item-commodity-img" :src="item['product_img']" mode=""></image>
</view>
<view class="b-kfc-shop-item-commodity-infor">
<!-- 商品标题 -->
<view class="b-kfc-shop-item-commodity-infor-title b-kfc-shop-item-commodity-infor-bottom">
{{item['product_name']}}
</view>
<!-- 补贴金额 -->
<view class="b-kfc-shop-item-commodity-infor-discount b-kfc-shop-item-commodity-infor-bottom">
最高补贴{{RetainDecimalPoint(item['max_deduction'])}}面额
</view>
<!-- 价格 -->
<view class="b-kfc-shop-item-commodity-infor-price b-kfc-shop-item-commodity-infor-bottom">
<text class="yang">原价:￥</text>
<text class="price">{{RetainDecimalPoint(item['pay_price'])}}</text>
</view>
<!-- 优惠补贴后的价格 -->
<view class="b-kfc-shop-item-commodity-infor-price b-kfc-shop-item-commodity-infor-bottom">
<text class="yang">补贴后价格:￥</text>
<text class="price">{{RetainDecimalPoint(item['pay_price'] - item['max_deduction'])}}</text>
</view>
<!-- 加入购物车 -->
<view class="b-kfc-shop-item-commodity-infor-shopping-cart">
<view v-show="shopCart && shopCart['num']" class="Reduce-Button" :class="[`theme-Union-Class-${BrandInfor['brand_id']}-2`]" @tap.stop="reducecommodity">
<view>-</view>
</view>
<view class="num" v-show="shopCart && shopCart['num']">
{{shopCart['num']}}
</view>
<view class="Add-Button" :class="[`theme-Union-Class-${BrandInfor['brand_id']}-1`]" @tap.stop="Addcommodity">
<view>+</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
// 混入
import mixin from '@/static/js/mixin/mixin.js';
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js'
export default {
mixins: [mixin, restaurantmixins],
name: "b-kfc-shop-item",
props: {
item: {
type: Object,
default: () => {}
}
},
data() {
return {
};
},
computed: {
//当前商店购物信息
shopCart: function() {
try {
return {
...this['GetCartList'][this['item']['product_id']]
};
} catch (e) {
return false
}
},
},
mounted() {
// // 监听麦当劳套餐选择完成之后对商品数据经行整理然后再加入购物车
// uni.$on('skuarrangement',function(data){
// console.log(data);
// })
},
methods: {
// 为防止后期添加商品与减少商品增加逻辑所以不在事件上直接调用vuex方法
/**
* @添加数量/增加商品
* */
Addcommodity() {
if (this['item']['is_sku']) {
this.PageShopCombo();
return;
};
console.log(this['item'],'item添加');
this.ADD_CART({
commodity: this['item']
})
},
/**
* @减少/删除商品
* */
reducecommodity() {
this.REDUCE_CART(this['item'])
},
// 跳转套餐页面
PageShopCombo() {
uni.navigateTo({
url: `/pages/restaurant/home/shop_home/shop-combo/mdl-shop-combo?product_id=${this['item']['product_id']}`
})
}
}
}
</script>
<style lang="scss">
.b-kfc-shop-item {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
&-commodity {
width: 220rpx;
height: 195rpx;
max-width: 220rpx;
max-height: 195rpx;
min-width: 220rpx;
min-height: 195rpx;
border-radius: 10rpx;
overflow: hidden;
&-img {
width: 100%;
height: 100%;
}
}
&-commodity-infor {
flex: 1;
padding-left: 22rpx;
&-bottom {
margin-bottom: 15rpx;
}
&-title {
font-size: $FONTSIZE26;
color: $THEMECOLOR4;
}
&-discount {
background-color: #FFDADA;
border-radius: 50rpx;
color: $THEMECOLOR1;
font-size: $FONTSIZE22;
padding: 5rpx 15rpx;
display: inline-block;
}
&-price {
color: $THEMECOLOR1;
.yang {
font-size: $FONTSIZE22;
}
.price {
font-size: $FONTSIZE30;
}
}
&-shopping-cart {
flex: 1;
height: 60rpx;
display: flex;
justify-content: flex-end;
font-size: 36rpx;
align-items: center;
.num {
max-width: 100rpx;
min-width: 100rpx;
text-align: center;
}
.img {
width: 42rpx;
height: 42rpx;
}
}
}
}
</style>

271
components/b-shop-item/b-rx-shop-item.vue Normal file
View File

@ -0,0 +1,271 @@
<template>
<view class="b-rx-shop-item">
<view class="b-rx-shop-item-commodity">
<image class="b-rx-shop-item-commodity-img" :src="item['product_img']" mode=""></image>
</view>
<view class="b-rx-shop-item-commodity-infor">
<!-- 商品标题 -->
<view class="b-rx-shop-item-commodity-infor-title b-rx-shop-item-commodity-infor-bottom">
{{item['product_name']}}
</view>
<!-- 补贴金额 -->
<view v-if="item['max_deduction'] > 0"
class="b-rx-shop-item-commodity-infor-discount b-rx-shop-item-commodity-infor-bottom">
最高补贴{{RetainDecimalPoint(item['max_deduction'])}}面额
</view>
<!-- 价格 -->
<view class="b-rx-shop-item-commodity-infor-original-price b-rx-shop-item-commodity-infor-bottom">
<text class="yang">原价:￥</text>
<text class="price">{{RetainDecimalPoint(item['pay_price'])}}</text>
</view>
<!-- 优惠补贴后的价格 -->
<view class="b-rx-shop-item-commodity-infor-price b-rx-shop-item-commodity-infor-bottom">
<text class="yang">补贴后价格:￥</text>
<text class="price">{{RetainDecimalPoint(item['pay_price'] - item['max_deduction'])}}</text>
</view>
<!-- 直接添加商品 -->
<!-- <view class="b-kfc-shop-item-commodity-infor-shopping-cart" v-if="shopCart['num'] > 0">
<image class="img" :src="qnyurl('reduce.png','rx')" mode=""
@tap="reducecommodity"></image>
<view class="num">
{{shopCart['num']}}
</view>
<image class="img" :src="qnyurl('add.png','rx')" mode="" @tap="GetCommodity"></image>
</view> -->
<!-- 需要选择规格 -->
<view class="b-rx-shop-item-commodity-infor-shopping-cart-sku" @tap="$u.debounce(GetCommodity, 800,true)">
<view class="b-rx-shop-item-commodity-infor-shopping-cart-sku-btn" :style="[Btnstyle]">
<u-badge v-if="NumValu > 0" :offset="[-6,-5]" max="99" absolute :value="NumValu"></u-badge>
选规格
</view>
</view>
</view>
</view>
</template>
<script>
/**
* @肯德基店铺商品组件
* */
// 混入
import mixin from '@/static/js/mixin/mixin.js';
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
// 接口请求
import {
menuDetailsAPI,
} from '@/request/restaurant/index.js';
import {
mapMutations
} from 'vuex'
export default {
mixins: [mixin, restaurantmixins],
name: "b-rx-shop-item",
props: {
item: {
type: Object,
default: () => {}
}
},
data() {
return {};
},
computed: {
//当前商店购物信息
shopCart: function() {
try {
return this['GetCartList'][this['item']['product_id']];
} catch (e) {
return 0
}
},
NumValu(){
try{
return this['GetCartList'][this['item']['product_id']]['num']
}catch(e){
return 0
}
},
// 按钮颜色
Btnstyle() {
if (this['BrandInfor']['brand_id'] == 10) {
return {
'background': '#00AF66'
};
}
if (this['BrandInfor']['brand_id'] == 13) {
return {
'background': 'linear-gradient(-77deg, #4A6FE7, #83ACFF)'
};
}
}
},
methods: {
...mapMutations({
SetcommodityInfor: 'shopping/SETINFOR'
}),
// 获取商品规格
GetCommodity() {
uni.showLoading({
title: '加载中...'
});
let parameters = {
brand_id: this['BrandInfor']['brand_id'],
restaurant_id: this['GetShopInfor']['restaurant_id'],
product_id: this['item']['product_id']
}
menuDetailsAPI(parameters).then(res => {
uni.hideLoading();
// 设置初始数量
res['data']['num'] = 1;
this.SetcommodityInfor(res['data']);
if (this['BrandInfor']['brand_id'] == 10) {
// H5端不可用
// this['$parent']['$parent']['$parent']['$refs']['b-xbk-sku-popup']['show'] = true;
this.$emit('skupopup','b-xbk-sku-popup');
console.log(this['BrandInfor']['brand_id'],'执行1')
};
if (this['BrandInfor']['brand_id'] == 13) {
this.$emit('skupopup','b-rx-sku-popup');
// H5端不可用
// this['$parent']['$parent']['$parent']['$refs']['b-rx-sku-popup']['show'] = true;
console.log(this['BrandInfor']['brand_id'],'执行2')
}
})
}
}
}
</script>
<style lang="scss">
.b-rx-shop-item {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
&-commodity {
width: 220rpx;
height: 195rpx;
max-width: 220rpx;
max-height: 195rpx;
min-width: 220rpx;
min-height: 195rpx;
border-radius: 10rpx;
overflow: hidden;
&-img {
width: 100%;
height: 100%;
}
}
&-commodity-infor {
flex: 1;
padding-left: 22rpx;
&-bottom {
margin-bottom: 15rpx;
}
&-title {
font-size: $FONTSIZE26;
color: $THEMECOLOR4;
}
&-discount {
background-color: #FFDADA;
border-radius: 50rpx;
color: $THEMECOLOR1;
font-size: $FONTSIZE22;
padding: 5rpx 15rpx;
display: inline-block;
}
&-original-price {
.yang {
font-size: $FONTSIZE22;
}
.price {
font-size: $FONTSIZE22;
}
}
&-price {
color: $THEMECOLOR1;
.yang {
font-size: $FONTSIZE22;
}
.price {
font-size: $FONTSIZE30;
}
}
&-shopping-cart {
flex: 1;
height: 60rpx;
display: flex;
justify-content: flex-end;
font-size: 36rpx;
align-items: center;
.num {
max-width: 100rpx;
min-width: 100rpx;
text-align: center;
}
.img {
width: 42rpx;
height: 42rpx;
}
}
&-shopping-cart-sku {
flex: 1;
height: 60rpx;
display: flex;
justify-content: flex-end;
font-size: 36rpx;
align-items: center;
&-btn {
width: 106rpx;
height: 50rpx;
position: relative;
border-radius: 25rpx;
color: #ffffff;
text-align: center;
line-height: 50rpx;
font-size: 24rpx;
}
}
}
}
.b-kfc-shop-item-commodity-infor-shopping-cart {
flex: 1;
height: 60rpx;
display: flex;
justify-content: flex-end;
font-size: 36rpx;
align-items: center;
.num {
max-width: 100rpx;
min-width: 100rpx;
text-align: center;
}
.img {
width: 42rpx;
height: 42rpx;
}
}
</style>

244
components/b-shop-list-item/b-shop-list-item.vue Normal file
View File

@ -0,0 +1,244 @@
<template>
<view class="Store-List-Item" @tap="itemclick">
<!-- 肯德基店铺列表样式 -->
<template v-if="BrandInfor['brand_id'] == 1">
<view class="Store-List-Item-Top">
<view class="Store-List-Item-Top-Name">
{{item['restaurant_name']}}
</view>
<b-restaurant-state></b-restaurant-state>
<view class="Store-List-Item-Top-distance">
{{item['distance']}}m
</view>
</view>
<view class="Store-List-Item-Area">
{{item['restaurant_address']}}
</view>
</template>
<!-- 瑞幸 -->
<template v-if="BrandInfor['brand_id'] == 13">
<view class="Store-List-Item-Top-RX">
<view class="Store-List-Item-Top-RX-Left">
<view class="Store-List-Item-Top-RX-Left-Title">
{{item['restaurant_name']}}
</view>
<b-restaurant-state :item="item"></b-restaurant-state>
</view>
<view class="Store-List-Item-Top-RX-Right" @tap.stop="openLocation(item['latitude'],item['longitude'])">
<img class="img" :src="qnyurl('Navigation.png','rx')" alt="">
<view class="Store-List-Item-Top-RX-Right-distance">
{{item['distance']}}km
</view>
</view>
</view>
<view class="Store-List-Item-Area-RX">
<image class="img" :src="qnyurl('areaicon.png','rx')" mode=""></image>
<view class="Store-List-Item-Area-RX-text">
{{item['restaurant_address']}}
</view>
</view>
</template>
<!-- 停店遮罩 -->
<view class="state-stop" v-if="item['is_open'] == 0"></view>
<!-- 闭店弹框 -->
<u-modal :show="show" title=" " borderRadius="20">
<template v-slot:default>
<view class="RX-slot-content">
<image class="img" :src="qnyurl('closureimg.png','rx')" mode=""></image>
<view class="text">
抱歉！该门店未营业
</view>
</view>
</template>
<template v-slot:confirmButton>
<view class="RX-confirmButton">
<view class="btn" @tap="show = false">
确定
</view>
</view>
</template>
</u-modal>
</view>
</template>
<script>
/**
* @店铺列表组件
* */
import {
mapGetters,
} from 'vuex';
import mixin from '@/static/js/mixin/mixin.js';
export default {
name: "b-shop-list-item",
mixins: [mixin],
props: {
item: {
type: Object,
default: () => {}
}
},
computed: {
...mapGetters({
// 获取品牌Id
BrandInfor: 'shopping/BrandInfor',
}),
},
data() {
return {
// 闭店弹框
show: false
};
},
methods: {
itemclick() {
if (this['item']['is_open'] == 0) {
this['show'] = true;
return;
}
this.$emit('itemclick', this['item'])
}
}
}
</script>
<style lang="scss">
// 瑞幸遮罩
.state-stop {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.3);
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.Store-List-Item {
width: 100%;
height: auto;
background-color: #ffffff;
border-radius: 15rpx;
min-height: 155rpx;
padding: 32rpx;
margin-top: 20rpx;
position: relative;
// 肯德基样式
&-Top {
display: flex;
align-items: flex-end;
margin-bottom: 30rpx;
&-Name {
font-size: $FONTSIZE30;
color: $THEMECOLOR4;
margin-right: 20rpx;
}
&-distance {
font-size: $FONTSIZE26;
color: $THEMECOLOR5;
flex: 1;
text-align: right;
}
}
&-Area {
font-size: $FONTSIZE26;
}
// 瑞幸咖啡样式
&-Top-RX {
display: flex;
justify-content: space-between;
margin-bottom: 30rpx;
&-Left {
font-size: $FONTSIZE30;
color: $THEMECOLOR4;
&-Title {
margin-bottom: 20rpx;
font-weight: 700;
}
}
&-Right {
display: flex;
flex-direction: column;
align-items: center;
color: $THEMECOLOR6;
font-size: 26rpx;
.img {
width: 64rpx;
height: 64rpx;
}
&-distance {
margin-top: 15rpx;
}
}
}
&-Area-RX {
color: #999999;
font-size: $FONTSIZE24;
padding-top: 22rpx;
border-top: 1rpx solid #EDEEF0;
display: flex;
justify-content: flex-start;
align-items: center;
&-text {
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.img {
width: 22rpx;
height: 26rpx;
margin-right: 15rpx;
}
}
}
// // 闭店弹框
// .slot-content {
// display: flex;
// flex-direction: column;
// align-items: center;
// .img {
// width: 196rpx;
// height: 169rpx;
// margin-bottom: 32rpx;
// }
// .text {
// font-size: 32rpx;
// color: #333333;
// }
// }
// .confirmButton {
// display: flex;
// justify-content: center;
// .btn {
// width: 470rpx;
// height: 86rpx;
// background: linear-gradient(-77deg, #4A6FE7, #83ACFF);
// border-radius: 43rpx;
// font-size: 30rpx;
// color: #ffffff;
// text-align: center;
// line-height: 86rpx;
// }
// }
</style>

140
components/b-shop-load/b-shop-load.vue Normal file
View File

@ -0,0 +1,140 @@
<template>
<view class="b-shop-load" v-show="display">
<view :style="[position]" class="content">
<view class="Status-Img">
<image :src="Img" :style="[Style]" class="img"></image>
</view>
<!-- 提示文字 -->
<view class="Prompt-Text">
{{Text}}
</view>
</view>
</view>
</template>
<script>
// 父组件必须存在position: relative;属性
/**
* @param { String } type
* */
import mixin from '@/static/js/mixin/mixin.js'
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js'
export default {
name: "b-shop-load",
mixins: [mixin,restaurantmixins],
props: {
type: {
type: String,
default: ""
},
width: {
type: String,
default: "120"
},
height: {
type: String,
default: "120"
},
// 需要带入单位
offset:{
type:[Array,String],
default:'content'
},
show:{
type:Boolean,
default:false
}
},
computed: {
// 动态监听
display(){
console.log('组件计算属性',this['show']);
return this['show']
},
// 动态监听
GetType() {
return this['type'];
},
Style() {
return {
width: `${this['width']}rpx`,
height: `${this['height']}rpx`
}
},
Text() {
// 加载中
if (this['GetType'] == 'load') {
return '加载中，请稍后'
} else if (this['GetType'] == 'close') {
// 闭店
return '抱歉，该门店已打烊'
} else if (this['GetType'] == 'orders') {
// 没有订单
return '您还没有小食订单 '
} else if (this['GetType'] == 'store') {
// 没有门店
return '该地区暂无门店信息'
}
},
Img() {
// 加载中
if (this['GetType'] == 'load') {
if(this['BrandInfor']['brand_id'] == 1){
return this.qnyurl('load.png', 'rx')
}else if(this['BrandInfor']['brand_id'] == 10){
return this.qnyurl('load.gif', 'xbk')
}else if(this['BrandInfor']['brand_id'] == 13){
return this.qnyurl('load.png', 'rx')
}else if(this['BrandInfor']['brand_id'] == 19){
return this.qnyurl('load.png', 'dyp')
}
} else if (this['GetType'] == 'close') {
// 闭店
return this.qnyurl('closureimg.png', 'rx')
} else if (this['GetType'] == 'orders') {
// 没有订单
return this.qnyurl('orderno.png', 'rx')
} else if (this['GetType'] == 'store') {
// 没有门店
return this.qnyurl('default.png', 'rx')
}
},
position(){
if(typeof this['offset'] == 'string' && this['offset'] == 'content'){
return {top:'50%',left:'50%',transform:'translate(-50%,-50%)'}
}
return {top:this['offset'][0],left:this['offset'][1]}
}
},
}
</script>
<style lang="scss">
.b-shop-load {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: #ffffff;
z-index: 10000;
.content{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
}
.Prompt-Text {
margin-top: 34rpx;
color: #999999;
font-size: 28rpx;
}
}
</style>

388
components/b-xbk-sku-popup/b-xbk-sku-popup.vue Normal file
View File

@ -0,0 +1,388 @@
<template>
<view class="b-rx-sku-popup">
<u-popup :show="show" @close="show = false" round="20" closeable zIndex="20080">
<view class="commodity-sku">
<!-- 商品图 -->
<view class="commodity-sku-Inofr">
<!-- 商品图片 -->
<view class="commodity-sku-Inofr-cover">
<image class="img" :src="skuinfor['product_img']" mode="widthFix"></image>
</view>
<view class="commodity-sku-Inofr-commodity">
<view class="commodity-sku-Inofr-commodity-title">
{{skuinfor['product_name']}}
</view>
<view class="commodity-sku-Inofr-commodity-sku" v-if="skuinfor['sku']">
<view class="commodity-sku-Inofr-commodity-sku-text">
{{skuinfor['sku']}}
</view>
<view class="commodity-sku-Inofr-commodity-sku-Price">
<text class="text1">￥</text>
<text class="text2">{{RetainDecimalPoint(skuinfor['adj_pay'] * skuinfor['num'])}}</text>
</view>
</view>
</view>
</view>
<!-- 规格 -->
<view class="commodity-sku-option" v-if="skuinfor['details']">
<template v-for="(item,index) in skuinfor['details']['optional']">
<view class="commodity-sku-option-item" :key="index">
<view class="commodity-sku-option-item-label">
{{item['name']}}
</view>
<view class="commodity-sku-option-item-values">
<template v-for="(item2,index2) in item['sku_infos']">
<view @tap="skuClick(index,index2)"
:class="{'commodity-sku-option-item-values-activation' :item2['checked']}"
class="commodity-sku-option-item-values-item" :key="index2">
{{item2['name']}}
</view>
</template>
</view>
</view>
</template>
</view>
<view class="commodity-sku-Infor">
<view class="commodity-sku-Infor-left">
<view class="commodity-sku-Infor-left-cart">
<image class="img" :src="qnyurl('reduce.png','xbk')" mode="" @tap="reducequantity()"></image>
<view class="num">
{{skuinfor['num']}}
</view>
<image class="img" :src="qnyurl('add.png','xbk')" mode="" @tap="Addquantity()"></image>
</view>
</view>
<!-- Addcommodity方法中不可设置形参,因为点击事件默认第一个参数就是点击事件的各种参数并不是形参中所设置的默认值 -->
<!-- 所以在点击时手动传入skuinfor参数 -->
<view class="commodity-sku-Infor-right" @tap="Addcommodity">
加入购物车
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import {
mapGetters
} from 'vuex';
import mixin from '@/static/js/mixin/mixin.js'
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js'
export default {
mixins: [mixin,restaurantmixins],
name: "b-rx-sku-popup",
data() {
return {
// 弹框显示/隐藏
show: false,
// 弹框商品详情
skuinfor: {},
// 规格文字
skutext: '',
};
},
computed: {
...mapGetters({
GetcommodityInfor: 'shopping/GetcommodityInfor'
})
},
watch: {
// 计算属性获取到的弹框详情数据不可直接修改,所以重新赋值便于修改数量
GetcommodityInfor(value) {
this['skuinfor'] = JSON.parse(JSON.stringify(value));
console.log(this['skuinfor'],'skuinfor')
this.skuInit();
// 设置默认规格
// var cmr = this.screensku_xbk();
// // this['skuinfor']['sku_code'] = cmr['sku_code'];
// this['skuinfor']['sku'] = cmr['sku'];
// this['skuinfor']['pay'] = cmr['pay'];
// // this['skuinfor']['adj_pay'] = this['skuinfor']['pay_price'];
// this['skuinfor']['add_price'] = cmr['add_price'];
}
},
methods: {
/**
* @添加数量
* */
Addquantity(num = 1) {
this['skuinfor']['num'] += num;
},
/**
* @选择规格数量减
* */
reducequantity(num = 1) {
if (this['skuinfor']['num'] == 1) return;
this['skuinfor']['num'] -= num;
},
/**
* @加入购物车
* */
Addcommodity() {
uni.$u.debounce(() => {
console.log(this['skuinfor'],'加入购物车商品');
this.ADD_CART({
commodity: this['skuinfor'],
quantity: this['skuinfor']['num']
}).then(() => {
this['show'] = false;
});
}, 800, true)
},
skuInit(){
let add_price = 0;
let r = [];
let sku_code = [];
// JSON.parse与JSON.stringify方法深拷贝，将双向数据解除
// RetainDecimalPoint方法转为正常价格（后台返回的是按照 分 划分的）
// let pay = +this.RetainDecimalPoint(JSON.parse(JSON.stringify(this['skuinfor']['pay_price'])));
let pay = +JSON.parse(JSON.stringify(this['skuinfor']['pay_price']));
// let t = this['skuinfor']['details']['optional'];
let t = this['skuinfor']['details']['optional'];
for (let i = 0; i < t['length']; i++) {
let item = t[i];
r.push(...item['sku_infos']);
};
let newarr = r.filter(item => {
if (item['checked']) {
if (item?.price) {
add_price = item['price'] * 100;
// 商品的原价与配料价格相加
pay += add_price
};
return item;
}
}).map(item => item['name']);
// console.log(newarr,'newarr');
let str = [];
for (let i = 0; i < this['skuinfor']['details']['optional']['length']; i++) {
let t = this['skuinfor']['details']['optional'];
str.push(`${t[i]['id']}_${t[i]['sku_infos'].find(item=>item['checked'])['id']}`)
};
console.log(newarr,str);
// 设置展示规格文字
this['skuinfor']['sku'] = newarr.join('/');
// 设置规格code
this['skuinfor']['sku_code'] = str.join(',');
this['skuinfor']['add_price'] = add_price;
this['skuinfor']['adj_pay'] = (+this['skuinfor']['pay_price']) + (+add_price);
console.log(this['skuinfor'],'星巴克筛选');
},
/**
* @规格选择
* */
skuClick(index1, index2) {
// 将当前点击的类型规格高亮状态改变,其他的设置为不高亮
this['skuinfor']['details']['optional'][index1]['sku_infos'].map((item, index) => {
if (index2 == index) {
item['checked'] = true;
} else {
item['checked'] = false;
}
});
this.skuInit();
// var cmr = this.screensku_xbk();
// console.log(cmr,'cmr');
// // this['skuinfor']['sku_code'] = cmr['sku_code'];
// this['skuinfor']['sku'] = cmr['sku'];
// this['skuinfor']['pay'] = cmr['pay'];
// // this['skuinfor']['adj_pay'] = this['skuinfor']['pay_price'];
// this['skuinfor']['add_price'] = cmr['add_price'];
},
}
}
</script>
<style lang="scss">
// 规格弹框样式
.commodity-sku {
&-Inofr {
border-bottom: 1rpx dashed #cccccc;
padding: 32rpx;
display: flex;
justify-content: space-between;
&-cover {
width: 176rpx;
height: 176rpx;
border-radius: 10rpx;
overflow: hidden;
.img {
width: 100%;
height: 100%;
}
}
&-commodity {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
&-title {
line-height: 70rpx;
}
&-sku {
display: flex;
justify-content: space-between;
align-items: center;
&-text {
color: #666666;
font-size: 25rpx;
}
&-Price {
color: #DE302D;
.text1 {
font-size: 26rpx;
}
.text2 {
font-size: 35rpx;
}
}
}
}
}
// &-cover {
// // height: 560rpx;
// height: auto;
// position: relative;
// // &-title {
// // color: #333333;
// // font-size: 34rpx;
// // }
// // &-name {
// // position: absolute;
// // left: 0;
// // bottom: 0;
// // width: 100%;
// // display: flex;
// // justify-content: space-between;
// // align-items: center;
// // color: #ffffff;
// // padding: 10rpx 32rpx;
// // background-color: rgba(255, 255, 255, 0.5);
// // &-cart {
// // flex: 1;
// // height: 60rpx;
// // display: flex;
// // justify-content: flex-end;
// // font-size: 36rpx;
// // align-items: center;
// // .num {
// // max-width: 100rpx;
// // min-width: 100rpx;
// // text-align: center;
// // }
// // .img {
// // width: 42rpx;
// // height: 42rpx;
// // }
// // }
// // }
// }
&-option {
padding: 32rpx;
&-item {
width: 100%;
font-size: 26rpx;
margin-bottom: 15rpx;
&-label {
font-weight: 800;
min-width: 112rpx;
height: 100%;
color: #333333;
line-height: 100rpx;
}
&-values {
width: 100%;
display: flex;
justify-content: flex-start;
&-activation {
background: #ececec !important;
border: 1rpx solid #F7F8FA;
}
&-item {
min-width: 112rpx;
height: 100%;
line-height: 70rpx;
border-radius: 6rpx;
margin-bottom: 20rpx;
background: #ffffff;
text-align: center;
margin-right: 15rpx;
border: 1rpx solid transparent;
}
}
}
}
&-Infor {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx;
border-top: 1rpx solid rgba(102, 102, 102, 0.1);
&-left {
&-cart {
flex: 1;
height: 60rpx;
display: flex;
justify-content: flex-end;
font-size: 36rpx;
align-items: center;
.num {
max-width: 100rpx;
min-width: 100rpx;
text-align: center;
}
.img {
width: 42rpx;
height: 42rpx;
}
}
}
&-right {
width: 254rpx;
height: 86rpx;
background: #00AF66;
box-shadow: 0 6rpx 8rpx 0 rgba(74, 111, 231, 0.2300);
border-radius: 43rpx;
text-align: center;
line-height: 86rpx;
color: #ffffff;
}
}
}
</style>

185
components/bGoods/bGoods.vue Normal file
View File

@ -0,0 +1,185 @@
<template>
<view>
<view class="flex flex-space-between" style="margin-bottom: 30rpx;">
<view class="flex">
<view class="" style="margin-right: 20rpx;">
<u-image width="180rpx" height="180rpx" radius="10rpx" :src="detail.goodsImg"></u-image>
</view>
<view class="" style="align-items: bottom;">
<view class="" :style="'height:' +(types == 0?'100':'80')+'rpx;'">
<u-text color="#333333" size="28rpx" lines="2" :text="detail.goodsTitle"></u-text>
</view>
<view class="fy">
<view class="je-class">
<text style="font-size: 20rpx;">￥</text><text>{{detail.price/100}}</text>
</view>
<view class="">
<text>分佣比</text><text style="color:#E71111">{{detail.commission_point}}</text><text>%</text>
</view>
<view class="lit-999">
<text>销量：{{detail.sales}}</text>
</view>
<view class="lit-999" v-if="detail['is_sync'] == 1 && detail['is_sync_status'] == 1">
<text>库存：{{detail['stock']}}</text>
</view>
<view class="lit-999" v-if="detail['is_sync'] == 1 && detail['is_sync_status'] == 1">
<text>阿里销量：{{detail['ali_sales']}}</text>
</view>
</view>
</view>
</view>
<view class="flex" style="align-items: center;margin-left: 20rpx;">
<view class="" v-if="types == 0">
<view class="check-btn" @click="checkThis2">
选择
</view>
</view>
<view class="" v-if="types == 1">
<!-- 添加阿里库存 -->
<view v-if="detail['is_sync'] == 1 && detail['is_sync_status'] == 1" class="Add-stock" @click="show = true">
增加库存
</view>
<block v-if="detail.status == 2">
</block>
<block v-if="detail.status == 4">
<view class="check-btn" @click="checkThis(0)">
上架
</view>
</block>
<block v-if="detail.status == 3">
<view class="check-btn check-btn-red" @click="checkThis(1)">
编辑
</view>
<u-gap height="20rpx"></u-gap>
<view class="check-btn" @click="checkThis(2)">
重新提交审核
</view>
</block>
<block v-if="detail.status == 1">
<view class="check-btn" @click="checkThis(3)">
下架
</view>
</block>
<block v-if="detail.status == 0">
<view class="check-btn check-btn-red" @click="checkThis(1)">
编辑
</view>
<u-gap height="20rpx"></u-gap>
<view class="check-btn" @click="checkThis(0)">
重新上架
</view>
</block>
</view>
</view>
</view>
<!-- 添加库存弹框 -->
<u-modal :show="show" title="添加库存" showCancelButton @confirm="confirm" @close="show = false" @cancel="show = false">
<view class="slot-content">
<u-input placeholder="请输入内容" border="surround" v-model="value"></u-input>
</view>
</u-modal>
</view>
</template>
<script>
export default {
name: "bGoods",
props: {
types: {
type: Number,
default: 0
},
detail: {
type: Object,
default: null
}
},
data() {
return {
show: false,
value:'',
};
},
methods: {
checkThis(type) {
// 0上架 1编辑 2提交审核 3下架
let title = type == 0?'上架成功':type == 3?'下架成功':'';
this.$emit('checkThis', {
type: type,
goods_id: this.detail.goods_id
},()=>{
console.log('提示');
uni.showToast({
title,
})
})
},
checkThis2() {
// 0上架 1编辑 2提交审核 3下架
this.$emit('checkThis', this.detail)
},
// 增加库存点击确认按钮
confirm(){
uni.showLoading({
title: '加载中...'
});
this.$store.dispatch('shop/itemInventoryModify',{
g_id:this['detail']['goods_id'],
stock:+this['value']
}).then(res => {
uni.showToast({
title:'设置成功'
});
this['show'] = false;
this['value'] = '';
uni.hideLoading();
})
}
// 上下架的那个接口不变
// 增加库存 /store.goods/itemInventoryModify 传g_id:商品id;stock:增加的库存
// 高德订单列表 /store.order/gdOrderList 传date:日期(时间格式);item_title:商品名称;commission_type:结算类型(0:未;1:已)
// 高德订单详情 /store.order/gdOrderInfo 传 order_no
}
}
</script>
<style>
.je-class {
font-size: 30rpx;
color: #E71111;
}
.fy {
font-size: 24rpx;
color: #666666;
}
.check-btn {
width: 170rpx;
background: linear-gradient(45deg, #FFAD02, #FD8F3B);
text-align: center;
color: #fff;
font-size: 24rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 20rpx;
}
.check-btn-red {
background: #E71111;
}
.Add-stock {
height: 60rpx;
background: #DE0D0D;
color: #ffff;
font-size: 24rpx;
text-align: center;
line-height: 60rpx;
border-radius: 20rpx;
margin-bottom: 15rpx;
}
</style>

300
components/bro-Album/bro-Album.vue Normal file
View File

@ -0,0 +1,300 @@
<template>
<view class="K-Album-Content">
<template v-for="(item,index) in lists">
<view :key='index' class="Album-Img-Item" :style="{
'width': `${width}rpx`,
'height': `${height}rpx`,
'margin-right': MarginDistance(index+1),
'margin-bottom': Margin,
'border-radius':`${radius}rpx`
}">
<!-- 图片 -->
<view v-if="item['filetype'] == 'image'" class="Album-Img-Item-Img" @tap.stop="previewImage(index)">
<image class="img" :src="item['url']" mode="aspectFill"></image>
<!-- <u--image :showLoading="true" :src="item['url']"></u--image> -->
</view>
<view class="Album-Img-Item-video" v-if="item['filetype'] == 'video'">
<!-- 视频 -->
<!-- <video :id="`Video${index}`" :src="item['url']"></video> -->
<!-- 视频封面 -->
<image class="img" :src="item['video_cover']" mode="aspectFill"></image>
</view>
<!-- 删除元素 -->
<view v-if="deletable" class="Album-Img-Item-deletable" @click="deleteBtn(index)">
<text class="icon iconfont icon-shanchu Album-Img-Item-deletable-icon"></text>
<!-- <image class="Album-Img-Item-deletable-icon" src="/static/image/nolineimage/deletable-icon.png"
mode=""></image> -->
</view>
</view>
</template>
<view class="append" @click="AddImages" v-if="lists.length < (Max-0) && isadd" :style="{
'width': `${width}rpx`,
'height': `${height}rpx`,
'margin-right': MarginDistance(lists.length+1),
'margin-bottom': Margin,
'border-radius':`${radius}rpx`
}">
<!-- <image class="img" src="/static/image/add.png" mode=""></image> -->
<view class="freight-row-up-img-el">
+
</view>
</view>
</view>
</template>
<script>
import props from './props.js';
/**
* Album 图片展示/上传组件
*
* @width 展示图片/视频宽度
* @height 展示图片/视频高度
* @list 展示数组
* @deletable 是否显示删除按钮
* @WAdaptive 展示宽度是否自适应,当该属性为true时width无效,会根据所给左间距来动态计算每个块的宽度
* @rightM 左间距(xx)
* @bottoM 下间距(xx)
* @Max 做多展示几张
* @radius 圆角
*/
export default {
mixins: [props],
name: "K-Album",
data() {
return {
lists: [],
Margin: 0,
linenumber: 0,
index: -1,
videotype: ['wmv', 'asf', 'asx', 'rm', 'rmvb', 'mp4', '3gp', 'mov', 'm4v', 'avi', 'dat', 'mkv', 'flv',
'vob'
],
imgtype: ['bmp', 'jpg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd',
'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'WMF', 'webp', 'avif', 'apng'
]
};
},
async onReady() {
let Element = await this.getElSize.call(this, 'K-Album-Content');
// 单个元素宽度转为px
let w = uni.upx2px(this['width']);
// 每行几个
let l = parseInt(Element['width'] / w);
// 父元素宽度 - (每行几个 * 单个元素宽度) / 除最边元素以外的元素数量（因为最边元素不需要外边距）
let Margin = ((Element['width'] - (w * l)) / (l - 1)) / (uni.upx2px(100) / 100) + 'rpx';
this['linenumber'] = l;
this['Margin'] = Margin;
},
computed: {
// Style() {
// this['index'] += 1;
// console.log(this['index'], '12312');
// return `width:${this['width']}rpx;height:${this['height']}rpx;margin-right:${((this['index'] + 1) % this['linenumber'] == 0) ? '' : this['Margin']}`
// },
},
mounted() {
console.log(this,'this');
// 加载时判断展示数组是否存在元素
if (this['list']['length'] > 0) {
this['lists'] = this.DataReset(this['list']);
console.log(this.DataReset(this['list']), '列表');
}
},
methods: {
/**
* @获取元素高度
* */
getElSize(em) {
return new Promise((res, rej) => {
uni.createSelectorQuery().in(this).select(`.${em}`)
.boundingClientRect(rect => {
res(rect);
})
.exec();
});
},
/**
* @删除按钮
* */
async deleteBtn(i) {
if (!this['deletable']) return;
this['lists'].splice(i, 1);
this.$emit('UpImg', this['lists'])
},
/**
* @检测类型
* */
detectionType(file) {
},
MarginDistance(index) {
return (index % this['linenumber'] == 0) ? '' : this['Margin']
},
/**
* @数据格式重置
* */
DataReset(d) {
let list = d.map(item => {
if (Object.prototype.toString.call(item) == '[object String]') {
if (!!item) {
return {
url: item,
filetype: this.detectionType(item)
}
}
} else if (Object.prototype.toString.call(item) == '[object Object]') {
return {
url: item[this['keyName']] || item['path'],
filetype: this.detectionType(item[this['keyName']] || item['path']),
video_cover: item['video_cover']
}
}
});
// console.log(list);
return list;
},
/**
* @添加图片
* */
AddImages() {
console.log(this.tool.uploadFile);
this.tool.uploadFile().then(data => {
let i = this.DataReset(data);
this['lists'].push(...i);
this.$emit('UpImg', this['lists'])
})
},
/**
* @预览
* */
previewImage(current) {
let tempFilePaths = this['lists'].map(item => {
return item['url']
})
uni.previewImage({
current,
urls: tempFilePaths,
longPressActions: {
// itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: function(err) {
// console.log(err.errMsg);
}
}
});
},
detectionType(url) {
let xj = url.substring(url.lastIndexOf('.') + 1);
if (this.imgtype.indexOf(xj) !== -1) {
return 'image';
} else if (this.videotype.indexOf(xj) !== -1) {
return 'video'
}
}
}
}
</script>
<style lang="scss">
.K-Album-Content {
display: flex;
flex-wrap: wrap;
.Album-Img-Item {
// background-color: red;
overflow: hidden;
position: relative;
&-Img {
width: 100%;
height: 100%;
.img {
width: 100%;
height: 100%;
}
}
&-video {
width: 100%;
height: 100%;
.img {
width: 100%;
height: 100%;
}
}
&-deletable {
width: 30rpx;
height: 30rpx;
position: absolute;
top: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
border-radius: 0 0 0 15rpx;
z-index: 100;
text-align: center;
line-height: 30rpx;
&-icon {
width: 100%;
height: 100%;
font-size: 20rpx !important;
color: #ffffff;
}
}
}
}
.append {
.img {
width: 100%;
height: 100%;
}
}
@font-face {
font-family: "iconfont";
/* Project id 2903098 */
src: url('https://at.alicdn.com/t/font_2903098_lk7t0kvsx3k.woff2?t=1654136213785') format('woff2'),
url('https://at.alicdn.com/t/font_2903098_lk7t0kvsx3k.woff?t=1654136213785') format('woff'),
url('https://at.alicdn.com/t/font_2903098_lk7t0kvsx3k.ttf?t=1654136213785') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shanchu:before {
content: "\e6f0";
}
.freight-row-up-img-el{
width: 88rpx;
height: 88rpx;
background-color: #DEDEDE;
margin-top: 20rpx;
color: #999999;
text-align: center;
line-height: 80rpx;
font-size: 80rpx;
}
</style>

53
components/bro-Album/props.js Normal file
View File

@ -0,0 +1,53 @@
export default {
props: {
width: {
type: Number | String,
default: 88,
},
height: {
type: Number | String,
default: 88,
},
list: {
type: Array,
default: () => {
return []
},
},
deletable: {
type: Boolean,
default: true
},
widthAdaptive: {
type: Boolean,
default: false,
},
Max: {
type: Number | String,
default: 9
},
rightM: {
type: Number | String,
default: 15,
},
bottoM: {
type: Number | String,
default: 15
},
radius: {
type: Number | String,
default: 10,
},
keyName:{
type:String,
default:'url',
},
// 是否显示添加
isadd:{
type:Boolean,
default:true,
}
}
}

118
components/card-checked/card-checked.vue Normal file
View File

@ -0,0 +1,118 @@
<template>
<view>
<view class="flbtn" style="padding-top: 20rpx;">
<view class="flex">
<u-checkbox-group @change="checkboxChange">
<u-checkbox checked activeColor="#FF7700" shape="circle" v-for="(item, index) in checkboxList1"
:key="index" :label="item.name" :name="item.name">
</u-checkbox>
</u-checkbox-group>
<view class="lit-666 bold" style="padding-top: 4rpx;">
可用消费补贴卡余额抵扣<text style="color: #EB4141;">￥{{newPrice/100}}</text>
</view>
</view>
<view class="lit-666" style="font-weight: 400;padding-top: 4rpx;">
余额：￥{{amount/100}}
</view>
</view>
<u-gap height="10rpx"></u-gap>
<view class="lit-666" style="padding-left: 44rpx;" v-if="amount < newPrice">
您余额不足，实际可抵扣<text style="color: #EB4141;">￥{{amount <= 0?'0':(amount) / 100}}</text>
</view>
</view>
</template>
<script>
import {conWalletInfoAPI} from '@/request/pay/index.js'
export default {
name: "card-checked",
props: {
price: {
type: [String, Number],
default: 0
},
// percent:{
// type:[Number,String],
// default:0
// },
// store_id:{
// type:[String,Number],
// default:0
// }
},
data() {
return {
checkboxList1: [{
name: '',
}],
checked: '',
amount: -1,
newPrice: 0,
// price:0,
// percent:0
};
},
watch: {
price: {
immediate: true,
async handler(newVul, oldVul) {
console.log('*-*-*-*')
if(this.amount <= -1){
await this.getWallet()
}
// console.log(newVul,this.amount, '执行监听器');
// console.log(newVul, 'new')
this.newPrice = Math.floor(newVul);
let _p = (this.newPrice > this.amount ? this.amount : this.newPrice) /
100 //this['amount'] * this['percent'];
this.$emit('GitData', _p)
// this.price = Math.floor(val*this.percent)
// console.log(val,'价格')
}
},
},
// mounted() {
// // console.log(this['price'], 'pricepriceprice');
// // this.getWallet();
// // this.getPercent();
// },
methods: {
async getWallet() {
let self = this;
// console.log('执行');
let _m = await conWalletInfoAPI();
console.log(_m,'111111111')
self['amount'] = _m['data']['amount'] ;
// self['amount'] = 10;
},
// getPercent(){
// this.$store.dispatch('api/storeDeductionProp',{
// store_id : this.store_id
// }).then(res => {
// this.percent = res
// })
// },
checkboxChange(e) {
console.log(e,'123');
this.$emit('checked', (e.length > 0 ? true : false))
// return this.checked
},
GetP() {
console.log(this.newPrice, 'new price')
let _p = (this.newPrice > this.amount ? this.amount : this.newPrice) /
100 //this['amount'] * this['percent'];
// console.log(_p,'p')
return _p;
}
}
}
</script>
<style>
</style>

57
components/cardstyle/cardstyle.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<view>
<view class="flbtn" style="background-color: #fff;">
<view class="bd-color" :style="leftStyle">
</view>
<view class="center" :style="'padding-top: '+ (width / 2 -1 ) +'rpx;'">
<u-line dashed></u-line>
</view>
<view class="bd-color" :style="rightStyle">
</view>
</view>
</view>
</template>
<script>
export default {
name:"card_style",
props:{
width:{
type:Number,
default:40
},
bgColor:{
type:String,
default:'#f5f5f5'
}
},
computed: {
leftStyle(){
return 'background:'+ this.bgColor+';width: '+ this.width/2 +'rpx;height: '+ this.width+'rpx;border-radius: 0 '+ this.width/2+'rpx '+ this.width/2 +'rpx 0;'
},
rightStyle(){
return 'background:'+ this.bgColor+';width: '+ this.width/2 +'rpx;height: '+ this.width+'rpx;border-radius: '+ this.width/2+'rpx 0 0 '+ this.width/2 +'rpx;'
}
},
data() {
return {
};
}
}
</script>
<style>
.center{
width: 100%;
/* height: 40rpx; */
/* padding: 19rpx 5%; */
}
.right-box{
border-radius: 20rpx 0 0 20rpx;
background-color: #ededed;
}
</style>

1160
components/city.js Normal file
View File

File diff suppressed because it is too large Load Diff

112
components/comment/comment.vue Normal file
View File

@ -0,0 +1,112 @@
<template>
<view>
<u-cell-group @click="goInfo" :border="false" customStyle="padding:0">
<u-cell :icon="commentData.head_img" :title="commentData.nickname"
titleStyle="margin-left:10rpx;font-size:22rpx"
iconStyle="width:114rpx;height:114rpx;border-radius: 50%;" :border="false" center>
<view slot="value" style="font-size: 22rpx;">
{{commentData.create_time}}
</view>
<view slot="label">
<u-rate size="22rpx" readonly activeColor="#000" :value="commentData.stars" inactiveColor="#000"></u-rate>
</view>
</u-cell>
</u-cell-group>
<view @click="goInfo" class="mt-30">
<rich-text style="font-size: 22rpx;color: #333333;"
:nodes="commentData.contents">
</rich-text>
</view>
<u-gap height="10"></u-gap>
<view class="mt-30" style="position: relative;" @click="showImage">
<view class="flex flex-left" style="flex-wrap: wrap;">
<view class="com-img" :style="index1==2?'margin-right:0':''" v-for="(item1,index1) in commentData.store_comment_img" :key="index1" v-if="showAllPic || index1 < 3">
<u-image width="100%" height="150rpx" :src="item1.img_url">
</u-image>
</view>
</view>
<view v-if="!showAllPic && commentData.store_comment_img.length> 3" class="qp">
{{commentData.store_comment_img.length}}
</view>
</view>
</view>
</template>
<script>
export default {
name:"comment",
props:{
showAllPic:{
type:Boolean,
default:false
},
commentData:{
type:Object,
default:null
}
},
data() {
return {
};
},
methods:{
goInfo(){
uni.navigateTo({
url:'/pages/comments/comment-info?comment_id='+this.commentData.comment_id,
fail(e) {
console.log(e,'err')
}
})
},
showImage(){
let _this = this
let urls = []
for(let i= 0;i<_this.commentData.store_comment_img.length;i++){
urls.push(_this.commentData.store_comment_img[i].img_url)
}
// console.log(urls)
// _this.commentData.store_comment_img.forEacn(v=>{
// urls.push(v.img_url)
// })
uni.previewImage({
urls:urls,
longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: function(err) {
console.log(err.errMsg);
}
}
});
}
}
}
</script>
<style>
.com-img{
width: 30%;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.com-img.end{
margin-right: 0;
}
.qp {
position: absolute;
right: 10rpx;
bottom: 20rpx;
font-size: 20rpx;
background-color: #FFFFFF;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
border-bottom-left-radius: 20rpx;
padding: 0rpx 20rpx;
}
</style>

76
components/countdown/countdown.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<view v-if="OrderStatus == 0">
{{wait_for}}
</view>
</template>
<script>
export default {
props: {
item: {
type: Object,
default: () => {}
},
status:{
type:[Number,String],
default:0
},
createtime:{
type:String,
default:'2022-11-11 00:00:00'
}
},
data() {
return {
wait_for: ''
}
},
mounted() {
this.tiem(this['OrderStatus'],this['Ordercreatetime']);
},
computed:{
OrderStatus(){
return this['status']
},
Ordercreatetime(){
return this['createtime']
}
},
methods: {
// 待支付倒计时
/**
* @param {Number} status 订单的状态
* @param {Number} createtime 下单时间
*/
tiem() {
console.log(this['OrderStatus'],'状态');
if (this['OrderStatus'] != 0) return;
// 多久之后过期之后的时间
let date = new Date(this['Ordercreatetime'].replace(/-/g, "/"));
date.setMinutes(date.getMinutes() + 30);
this['countDown'] = setTimeout(() => {
// 最终停止时间时间戳
let end = date.getTime();
// 当前时间时间戳
let start = new Date().getTime();
let x = new Date(end - start);
console.log(end - start, '执行2');
if ((end - start) <= 0) {
this.$emit('end')
// this['status'] = 5;
return;
};
this.tiem(this['OrderStatus'], this['Ordercreatetime'].replace(/-/g, "/"))
let m = x.getMinutes();
m = m > 9 ? m : `0${m}`;
let s = x.getSeconds();
s = s > 9 ? s : `0${s}`;
this['wait_for'] = `${m}:${s}`;
}, 1000)
},
}
}
</script>
<style>
</style>

50
components/customHeader/customHeader.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<view>
<view class="status-line" :style="'height:' + lineHeight +';'">
</view>
<view class="status-line" :style="'height:' + navigateHeight +';'">
<view @click="goBack" class="flex" :style="'height:' + navigateHeight +';align-item:center;padding:0 20rpx'">
<u-icon name="arrow-left" ></u-icon>
</view>
</view>
</view>
</template>
<script>
export default {
name:"customHeader",
data() {
return {
navigateHeight:0,
lineHeight:0,
};
},
methods:{
goBack(){
this.$emit('goBack')
}
},
mounted() {
const systemInfo = uni.getSystemInfoSync();
// px转换到rpx的比例
let pxToRpxScale = 750 / systemInfo.windowWidth;
let systems = {
ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
navigationHeight: 44 * pxToRpxScale, // 导航栏的高度
ktxWindowWidth: systemInfo.windowWidth * pxToRpxScale, // window的宽度
ktxWindowHeight: systemInfo.windowHeight * pxToRpxScale, // window的高度
ktxScreentHeight: systemInfo.screenHeight * pxToRpxScale // 屏幕的高度
}
// 底部tabBar的高度
systems.tabBarHeight = systems.ktxScreentHeight - systems.ktxStatusHeight - systems.navigationHeight - systems
.ktxWindowHeight // 底部tabBar的高度
this.lineHeight = systems.ktxStatusHeight + 'rpx';
this.navigateHeight = systems.navigationHeight +'rpx';
},
}
</script>
<style>
</style>

200
components/deduction/deduction.vue Normal file
View File

@ -0,0 +1,200 @@
<template>
<view class="Deduction" @tap="IsDeduction = !IsDeduction">
<view style="display: flex;justify-content:space-between;align-items: center;">
<view v-show="!IsDeduction" class="inactive"></view>
<view v-show="IsDeduction" class="active">
<image style="width: 100%;height: 100%;" src="https://img.agrimedia.cn/chwl/v2/xuanzyong.png"></image>
</view>
<view class="Deduction-Amount">
可用消费补贴卡余额抵扣:<text class="Deduction-Amount-Text">￥{{_amount(CanBeUsed)}}</text>
</view>
<view class="Amount">
账户余额:{{_amount(amount)}}
</view>
</view>
<view class="Amount-Running-Low" v-if="notEnough">
您余额不足，实际可抵扣<text class="Amount-Running-Low-Text">￥{{_amount(Deduction_Amount)}}</text>
</view>
</view>
</template>
<script>
/**
* 若是传入的matrixing为true则会按照抵扣比例的计算方式计算抵扣价格
* <deduction :price="v['price'] * v['num']" matrixing :DeductionAmount="v['deduction_prop']"></deduction>
* */
import {
conWalletInfoAPI
} from '@/request/pay/index.js';
import mixin from '@/static/js/mixin/mixin.js'
export default {
name: "deduction",
mixins: [mixin],
props: {
// 售价
price: {
type: [String, Number],
default: 0,
},
// 进价
buyingPrice: {
type: [String, Number],
default: false
},
// 抵扣比例
DeductionAmount: {
type: [String, Number],
default: 0,
}
},
data() {
return {
// 用户抵扣余额
amount: -1,
// 是否抵扣
IsDeduction: true,
// 最大抵扣金额
CanBeUsed: 0,
// 实际抵扣金额
Deduction_Amount: 0,
// 余额是否不足
notEnough: false
};
},
computed: {
ax() {
return {
price: this['price'],
IsDeduction: this['IsDeduction'],
buyingPrice: this['buyingPrice'],
DeductionAmount: this['DeductionAmount']
}
}
},
watch: {
ax:{
deep:true,
immediate:true,
async handler(val){
// 使用deep属性之后,因为请求用户数据为异步操作所以在执行顺序上会有一定差异,所以在此处判断使用async来达到请求到用户余额信息后再经行计算
if(this['amount'] == -1){
let conWalletInfo = await conWalletInfoAPI();
this['amount'] = conWalletInfo['data']['amount']
// this['amount'] = 600
};
// 切换时会导致继续从上一次扣除过的金额继续扣除,并不会将上一次扣除过的金额重新加回来,
this['amount'] += Number(this['Deduction_Amount']);
console.log(val,'监听改变');
// 得到利润
const profit = this['price'] - this['buyingPrice'];
// 计算最大抵扣金额
this['CanBeUsed'] = Math.trunc(profit * (this['DeductionAmount'] / 100));
if (val['IsDeduction']) {
console.log(this['amount'],this['CanBeUsed']);
// 余额足够抵扣
if(this['amount'] >= this['CanBeUsed']){
console.log('余额足够抵扣');
// 余额减去最大抵扣金额
this['amount'] -= this['CanBeUsed'];
// 实际抵扣金额也设置为最大抵扣金额
this['Deduction_Amount'] = this['CanBeUsed'];
this['notEnough'] = false;
}else{
console.log('余额不足抵扣');
this.count();
// 显示余额不足提示
this['notEnough'] = true;
}
} else {
this['amount'] += Number(this['Deduction_Amount']);
this['Deduction_Amount'] = 0;
this['notEnough'] = false;
};
const _amount = this['amount'],
_Deduction_Amount = this['Deduction_Amount'],
_price = this['price'] - this['Deduction_Amount'];
this.$emit('change', {
// 余额
_amount,
// 实际抵扣
_Deduction_Amount,
// 实际支付价格
_price,
// 状态
status: val['IsDeduction']
})
}
},
},
methods: {
count() {
this['notEnough'] = true;
this['Deduction_Amount'] = this['amount'];
this['amount'] = 0;
}
}
}
</script>
<style lang="scss">
.Deduction {
width: 100%;
background-color: #FFFFFF;
border-radius: 15rpx;
padding: 32rpx;
.Deduction-Amount {
font-weight: bold;
flex: 1;
margin-left: 15rpx;
}
.Amount,
.Deduction-Amount,
.Amount-Running-Low {
font-size: 24rpx;
color: rgba(102, 102, 102, 1);
line-height: 50rpx;
&-Text {
color: #EB4141;
}
}
.Amount-Running-Low {
padding-left: 56rpx;
}
// 未抵扣样式
.inactive,
.active {
width: 40rpx;
height: 40rpx;
min-width: 40rpx;
max-width: 40rpx;
min-height: 40rpx;
max-height: 40rpx;
border-radius: 50%;
}
.inactive {
border: 1rpx solid #c8c9cc;
}
// 抵扣样式
.active {
// background-color: #FF7700;
// position: relative;
color: #FFFFFF;
// .icon-gouxuan{
// content: '√';
// position: absolute;
// left: 50%;
// top: 50%;
// transform: translate(-50% -50%);
// }
}
}
</style>

12545
components/erha-picker/city-data/area.js Normal file
View File

File diff suppressed because it is too large Load Diff

1503
components/erha-picker/city-data/city.js Normal file
View File

File diff suppressed because it is too large Load Diff

139
components/erha-picker/city-data/province.js Normal file
View File

@ -0,0 +1,139 @@
/* eslint-disable */
var provinceData = [{
"label": "北京市",
"value": "11"
},
{
"label": "天津市",
"value": "12"
},
{
"label": "河北省",
"value": "13"
},
{
"label": "山西省",
"value": "14"
},
{
"label": "内蒙古自治区",
"value": "15"
},
{
"label": "辽宁省",
"value": "21"
},
{
"label": "吉林省",
"value": "22"
},
{
"label": "黑龙江省",
"value": "23"
},
{
"label": "上海市",
"value": "31"
},
{
"label": "江苏省",
"value": "32"
},
{
"label": "浙江省",
"value": "33"
},
{
"label": "安徽省",
"value": "34"
},
{
"label": "福建省",
"value": "35"
},
{
"label": "江西省",
"value": "36"
},
{
"label": "山东省",
"value": "37"
},
{
"label": "河南省",
"value": "41"
},
{
"label": "湖北省",
"value": "42"
},
{
"label": "湖南省",
"value": "43"
},
{
"label": "广东省",
"value": "44"
},
{
"label": "广西壮族自治区",
"value": "45"
},
{
"label": "海南省",
"value": "46"
},
{
"label": "重庆市",
"value": "50"
},
{
"label": "四川省",
"value": "51"
},
{
"label": "贵州省",
"value": "52"
},
{
"label": "云南省",
"value": "53"
},
{
"label": "西藏自治区",
"value": "54"
},
{
"label": "陕西省",
"value": "61"
},
{
"label": "甘肃省",
"value": "62"
},
{
"label": "青海省",
"value": "63"
},
{
"label": "宁夏回族自治区",
"value": "64"
},
{
"label": "新疆维吾尔自治区",
"value": "65"
},
{
"label": "台湾",
"value": "66"
},
{
"label": "香港",
"value": "67"
},
{
"label": "澳门",
"value": "68"
}
]
export default provinceData;

3
components/erha-picker/city-data/streets.js Normal file
View File

File diff suppressed because one or more lines are too long

219
components/erha-picker/erha-picker.vue Normal file
View File

@ -0,0 +1,219 @@
<template>
<view class="level-container">
<h1 class="title">选择收货地址</h1>
<ul class="name-list">
<li :class="showIndex==0?'select':''" @click="anewSelect(0)">{{province}}</li>
<li :class="showIndex==1?'select':''" @click="anewSelect(1)" v-if="showIndex>=1">{{city}}</li>
<li :class="showIndex==2?'select':''" @click="anewSelect(2)" v-if="showIndex>=2">{{area}}</li>
<li :class="showIndex==3?'select':''" @click="anewSelect(3)" v-if="showIndex>=3">{{street}}</li>
</ul>
<ul v-if="showIndex==0" class="content" :style="'height:'+ heightCot + 'upx'">
<li @click="selectPro(index,item.label)" v-for="(item,index) in provinceData" :key="item['value']">{{item.label}}</li>
</ul>
<ul v-if="showIndex==1" class="content" :style="'height:'+ heightCot + 'upx'">
<li @click="selectCity(index,item.label)" v-for="(item,index) in cityData" :key="item['value']">{{item.label}}</li>
</ul>
<ul v-if="showIndex==2" class="content" :style="'height:'+ heightCot + 'upx'">
<li @click="selectaArea(index,item.label)" v-for="(item,index) in areaData" :key="item['value']">{{item.label}}</li>
</ul>
<ul v-if="showIndex==3" class="content" :style="'height:'+ heightCot + 'upx'">
<li @click="selectStreet(index,item)" v-for="(item,index) in streetsData" :key="item['value']">{{item}}</li>
</ul>
</view>
</template>
<script>
import provinceData from './city-data/province.js';
import getCity from './city-data/city.js';
import getArea from './city-data/area.js';
import getStreets from './city-data/streets.js';
export default {
data() {
return {
province: "请选择",
city: "请选择",
area: "请选择",
street: "请选择",
cityDataAll: '', // 市的所有數據
getAreaAll: '', // 区的所有数据
getStreetsAll: '', // 街道的所有数据
presentIndex: [],
proIndex: 0,
cityIndex: 0,
areaIndex: 0,
provinceData: '', // 当前展示的省数据
cityData: '', // 当前展示的市数据
areaData: '', //当前展示的区数据
streetsData: '', //当前展示的区数据
showIndex: 0,
heightCot: 0,
bb: ''
}
},
created() {
uni.getSystemInfo({
success: res => {
console.log(res.safeArea.height)
this.heightCot = (res.safeArea.height * 2) / 2
}
})
},
mounted() {
// console.log(provinceData)
this.provinceData = provinceData;
this.cityDataAll = getCity;
this.getAreaAll = getArea;
this.getStreetsAll = getStreets;
console.log(this.provinceData)
// console.log(this.cityDataAll)
// console.log(this.getAreaAll)
// console.log(this.getStreetsAll)
},
methods: {
anewSelect(num) {
switch (num) {
case 0:
this.showIndex = 0;
this.areaData = [];
this.streetsData = [];
this.city = '请选择';
this.area = '请选择';
this.street = '请选择'
break;
case 1:
this.showIndex = 1;
this.areaData = [];
this.streetsData = [];
this.area = '请选择';
this.street = '请选择'
break;
case 2:
this.showIndex = 2;
this.streetsData = [];
this.street = '请选择'
break;
case 3:
console.log(11111);
break;
}
},
selectPro(index, label) {
console.log(index)
const {
cityDataAll
} = this;
this.proIndex = index; // 当前省的下标
this.province = label;
this.cityData = cityDataAll[index];
this.showIndex = 1;
},
selectCity(index, label) {
const {
proIndex
} = this;
// console.log(this.getAreaAll)
this.city = label;
this.cityIndex = index; // 当前市的下标
this.areaData = this.getAreaAll[proIndex][index];
this.showIndex = 2;
},
selectaArea(index, label) {
const {
proIndex,
cityIndex
} = this;
this.area = label;
this.showIndex = 3;
console.log(index)
console.log(this.getStreetsAll[proIndex][cityIndex])
console.log(this.getStreetsAll[proIndex][cityIndex][index])
this.streetsData = this.getStreetsAll[proIndex][cityIndex][index]
},
selectStreet(index, label) {
this.street = label;
const {
province,
city,
area,
street
} = this;
this.$emit('conceal',{
province,
city,
area,
street
})
// this.showIndex = 4;
}
}
}
</script>
<style lang="less">
ul,li{
list-style: none;
}
.level-container {
width: 100%;
background: #fff;
.select {
color: red;
position: relative;
&::after {
content: '';
width: 40upx;
height: 6upx;
background: red;
position: absolute;
left: 50%;
bottom: -8upx;
margin-left: -20upx;
}
}
li {
font-size: 26upx;
}
.content,
.name-list {
padding: 0 20upx;
}
.title {
font-size: 32upx;
margin: 30upx 20upx;
}
.name-list {
display: flex;
li {
margin-right: 40upx;
padding-bottom: 6upx;
}
}
.content {
margin-top: 20upx;
height: 600upx;
overflow-y: auto;
li {
border-bottom: 1px solid #f1f1f1;
padding: 20upx 0;
}
li:last-child {
border-bototm: none !important;
}
}
}
</style>

43
components/fgTitle/fgTitle.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<view>
<view class="flex flex-center" style="padding: 30rpx 0;background-color: #f1f1f1;">
<view class="">
<u-line margin="20rpx 10rpx" length="100rpx"></u-line>
</view>
<view class="">
<u-text color="#999" :text="title+'·'" wordWrap="break-word"></u-text>
</view>
<view class="">
<u-text color="#31cf55" :bold="true" :text="enTitle"></u-text>
</view>
<view>
<u-line margin="20rpx 10rpx" length="100rpx"></u-line>
</view>
</view>
</view>
</template>
<script>
export default {
name:"fgTitle",
props:{
title:{
type:String,
default:'商品详情'
},
enTitle:{
type:String,
default:"DETAILS"
}
},
data() {
return {
};
}
}
</script>
<style>
</style>

247
components/film-item/film-item.vue Normal file
View File

@ -0,0 +1,247 @@
<!-- 电影列表 -->
<template>
<view class="main" @tap="TofilmDesc(data)">
<view class="main-data" v-if="data.publishStatus == 'WAIT'">{{data.publishDate}}</view>
<view class="main-wrap">
<view class="main-image">
<image :src="data.posterUrl"></image>
</view>
<view class="main-content">
<view class="main-left">
<view class="main-title">{{data.movieName}}</view>
<view class="main-sub">导演：{{data.director}}</view>
<view class="main-role">主演：{{data.cast}}</view>
<view class="main-tag">
<text class="tag" v-if="data.versionType">
{{data.versionType}}
</text>
<text class="tag" v-if="data.movieType">
{{data.movieType}}
</text>
</view>
<view class="main-score" v-if="tabActive == 0">
评分：<text>{{data.grade}}</text>
</view>
<view class="main-score" v-else>
<text>100</text>人想看
</view>
</view>
<view class="main-right" v-if="data.publishStatus == 'HOT'">
<view class="stop" v-if="data.stopSellTime">
停售
</view>
<view class="buy" v-else @tap.stop="buyBill(data)">
购票
</view>
</view>
<view class="main-right" v-else>
<view class="presell">
预售
</view>
<!-- <view class="want">
想看
</view> -->
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "film-item",
props: {
tabActive: {
type: Number,
default: function () {
return 0
}
},
// 电影数据
data: {
type: Object,
default: function () {
return {}
}
},
cinemaData: {
type: Object,
default: function () {
return {}
}
},
// 跳转场次or影院(默认影院)
isPlay: {
type: Boolean,
default: function () {
return false
}
},
},
computed: {
},
methods: {
// 详情
TofilmDesc(data) {
uni.navigateTo({
url: `../../pages/film/filmDesc?filmData=${encodeURIComponent(JSON.stringify(data))}`
})
},
// 购票
buyBill(data) {
// 去场次
if (this.isPlay) {
uni.navigateTo({
url: `../../pages/film/filmPlay?cinemaData=${encodeURIComponent(JSON.stringify(this.cinemaData))}&filmData=${encodeURIComponent(JSON.stringify(data))}`,
})
} else {
// 查影院
uni.navigateTo({
url: `../../pages/film/filmYuan?filmData=${encodeURIComponent(JSON.stringify(data))}`
})
}
}
}
}
</script>
<style lang="scss" scoped>
.main {
margin-bottom: 20rpx;
.main-data {
margin-bottom: 24rpx;
font-size: 26rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
line-height: 40rpx;
}
.main-wrap {
padding: 24rpx;
width: 100%;
height: 260rpx;
background: #FFFFFF;
box-shadow: 0rpx 1rpx 4rpx 0rpx rgba(0,0,0,0.1);
border-radius: 20rpx;
display: flex;
.main-image {
width: 164rpx;
height: 216rpx;
margin-right: 20rpx;
image {
width: 164rpx;
height: 216rpx;
border-radius: 10rpx;
}
}
.main-content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 216rpx;
.main-left {
height: 216rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.main-title {
font-size: 30rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
line-height: 40rpx;
}
.main-sub, .main-role {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 32rpx;
width: 300rpx !important;
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
}
.main-tag {
.tag {
display: inline-block;
border: 2rpx solid #999999;
font-size: 24rpx;
color: #999999;
line-height: 26rpx;
margin-right: 10rpx;
padding: 1rpx 6rpx;
}
}
.main-score {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 32rpx;
text {
color: #FF6D04;
font-weight: 900;
}
}
}
.main-right {
display: flex;
justify-content: space-between;
align-items: end;
width: 170rpx;
height: 216rpx;
flex-wrap: wrap;
.stop {
width: 170rpx;
height: 80rpx;
background: #DEDEDE;
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0,0,0,0.1);
border-radius: 40rpx;
color: #666666;
text-align: center;
line-height: 80rpx;
font-size: 24rpx;
}
.buy {
width: 170rpx;
height: 80rpx;
background: linear-gradient(136deg, #FC4B5C 0%, #FD8D3D 100%);
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0,0,0,0.1);
border-radius: 40rpx;
color: #FFFFFF;
text-align: center;
line-height: 80rpx;
font-size: 24rpx;
}
.presell {
width: 170rpx;
height: 80rpx;
background: linear-gradient(136deg, #9A00FF 0%, #FF6500 100%);
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0,0,0,0.1);
border-radius: 40rpx;
color: #FFFFFF;
text-align: center;
line-height: 80rpx;
font-size: 24rpx;
}
.want {
width: 180rpx;
height: 80rpx;
background: linear-gradient(136deg, #FFD500 0%, #FF6500 100%);
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0,0,0,0.1);
border-radius: 40rpx;
color: #FFFFFF;
text-align: center;
line-height: 80rpx;
font-size: 24rpx;
}
}
}
}
}
</style>

182
components/film-play/film-play.vue Normal file
View File

@ -0,0 +1,182 @@
<template>
<view class="film-list">
<view class="times">
<view class="film-time">
{{filmList.showTime.substring(11, 16)}}
</view>
<view class="film-end">
{{filmList.stopSellTime.substring(11, 16)}}散场
</view>
</view>
<view class="size">
<view class="film-type">
{{filmList.showVersionType}}
</view>
<view class="film-end">
{{filmList.hallName}}
</view>
</view>
<view class="price">
<view class="film-price">
<text class="del-price">￥{{filmList.showPrice}}</text>
<text>￥</text>{{Math.round((parseFloat(filmList.pay_price) - parseFloat(filmList.deduction_price))*100)/100}}
</view>
<view class="film-card">
消费卡补贴：{{filmList.deduction_price}}
</view>
</view>
<!-- <view class="film-buy" @click="buyBill(filmList.showTime)" :class="this.isMoreOneTime(filmList.showTime)? '' : 'dontBuy'"> -->
<view class="film-buy" @click="buyBill(filmList.showTime)">
购票
</view>
</view>
</template>
<script>
import mixin from '@/static/js/mixin/mixin.js';
import film from '@/static/js/mixin/film.js';
export default {
mixins: [mixin, film],
data() {
return {
}
},
props: {
// 场次数据
filmList: {
type: Object,
default: {}
},
// 影片数据
filmData: {
type: Object,
default: {}
},
// 影院ID
cinemaData: {
type: Object,
default: {}
}
},
methods: {
buyBill() {
uni.navigateTo({
url: `../../pages/film/filmSeat?cinemaData=${encodeURIComponent(JSON.stringify(this.cinemaData))}&filmList=${encodeURIComponent(JSON.stringify(this.filmList))}&filmData=${encodeURIComponent(JSON.stringify(this.filmData))}`
})
}
}
}
</script>
<style lang="scss" scoped>
.film-list {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin: 22rpx 0rpx;
.times {
width: 20%;
height: 80rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-right: 24rpx;
.film-time {
font-size: 40rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
line-height: 52rpx;
}
.film-end {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 32rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.size {
width: 25%;
display: flex;
flex-direction: column;
justify-content: space-between;
.film-end {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 32rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.film-type {
font-size: 26rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
line-height: 60rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
}
}
.price {
width: 35%;
.film-price {
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 900;
color: #FC4B5C;
line-height: 60rpx;
text-align: right;
text {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FC4B5C;
line-height: 32rpx;
}
.del-price {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 32rpx;
text-decoration: line-through;
}
}
.film-card {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 32rpx;
text-align: right;
}
}
.film-buy {
width: 170rpx;
height: 80rpx;
background: linear-gradient(136deg, #FC4B5C 0%, #FD8D3D 100%);
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0,0,0,0.1);
border-radius: 40rpx;
text-align: center;
color: #FFFFFF;
font-size: 24rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 80rpx;
margin-left: 16rpx;
}
.dontBuy {
background: linear-gradient(136deg, #646464 0%, #121212 100%);
}
}
</style>

92
components/film-swiper/film-badge.vue Normal file
View File

@ -0,0 +1,92 @@
<!-- 三角角标组件 -
use:
<ynTriangleBadge width="60" height="60" text="金8" bgcolor="green" fontsize="12"></ynTriangleBadge>
-->
<template>
<!-- 定义三角面板，包含2个元素 三角绘制和文字 -->
<view class="trianglePanel"
:style="{'max-width':width+'px','min-width':width+'px','max-height':height+'px','min-height':height+'px'}">
<view class="triangle-topright"
:style="{'border-top':height+'px solid '+bgcolor,'border-left':width+'px solid transparent'}"></view>
<!-- 用margin-left重叠三角 -->
<view class="textbox"
:style="{width:width*0.5+'px',height:height*0.5+'px','font-size':fontsize+'px','margin-left':width*-0.5+'px'}">
{{text}}
</view>
</view>
</template>
<script>
export default {
//组件名称 非必须
name: 'ynTriangleBadge',
props: {
//组件背景颜色
bgcolor: {
type: String,
default: 'blue'
},
width: {
type: String,
default: '50'
},
height: {
type: String,
default: '50'
},
text: {
type: String,
default: 'N'
},
// 一般字体大小是12px 网页端不能再小了 移动端可以再小 可以显示出来
fontsize: {
type: String,
default: "12"
}
},
data() {
return {
};
},
methods: {
},
created: function() {
},
// computed相当于属性的一个实时计算
computed: {},
}
</script>
<style>
.trianglePanel {
display: flex;
align-self: flex-end;
color: white;
/* border: red 1px solid; */
}
.textbox {
align-self: flex-start;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
margin: 1px;
/* 字符空格不忽略 */
white-space: pre;
word-break: break-all;
}
/* 右上三角 上 左有宽度 下 右 无宽度 */
.triangle-topright {
/* top:0;
left:0; */
z-index: 0;
width: 0;
height: 0;
}
</style>

159
components/film-swiper/film-banner.vue Normal file
View File

@ -0,0 +1,159 @@
<!-- 轮播图 -->
<template>
<view>
<view :style="{height: height+'rpx'}" class="swiper-container" @touchstart="touchStart" @touchend="touchEnd">
<view class="swiper-item" v-for="(item, index) in list" :key="index"
:style="{transform: styleList[index].transform, zIndex: styleList[index].zIndex, opacity: styleList[index].opacity,display:styleList[index].display}">
<view class="wrap">
<image @click="itemClick(index)" class="image" :src="item"></image>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
/**
* 图片url列表
*/
list: {
type: Array,
default: []
},
/**
* swiper高度
*/
height:{
type: Number,
default: 0
}
},
data() {
return {
/**
* 开始触摸点坐标
*/
start: {
x: 0,
y: 0
},
/**
* 每个item样式列表
*/
styleList: []
};
},
created() {
this.list.forEach((item, index) => {
this.styleList.push(this.addStyle(index))
})
},
methods: {
/**
* 计算每个item样式
* @param {Object} idx
*/
addStyle(idx) {
const len = this.list.length;
if (idx > len / 2) {
//这里是数组后一半的item放在左边,平移位置由远到近，例如共6个，后2个处理在这里
var left = len - idx
return {
transform: 'scale(' + (1 - left / 10) + ') translate(-' + (left * 30) + '%,0px)',
zIndex: 9999 - left,
opacity: 0.8 / left,
display: idx == len - 1 ? "block" : "none"
}
} else {
//这里是数组前一半item放在右边，平移位置由近到远，例如共6个，前4个处理在这里，这里第一个元素始终放在中间位置
return {
transform: 'scale(' + (1 - idx / 10) + ') translate(' + (idx * 30) + '%,0px)',
zIndex: 9999 - idx,
opacity: 0.8 / (idx === 0 ? 0.8 : idx),
display: idx > 1 ? "none" : "block"
}
}
},
/**
* 触摸开始
* @param {Object} e
*/
touchStart(e) {
this.start.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
this.start.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
},
/**
* 触摸结束
* @param {Object} e
*/
touchEnd(e) {
var newStyleList = JSON.parse(JSON.stringify(this.styleList))
let tx = e.changedTouches[0].pageX - this.start.x
let ty = e.changedTouches[0].pageY - this.start.y
if (Math.abs(tx) > Math.abs(ty)) {
//左右方向滑动
if (tx < 0) {
// 向左滑动
var last = [newStyleList.pop()]
newStyleList = last.concat(newStyleList)
} else if (tx > 0) {
// 向右滑动
newStyleList.push(newStyleList[0])
newStyleList.splice(0, 1)
}
} else {
//这里就不处理上下方向的事件了，有此需求的同仁可以在这里写逻辑
//上下方向滑动
if (ty < 0) {
// 向上滑动
} else if (ty > 0) {
// 向下滑动
}
}
this.styleList = newStyleList
},
/**
* 当前item点击返回索引下标
* @param {Object} idx
*/
itemClick(idx) {
console.log(idx)
this.$emit('click', idx);
}
}
}
</script>
<style lang="scss">
.swiper-container {
box-sizing: border-box;
height: 690rpx;
width: 100%;
overflow: hidden;
position: relative;
.swiper-item {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all .5s;
.wrap {
height: 100%;
width: 400rpx;
margin: 2rpx auto;
.image {
height: 100%;
width: 100%;
// border-radius: 10rpx;
// box-shadow: 0 0 10rpx #333;//加阴影的话去掉注释即可
}
}
}
}
</style>

792
components/film-swiper/film-swiper.vue Normal file
View File

@ -0,0 +1,792 @@
<!-- 电影画廊组件 -->
<template>
<view class="ynGalleryPanel">
<view class="gallerypanel" style="filter:brightness(1);border-radius:1upx"
:style="{'background':bkstyle,'height':galleryheight+'px','width':'100%'}">
<scroll-view class="scroll-view" scroll-x="true" scroll-with-animation="true" :scroll-into-view="toview"
:scroll-left="scrollLeft" @scroll="scroll">
<!-- scroll-view-panle 容纳左右空块+中间img块 -->
<view class="scroll-view-panle" @touchend='touchEndHandle' @touchstart='touchStartHandle'
@touchmove='touchMoveHandle'>
<!-- 左侧留空 必须用min-width属性 用width属性无效-->
<view class="leftview" :style="{'min-width':sviewlst.leftview.w+'px','height':galleryheight+'px'}">
</view>
<!-- 中间图像横向列表 ==-->
<!-- 外层 高度与画廊高度一样 -->
<view :id="'imgviewpanel'+index" :ref="'imgviewpanel'+index"
:class="[activeviewindex == index? 'trans-fadeout': '']" @animationstart="animationstartHandle"
@animationend="animationendHandle" v-for="(item,index) in sviewlst.imgsview" :key="index"
:style="{'width':item.w+'px','height':galleryheight+'px'}"
style="border: #BB6622 0px solid;display:flex;flex-direction: column;align-content:center;justify-content: flex-end;">
<!-- 内层 高度是图片容器的高度 -->
<!-- 顶部圆角角标 -->
<view v-if="showbadge && badegtype=='round'" class="roundbadge"
:style="{background:[(index % 2) ==0? 'red':'green']}">
<text> {{item.badeg}}</text>
</view>
<!-- 三角标记组件 -->
<!-- <ynTriangleBadge v-if="showbadge && badegtype=='trian'" :width="badegwidth"
:height="badegheight" :text="item.badeg" :bgcolor="item.badegcolor"
style="z-index:2;align-self: flex-end;margin-right: 5px;border: #EC6D2C 0upx solid;"
:style="{'margin-bottom':(parseInt(badegheight)+5)*-1+'px'}">
</ynTriangleBadge> -->
<!-- 图片框 居中属性-->
<view style="display:flex; align-content:flex-end;justify-content: center; border:red 0px solid;"
:style="{'width':item.w+'px','height': item.h+'px'}">
<image :ref="'image'+index"
style="align-self: center;border-radius: 1px; "
:style="{'width' :item.w-10 +'px',
'height':item.h-10 +'px',
'border':[activeviewindex == index? '#EC6D2C 1px solid':'#EC6D2C 0px solid']}"
:src="item.posterUrl"
@click="clickimg(index,item)" mode="scaleToFill">
</image>
</view>
<!-- 描述视图 -->
<view
style="display: flex;justify-content: center;margin-bottom: 4px;border: #008000 0px solid;min-height: 10px;">
<!-- <text v-if="showdec" style="align-self: center;font-size: 12px;color:white">{{item.dec}}</text> -->
</view>
</view>
<!-- 右侧留空 必须用min-width属性 用width属性无效-->
<view class="rightview"
:style="{'min-width':sviewlst.rightview.w+'px','height':galleryheight+'px'}"></view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
import ynTriangleBadge from './film-badge.vue';
export default {
components: {
ynTriangleBadge,
},
name: 'FilmSwiper',
props: {
//背景起始色
bkstart: {
type: [String],
default: '#000000'
},
// 背景结束色
bkend: {
type: [String],
default: '#000000'
},
// 画廊高度 单位px
galleryheight: {
type: [Number, String],
default: 180 * 1.0
},
//图像源对象列表
images: {
type: Array,
},
//图像容器宽度
imgviewwidth: {
type: [Number],
default: parseInt(170 * 0.5)
},
//图像容器高度
imgviewheight: {
type: [Number],
default: parseInt(235 * 0.45)
},
showbadge: {
type: [Boolean],
default: false
},
showdec: {
type: [Boolean],
default: false
},
badegtype: {
type: [String],
default: 'trian' //round trian
},
badegwidth: {
type: [String],
default: "25"
},
badegheight: {
type: [String],
default: "25"
}
},
data() {
return {
//bkstart bkend不能在组件内赋值 该元素做中转
bkstartcolor: this.bkstart,
bkendcolor: this.bkend,
badegcolor: "red",
// 定时器 用来判断滑动是否结束
TTT: null,
// 这个变量用来判断是否进行了滑动操作
istouchmove: false,
// 手指是否离开了屏幕
isEndTouch: true,
// 屏幕中心点
screencenterpos: 0,
//当前焦点view块index序
activeviewindex: 0,
//焦点图中间点与屏幕中间点的偏移，通常不滑动的时候，焦点图总是显示在中间，且图的中间点总是与屏幕中间重合
offset: 0,
//这个用来定位具体的位置
scrollLeft: 0,
//当前距离左边的距离
newleft: 0,
//上一次距离左边的距离
oldleft: {
scrollleft: 0
},
//滚动组件内视图块数据定义
sviewlst: {
leftview: {}, //左则空块
rightview: {}, //右侧空块
imgsview: [] //中间image图像数组块
},
toview: "viewitem0",
};
},
created: function() {
if (this.images.length > 0) {
this.screencenterpos = parseInt(uni.upx2px(750) / 2);
this.upDataScrollviewLayout(this.activeviewindex);
}
},
mounted: function() {},
watch: {
async images() {
var that = this;
console.log('watch监控到images属性变化');
this.screencenterpos = parseInt(uni.upx2px(750) / 2);
console.log("屏幕中点pos位置:" + this.screencenterpos + 'px');
this.upDataScrollviewLayout(this.activeviewindex);
},
activeviewindex() {
this.$emit('scrollerItem', this.images[this.activeviewindex])
}
},
computed: {
// 返回径向渐变样式值 用来设置背景 如果定义了每个image的主色（domiant）则会设置该主色作为径向渐变的起始色
bkstyle() {
// return `radial-gradient(circle,${this.bkstartcolor}, ${this.bkendcolor})`
},
},
methods: {
SetBkRightAnimate: function(startcolor) {
var that = this;
var nums = 10;
//取2个颜色之间的过渡色
var colorarr = this.gradientColor(startcolor, this.bkendcolor, nums);
// console.log(colorarr)
let num = 10;
//渐显
var i = setInterval(function() {
that.bkstartcolor = colorarr[num - 1]
num--;
//0=最亮 所以这里也可以控制明暗
if (num < (10 / 2))
clearInterval(i);
}, 50);
},
endscroll: function(e) {
// console.log('endscorll')
},
//实时监控scrol位置 计算焦点图中点偏移
scroll: function(e) {
// console.log('检测到scroll 被触发......')
var that = this;
// console.log(e)
this.newleft = e.mp.detail.scrollLeft;
this.oldleft.scrollleft = this.newleft;
//scroll左边点+屏幕中点 总是随着拖动而变化
let cenpos = e.mp.detail.scrollLeft + this.screencenterpos;
// console.log('中锚点位置:'+cenpos);
for (let i in this.sviewlst.imgsview) {
let item = this.sviewlst.imgsview[i];
if ((item.l <= cenpos) && (item.r >= cenpos)) {
let imgcpos = item.l + parseInt(item.w / 2);
let aoffset = cenpos - imgcpos;
this.offset = aoffset;
this.upDataScrollviewLayout(i);
break;
}
}
},
//$emit 向上传递 所有父或者父父组件会依次接收到emit事件
clickimg(idx, imgviewobj) {
this.activeviewindex = idx
this.scrollLeft = this.sviewlst.imgsview[idx].l - parseInt(this.screencenterpos) + parseInt(this.sviewlst
.imgsview[idx].w / 2);
this.$emit('clickimg', imgviewobj)
},
touchStartHandle(e) {
// 手指按到屏幕
this.istouchmove = false;
this.isEndTouch = false;
},
touchMoveHandle(e) {
// 手指滑动中
this.istouchmove = true;
},
touchEndHandle(e) {
// 手指离开屏幕
this.isEndTouch = true;
},
animationstartHandle() {
// 元素css动画开始事件
// console.log('animate is start')
},
animationendHandle() {
//渲染背景颜色(right动画)
let color = this.sviewlst.imgsview[this.activeviewindex].dominant;
//触发背景动画
this.SetBkRightAnimate(color);
},
//更新Scrollview内view块布局
//offset: 为实现滑动动画效果,需要临近的2张图片做呼吸效果(焦点图逐渐放大缩小,相领的图逐渐缩小放大)，需要这个参数，
// offset参数在 滑动scrollview的实时回调函数中计算 offset暂时设置为全局变量
// offset相对于中点偏移,中点左边为负 右边为正 类似于线段图（） 本函数会根据offset和最大放大系数来计算放大系数
// 焦点图中间点与屏幕中间点的偏移，通常不滑动的时候，焦点图总是显示在中间，且图的中间点总是与屏幕中间重合
// 当为负的时候,与左边的index 进行互斥放大和缩小,
// 当为0的时候,当前焦点图放到了最大
// 当为正的时候,与右边的index 进行互斥放大和缩小
upDataScrollviewLayout(activeindex) {
console.log('检测到 initScrollviewLayout');
var that = this;
this.upbkcolor = false;
var that = this;
if (this.images.length <= 0) {
return
};
var offset = this.offset;
//一、构造滚动组件内view块分布
//1、左view块 留空用 为了让第一张图片可以居中
var lview = {}
lview.dec = "left view"
lview.w = this.screencenterpos;
lview.h = this.imgviewheight;
lview.l = 0;
lview.r = lview.l + lview.w;
//2、处理中间imagelist块
//2.1、设计默认大小的imageview块布局
var arrimgview = [];
var i = 0;
while (i <= this.images.length - 1) {
let obj = {
index: i,
url: '', //源
dec: '', //图像描述信息
badeg: '', //角标文字
badegcolor: this.badegcolor, //角标默认颜色
dominant: this.bkstartcolor, //默认主色
w: 0, //该view宽度
h: 0, //该view高度
l: 0, //该view块左边距scroll容器左边距离
r: 0, //该view右边距scroll容器左边距离
}
//合并外界传来image对象属性 若有重合的属性 后面的覆盖前面
let imgview = Object.assign(obj, this.images[i]);
//添加长宽等数据
imgview.w = this.imgviewwidth;
imgview.h = this.imgviewheight;
if (i == 0) {
imgview.l = lview.r + 0;
} else {
imgview.l = arrimgview[i - 1].r + 0;
}
imgview.r = imgview.l + imgview.w;
arrimgview.push(imgview);
i++;
};
//3、右边view块 留空用 为了让最后一张图片可以居中
let rview = {}
rview.dec = "right view"
//使得最后一张图片中间部分对齐屏幕正中间
rview.w = this.screencenterpos;
rview.h = this.imgviewheight;
if (arrimgview.length <= 0) {
rview.l = lview.r + 0;
} else {
rview.l = arrimgview[arrimgview.length - 1].r + 0;
}
rview.r = rview.l + rview.w;
//二、计算焦点图 焦点图左右临图的放大系数关系 修改相应块的高宽
var leftaf = 1;
var rightaf = 1;
var activeaf = 1;
var af = 0.18;
//左右临图与焦点图的系数计算（焦点图总是与左临图 或者 右临图发生进退大小关系（2张图的关系 构成视觉动画））
if (arrimgview.length > 0) {
let aindex = activeindex;
let lindex = parseInt(aindex) - 1;
let rindex = parseInt(aindex) + 1;
//取焦点imgview块(默认放大1.18倍)）宽度的一半
let lw = (this.imgviewwidth * 1.18) / 2
//根据偏移取计算百分比
let bl = Math.abs(offset) / lw
// 计算焦点放大系数 默认最大1.18
if (offset == 0) {
activeaf = 1.18;
leftaf = 1;
rightaf = 1;
}
if (offset > 0) {
activeaf = 1 + 0.18 * (1 - bl / 2)
rightaf = 1 + (1.18 - activeaf)
leftaf = 1;
}
if (offset < 0) {
activeaf = 1 + 0.18 * (1 - bl / 2)
leftaf = 1 + (1.18 - activeaf)
rightaf = 1;
}
//设置焦点图放大系数
if (aindex >= 0 && aindex <= arrimgview.length - 1) {
arrimgview[aindex].w = this.imgviewwidth * activeaf;
arrimgview[aindex].h = this.imgviewheight * activeaf;
} else {
console.log("焦点图越界");
return;
};
//设置左临图 当offset小于0时,当前焦点图与左则相领图做拉扯动画
if (offset < 0) {
if (lindex >= 0) {
arrimgview[lindex].w = this.imgviewwidth * leftaf;
arrimgview[lindex].h = this.imgviewheight * leftaf;
}
}
//设置右临图 当offset大于0时,当前焦点图与右则相领图做拉扯动画
if (offset > 0) {
if (rindex <= arrimgview.length - 1) {
arrimgview[rindex].w = this.imgviewwidth * rightaf;
arrimgview[rindex].h = this.imgviewheight * rightaf;
}
}
}
//三、 修正左右边距，lveiw rview视图大小等
if (arrimgview.length > 0) {
lview.w = lview.w - (arrimgview[0].w / 2);
lview.r = lview.l + lview.w;
for (let i = 0; i <= arrimgview.length - 1; i++) {
if (i == 0) {
arrimgview[i].l = lview.r + 0;
} else {
arrimgview[i].l = arrimgview[i - 1].r + 0;
}
arrimgview[i].r = arrimgview[i].l + arrimgview[i].w;
};
rview.w = rview.w - (arrimgview[arrimgview.length - 1].w / 2) + 0;
rview.l = arrimgview[arrimgview.length - 1].r + 0;
rview.r = rview.l + rview.w;
}
//四、更新data数据 因为在template中进行了绑定 根据vue双向数据特性 会更新界面
var obj = {
'leftview': lview,
'rightview': rview,
'imgsview': arrimgview
};
this.activeviewindex = activeindex;
this.sviewlst = obj;
this.$nextTick(function() {
var that = this
if (this.istouchmove == true) {
clearTimeout(that.TTT);
var ai = that.activeviewindex;
var TTT = setTimeout(function() {
if (that.activeviewindex == ai) {
that.$emit('clickimg', that.sviewlst.imgsview[that.activeviewindex]);
}
}, 300)
}
})
},
/* 取2个颜色之间的过渡色 参考自网络
// startColor：开始颜色hex
// endColor ：结束颜色hex
// count : 产生几个 也就是步长
// sample: colorarr = gradientColor(startcolor,endcolor,5); 生成5个过渡颜色
*/
gradientColor(startColor, endColor, count) {
let startRGB = this.colorToRgb(startColor); //转换为rgb数组模式
let startR = startRGB[0];
let startG = startRGB[1];
let startB = startRGB[2];
let endRGB = this.colorToRgb(endColor);
let endR = endRGB[0];
let endG = endRGB[1];
let endB = endRGB[2];
let sR = (endR - startR) / count; //总差值
let sG = (endG - startG) / count;
let sB = (endB - startB) / count;
var colorArr = [];
for (var i = 0; i < count; i++) {
//计算每一步的hex值
var hex = this.colorToHex('rgb(' + parseInt((sR * i + startR)) + ',' + parseInt((sG * i + startG)) +
',' +
parseInt((sB * i + startB)) + ')');
colorArr.push(hex);
}
return colorArr;
},
// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
colorToRgb(sColor) {
// <http://www.w3.org/TR/css3-color/#svg-color>
var names = {
aliceblue: "f0f8ff",
antiquewhite: "faebd7",
aqua: "0ff",
aquamarine: "7fffd4",
azure: "f0ffff",
beige: "f5f5dc",
bisque: "ffe4c4",
black: "000",
blanchedalmond: "ffebcd",
blue: "00f",
blueviolet: "8a2be2",
brown: "a52a2a",
burlywood: "deb887",
burntsienna: "ea7e5d",
cadetblue: "5f9ea0",
chartreuse: "7fff00",
chocolate: "d2691e",
coral: "ff7f50",
cornflowerblue: "6495ed",
cornsilk: "fff8dc",
crimson: "dc143c",
cyan: "0ff",
darkblue: "00008b",
darkcyan: "008b8b",
darkgoldenrod: "b8860b",
darkgray: "a9a9a9",
darkgreen: "006400",
darkgrey: "a9a9a9",
darkkhaki: "bdb76b",
darkmagenta: "8b008b",
darkolivegreen: "556b2f",
darkorange: "ff8c00",
darkorchid: "9932cc",
darkred: "8b0000",
darksalmon: "e9967a",
darkseagreen: "8fbc8f",
darkslateblue: "483d8b",
darkslategray: "2f4f4f",
darkslategrey: "2f4f4f",
darkturquoise: "00ced1",
darkviolet: "9400d3",
deeppink: "ff1493",
deepskyblue: "00bfff",
dimgray: "696969",
dimgrey: "696969",
dodgerblue: "1e90ff",
firebrick: "b22222",
floralwhite: "fffaf0",
forestgreen: "228b22",
fuchsia: "f0f",
gainsboro: "dcdcdc",
ghostwhite: "f8f8ff",
gold: "ffd700",
goldenrod: "daa520",
gray: "808080",
green: "008000",
greenyellow: "adff2f",
grey: "808080",
honeydew: "f0fff0",
hotpink: "ff69b4",
indianred: "cd5c5c",
indigo: "4b0082",
ivory: "fffff0",
khaki: "f0e68c",
lavender: "e6e6fa",
lavenderblush: "fff0f5",
lawngreen: "7cfc00",
lemonchiffon: "fffacd",
lightblue: "add8e6",
lightcoral: "f08080",
lightcyan: "e0ffff",
lightgoldenrodyellow: "fafad2",
lightgray: "d3d3d3",
lightgreen: "90ee90",
lightgrey: "d3d3d3",
lightpink: "ffb6c1",
lightsalmon: "ffa07a",
lightseagreen: "20b2aa",
lightskyblue: "87cefa",
lightslategray: "789",
lightslategrey: "789",
lightsteelblue: "b0c4de",
lightyellow: "ffffe0",
lime: "0f0",
limegreen: "32cd32",
linen: "faf0e6",
magenta: "f0f",
maroon: "800000",
mediumaquamarine: "66cdaa",
mediumblue: "0000cd",
mediumorchid: "ba55d3",
mediumpurple: "9370db",
mediumseagreen: "3cb371",
mediumslateblue: "7b68ee",
mediumspringgreen: "00fa9a",
mediumturquoise: "48d1cc",
mediumvioletred: "c71585",
midnightblue: "191970",
mintcream: "f5fffa",
mistyrose: "ffe4e1",
moccasin: "ffe4b5",
navajowhite: "ffdead",
navy: "000080",
oldlace: "fdf5e6",
olive: "808000",
olivedrab: "6b8e23",
orange: "ffa500",
orangered: "ff4500",
orchid: "da70d6",
palegoldenrod: "eee8aa",
palegreen: "98fb98",
paleturquoise: "afeeee",
palevioletred: "db7093",
papayawhip: "ffefd5",
peachpuff: "ffdab9",
peru: "cd853f",
pink: "ffc0cb",
plum: "dda0dd",
powderblue: "b0e0e6",
purple: "800080",
rebeccapurple: "663399",
red: "f00",
rosybrown: "bc8f8f",
royalblue: "4169e1",
saddlebrown: "8b4513",
salmon: "fa8072",
sandybrown: "f4a460",
seagreen: "2e8b57",
seashell: "fff5ee",
sienna: "a0522d",
silver: "c0c0c0",
skyblue: "87ceeb",
slateblue: "6a5acd",
slategray: "708090",
slategrey: "708090",
snow: "fffafa",
springgreen: "00ff7f",
steelblue: "4682b4",
tan: "d2b48c",
teal: "008080",
thistle: "d8bfd8",
tomato: "ff6347",
turquoise: "40e0d0",
violet: "ee82ee",
wheat: "f5deb3",
white: "fff",
whitesmoke: "f5f5f5",
yellow: "ff0",
yellowgreen: "9acd32"
};
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
var sColor = sColor.toLowerCase();
//颜色常量转换
if (sColor.slice(0, 1) != "#") {
for (var name in names) {
if (name == sColor) {
var sColor = "#" + names[name];
}
}
}; {
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
//处理6位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return sColorChange;
} else {
return sColor;
}
}
},
// 将rgb表示方式转换为hex表示方式
colorToHex(rgb) {
var _this = rgb;
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
if (/^(rgb|RGB)/.test(_this)) {
var aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
var strHex = "#";
for (var i = 0; i < aColor.length; i++) {
var hex = Number(aColor[i]).toString(16);
hex = hex < 10 ? 0 + '' + hex : hex; // 保证每个rgb的值为2位
if (hex === "0") {
hex += hex;
}
strHex += hex;
}
if (strHex.length !== 7) {
strHex = _this;
}
return strHex;
} else if (reg.test(_this)) {
var aNum = _this.replace(/#/, "").split("");
if (aNum.length === 6) {
return _this;
} else if (aNum.length === 3) {
var numHex = "#";
for (var i = 0; i < aNum.length; i += 1) {
numHex += (aNum[i] + aNum[i]);
}
return numHex;
}
} else {
return _this;
}
},
},
}
</script>
<style lang="scss" scoped="">
// 创建一张隐藏的画布 用于取色
.canvas-box {
margin-left: 500upx;
width: 0;
height: 0;
overflow: hidden
}
//画廊总容器 静态样式放这里 动态样式放template
.gallerypanel {
.scroll-view {
.scroll-view-panle {
display: flex;
height: 100%;
width: 100%;
white-space: nowrap;
.leftview {
//动态
}
.imgviewpanel {
.角标 {}
.imgview {
.图片 {}
}
.描述 {
.文本 {}
}
}
.rightview {
//动态
}
}
}
}
// 隐藏滚动条 hbx1.8版本 这样写有错误（伪类错误） 需要把这代码放到小程序工具的main.wsxx中去
// .gallerypanel ::-webkit-scrollbar {display: none;}
// .scroll-view ::-webkit-scrollbar {
// display: none;
// }
.roundbadge {
z-index: 2;
display: flex;
align-self: flex-end;
align-items: center;
justify-content: center;
font-size: 12px;
color: white;
border-radius: 8px;
min-width: 12px;
min-height: 12px;
max-height: 12px;
padding: 3px 5px;
margin-bottom: -17px; //17=12+5 12是圆角角标高度 5是图片中间的边距
margin-right: 3px; //右边距是5px 这里取3
}
* {
-webkit-overflow-scrolling: touch;
}
// 呼吸帧
@keyframes living {
0% {
// transform-origin:'center bottom';
transform: scale(1);
opacity: 1;
}
50% {
// transform-origin:'center bottom';
transform: scale(1.05);
opacity: 1;
/*圆形放大的同时，透明度逐渐减小为0*/
}
100% {
// transform-origin:'center bottom';
transform: scale(1);
opacity: 1;
}
}
.trans-fadeout {
// -webkit-transition:all 0.2s linear;
// -moz-transition:all 0.2s linear;
// -ms-transition:all 0.2s linear;
// -o-transition:all 0.2s linear;
animation: living 1s ease-in-out 1;
}
</style>

219
components/goods-item/goods-item.vue Normal file
View File

@ -0,0 +1,219 @@
<template>
<view class="content" :style="{'--padding':index == 0?'56rpx':'20rpx'}">
<image v-if="index == 0" class="First-Img" src="https://img.agrimedia.cn/chwl/v2/20220909-164805.png" mode="">
</image>
<view class="shop-box" @click="goShop">
<view class="flex flex-space-between">
<view class="flex">
<view class="">
<u-image :src="goodsInfo.store_img" radius="10rpx" width="200rpx" height="200rpx"></u-image>
</view>
<view v-if="dataType == 0" class="" style="margin-left: 20rpx;">
<u-text size="30rpx" :bold="true" :text="goodsInfo.store_name" :lines="1"></u-text>
<u-text size="22rpx" color="#999"
:text="(goodsInfo.goods_sales == null?0:goodsInfo.goods_sales) + '销量'"></u-text>
<view class="">
<u-gap height="20rpx"></u-gap>
<view class="flex" v-for="(item1,index1) in goodsInfo.goods" :key="index1">
<view class="">
<u-text lineHeight="40rpx" :bold="true" size="30rpx" color="#FF4D03"
:text="'¥'+item1.price/100"></u-text>
</view>
<view class="" style="margin: 10rpx;">
<u-text lineHeight="40rpx" decoration="line-through" size="22rpx" color="#999"
:text="'¥'+item1.originalPrice/100"></u-text>
</view>
<view class="">
<u-text lineHeight="40rpx" lines="1" size="30rpx" :text="item1.goodsTitle"></u-text>
</view>
</view>
</view>
<!-- <view class="">
<text class="check-shop" @click="goShop">查看店铺</text>
</view> -->
</view>
<view v-if="dataType == 1" class="" style="margin-left: 20rpx;">
<u-text size="30rpx" :bold="true" :text="goodsInfo.goodsTitle" :lines="1"></u-text>
<u-gap height="10rpx"></u-gap>
<view v-if="active == 0" class="flex flex-space-between">
<view class="" style="width: 100%;">
<!-- <u-line-progress height="18rpx" activeColor="#F14E10" inactiveColor="#FE8D3D" :percentage="70" :showText="true">
</u-line-progress> -->
<u-gap height="10rpx"></u-gap>
<progress backgroundColor="#FE8D3D" activeColor="#F14E10"
:percent="goodsInfo.sales_num/goodsInfo.num" border-radius="40rpx" font-size="20rpx"
active stroke-width="3" />
</view>
<view class="flex" style="width: 180rpx;">
<view class="">
<u-text size="20rpx" text="已抢%"></u-text>
</view>
<u-count-to fontSize="20rpx" :startVal="0" :endVal="goodsInfo.sales_num/goodsInfo.num">
</u-count-to>
</view>
</view>
<view v-else class="flex flex-space-between">
<u-gap height="26rpx"></u-gap>
</view>
<!-- <u-line-progress height="18rpx" activeColor="#F14E10" inactiveColor="#FE8D3D" :percentage="20" :showText="true">
<view class="" solt="default" style="font-size: 18rpx;line-height: 18rpx;">
已抢20%
</view>
</u-line-progress> -->
<u-text size="22rpx" lines="1" color="#999" :text="goodsInfo.address"></u-text>
<u-gap height="10"></u-gap>
<view class="">
<view class="flex">
<view class="">
<u-text lineHeight="40rpx" color="#FE2825" size="30rpx" text="秒杀价"></u-text>
</view>
<view class="">
<u-text lineHeight="40rpx" :bold="true" size="36rpx" color="#FF4D03"
:text="'¥'+goodsInfo.seckill_price/100"></u-text>
</view>
</view>
</view>
<view class="">
<u-text lineHeight="40rpx" size="24rpx" color="#666666" :text="'即将恢复￥'+goodsInfo.price/100"></u-text>
</view>
</view>
</view>
<view v-if="dataType == 0">
<u-text align="center" size="22rpx" color="#999" :text="goodsInfo.distance + 'km'"></u-text>
</view>
<view v-if="dataType== 1" class="" style="min-width: 130rpx;">
<u-gap height="44rpx"></u-gap>
<u-text align="center" size="22rpx" color="#999"
:text="active==0?'已抢'+ goodsInfo.sales_num +'件':' '"></u-text>
<u-text align="center" size="22rpx" color="#999"
:text="(goodsInfo.distance > 999?'999+':goodsInfo.distance)+'km'"></u-text>
<u-gap height="60rpx"></u-gap>
<view style="text-align: center;">
<text @click.stop="goGoodsinfo(goodsInfo.goods_id)" v-if="active == 0"
style="margin: 0 auto;color:#ffffff;text-align: center;padding: 0 20rpx;border-radius: 20rpx;font-size: 24rpx;background-color: #FF7B2D;">抢购</text>
<view class="begin" v-else>
<image class="begin_image" src="../../static/image/begin.png"></image>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "goods-item",
props: {
index: {
type: Number,
default: 0
},
dataType: {
type: Number,
default: 0
},
active: {
type: Number,
default: 0
},
goodsInfo: {
type: Object,
default: {
store_img: '',
store_name: '',
goods_sales: 0,
goods: [],
goodsTitle: '',
sales_num: 0,
num: 0,
address: '',
seckill_price: 0,
price: 0,
distance: '',
goods_id: 0
}
}
},
data() {
return {
};
},
methods: {
goGoodsinfo(item_id) {
uni.navigateTo({
url: '../../pages/goodsInfo/goodsInfo?goods_id=' + item_id
})
},
goShop() {
uni.navigateTo({
url: '/pages/shop/shop?store_id=' + this.goodsInfo.store_id
})
}
}
}
</script>
<style lang="scss">
.check-shop {
background-color: #FF4D02;
color: #FFFFFF;
font-size: 24rpx;
padding: 4rpx 20rpx;
border-radius: 20rpx;
}
.content {
background-color: #ffffff;
border-radius: 20rpx;
padding: var(--padding) 20rpx 20rpx 20rpx;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
margin-bottom: 20rpx;
position: relative;
}
.First-Img {
width: 322rpx;
height: 86rpx;
position: absolute;
top: -30rpx;
left: 50%;
transform: translateX(-50%);
&::after {
content: '';
position: absolute;
right: 0;
top: 8rpx;
width: 0;
height: 0;
border-left: 28rpx solid transparent;
border-right: 10rpx solid transparent;
border-bottom: 21rpx solid #DD6409;
z-index: -1;
}
&::before {
content: '';
position: absolute;
left: 0;
top: 8rpx;
width: 0;
height: 0;
border-left: 12rpx solid transparent;
border-right: 10rpx solid transparent;
border-bottom: 21rpx solid #DD6409;
z-index: -1;
}
}
.begin_image {
width: 184rpx;
height: 54rpx;
}
</style>

37
components/jb30/jb30.vue Normal file
View File

@ -0,0 +1,37 @@
<template>
<view>
<view class="jianbian">
<view v-if="showRadius" class="mt-30 yj-box"></view>
</view>
</view>
</template>
<script>
export default {
name:"jb30",
props:{
showRadius:{
type:Boolean,
default:true
}
},
data() {
return {
};
}
}
</script>
<style>
.jianbian{
height: 30rpx;
background: linear-gradient(#FE8D3D, #ffffff);
}
.yj-box{
height: 30rpx;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
background-color: #FFFFFF;
}
</style>

301
components/keyboard-package/keyboard-package.vue Normal file
View File

@ -0,0 +1,301 @@
<template>
<u-popup :show="show" overlayOpacity="0" :overlay="false" @close="close" @open="open">
<view class="keyboardbox">
<view class="numkeyboard" v-if="type===1">
<view class="num-area">
<view class="row" v-for="(item,index) in numKeybordList" :key="index">
<view :class="['item',ite===0?'z':'',(disableDot && ite==='.')?'disabled':'']" v-for="(ite,idx) in item"
hover-class="active" :hover-start-time="0" :hover-stay-time="5" :key="idx" @tap="input(ite)">{{ite}}</view>
</view>
</view>
<view class="btn-area">
<view :class="['item','del']" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
删除
</view>
<view class="confirem item" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="confirm">
确定
</view>
</view>
</view>
<view class="numkeyboard" v-if="type===2">
<view class="num-area">
<view class="row" v-for="(item,index) in idCardList" :key="index">
<view :class="['item',ite===0?'z':'',(disableDot && ite==='.')?'disabled':'']" v-for="(ite,idx) in item"
hover-class="active" :hover-start-time="0" :hover-stay-time="5" :key="idx" @tap="input(ite)">{{ite}}</view>
</view>
</view>
<view class="btn-area">
<view :class="['item','del']" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
删除
</view>
<view class="confirem item" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="confirm">
确定
</view>
</view>
</view>
<view class="platenumber" v-if="type===3">
<view class="header">
<view @tap="active=active===1?2:1" hover-class="active" :hover-start-time="0" :hover-stay-time="5">{{active===1?'地区':'车牌号'}}</view>
<view hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="confirm">完成</view>
</view>
<view class="main">
<view class="normal" v-if="active===1">
<view class="row" v-for="(item,index) in EngKeyBoardList" :key="index">
<view class="item" v-for="(ite,idx) in item" :key="idx" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="input(ite)">
{{ite}}
</view>
<view class="item img" v-if="index===EngKeyBoardList.length-1" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
<image src="/static/delete.png" mode=""></image>
</view>
</view>
</view>
<view class="area" v-if="active===2">
<view class="row" v-for="(item,index) in areaList" :key="index">
<view class="item" v-for="(ite,idx) in item" :key="idx" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="input(ite)">
{{ite}}
</view>
<view class="item img" v-if="index===EngKeyBoardList.length-1" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
<image src="/static/delete.png" mode=""></image>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="safe-area" v-if="safeAreaInsetBottom"></view>
</u-popup>
</template>
<script>
export default {
props: {
type: {
type: Number, // 1-数字键盘 2-身份证号 -车牌号
default: 1
},
safeAreaInsetBottom: { //是否设置安全区
type: Boolean,
default: true
},
disableDot: { //数字键盘是否禁止点击.仅type为number生效
type: Boolean,
default: false
},
show: { //数字键盘是否禁止点击.仅type为number生效
type: Boolean,
default: false
},
timer:null
},
data() {
return {
numKeybordList: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
[0, '.']
],
idCardList: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
[0, 'X']
],
areaList: [
['京', '沪', '粤', '津', '冀', '豫', '云', '辽', '黑', '湘'],
['皖', '鲁', '苏', '浙', '赣', '鄂', '桂', '甘', '晋', '陕'],
['蒙', '吉', '闽', '贵', '渝', '川', '青', '琼', '宁'],
['藏', '新', '使', '港', '澳', '学']
],
EngKeyBoardList: [
[1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
['Z', 'X', 'C', 'V', 'B', 'N', 'M']
],
active: 1
};
},
methods: {
open() {
this.$emit('open')
},
confirm() {
this.close();
this.$emit('onConfirm');
},
deleteVal() {
this.$emit('onDelete');
this.input('')
},
input(val) {
if (val === '.' && this.disableDot) return;
this.$emit('input', val);
},
close() {
this.$emit('closeTable')
}
}
}
</script>
<style lang="scss" scoped>
.keyboardbox {
background-color: #FFFFFF;
.numkeyboard {
height: 432rpx;
display: flex;
background-color: #ebedf0;
.btn-area {
width: 180rpx;
height: 100%;
display: flex;
flex-direction: column;
.item {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.del {
background-color: #ebedf0;
color: #333;
&.active {
background-color: #f1f3f5;
}
}
.confirem {
background-color: #1989fa;
color: #FFFFFF;
&.active {
background-color: #0570db;
}
}
}
.num-area {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
.row {
width: 100%;
height: 25%;
display: flex;
margin-top: 1px;
.item {
flex-grow: 1;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
border-right: 1px solid #ebedf0;
width: 33.33%;
&.active {
background-color: #ebedf0;
}
&.z {
flex-grow: 2;
width: 66.66%;
}
&.disabled {
background: #FFFFFF;
color: #B9B9B9;
}
}
}
}
}
}
.safe-area {
padding-bottom: 0rpx;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.platenumber {
background-color: #f5f5f5;
.header {
height: 76rpx;
background-color: #FFFFFF;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
border-top: 1px solid #f5f5f5;
&>view {
padding: 0 45rpx;
color: #00a7ea;
height: 100%;
display: flex;
align-items: center;
&.active {
background-color: #ebedf0;
}
}
}
.main {
height: 435rpx;
.row {
margin: 13rpx 0;
display: flex;
justify-content: center;
align-items: center;
.item {
width: 56rpx;
height: 94rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
border-radius: 6rpx;
margin: 0 7rpx;
font-size: 24rpx;
&.active {
background-color: #ebedf0;
}
&.img {
background-color: #c2cacc;
width: 94rpx;
&.active {
background-color: #ddd;
}
&>image {
width: 49rpx;
height: 48rpx;
}
}
}
}
}
}
</style>

187
components/keyboard-package/uni-popup.vue Normal file
View File

@ -0,0 +1,187 @@
<template>
<view v-if="showPopup" class="uni-popup">
<view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" />
<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper" @click="close(true)">
<view class="uni-popup__wrapper-box" @click.stop="clear">
<slot />
</view>
</view>
</view>
</template>
<script>
export default {
name: 'UniPopup',
props: {
// 开启动画
animation: {
type: Boolean,
default: true
},
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
type: {
type: String,
default: 'center'
},
// 是否开启自定义
custom: {
type: Boolean,
default: false
},
// maskClick
maskClick: {
type: Boolean,
default: true
},
show: {
type: Boolean,
default: true
}
},
data() {
return {
ani: '',
showPopup: false
}
},
watch: {
show(newValue) {
if (newValue) {
this.open()
} else {
this.close()
}
}
},
created() {},
methods: {
clear() {},
open() {
this.$emit('change', {
show: true
})
this.showPopup = true
this.$nextTick(() => {
setTimeout(() => {
this.ani = 'uni-' + this.type
}, 30)
})
},
close(type) {
if (!this.maskClick && type) return
this.$emit('change', {
show: false
})
this.ani = ''
this.$nextTick(() => {
setTimeout(() => {
this.showPopup = false
}, 300)
})
}
}
}
</script>
<style>
@charset "UTF-8";
.uni-popup {
position: fixed;
top: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 99999;
overflow: hidden
}
.uni-popup__mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 998;
/* background: rgba(0, 0, 0, .4); */
opacity: 0
}
.uni-popup__mask.ani {
transition: all .3s
}
.uni-popup__mask.uni-bottom,
.uni-popup__mask.uni-center,
.uni-popup__mask.uni-top {
opacity: 1
}
.uni-popup__wrapper {
position: absolute;
z-index: 999;
box-sizing: border-box
}
.uni-popup__wrapper.ani {
transition: all .3s
}
.uni-popup__wrapper.top {
top: 0;
left: 0;
width: 100%;
transform: translateY(-100%)
}
.uni-popup__wrapper.bottom {
bottom: 0;
left: 0;
width: 100%;
transform: translateY(100%)
}
.uni-popup__wrapper.center {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transform: scale(1.2);
opacity: 0
}
.uni-popup__wrapper-box {
position: relative;
box-sizing: border-box
}
.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
padding: 30upx;
background: #fff
}
.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
position: relative;
max-width: 80%;
max-height: 80%;
overflow-y: scroll
}
.uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box,
.uni-popup__wrapper.uni-custom.top .uni-popup__wrapper-box {
width: 100%;
max-height: 500px;
overflow-y: scroll
}
.uni-popup__wrapper.uni-bottom,
.uni-popup__wrapper.uni-top {
transform: translateY(0)
}
.uni-popup__wrapper.uni-center {
transform: scale(1);
opacity: 1
}
</style>

227
components/limeClipper/README.md Normal file
View File

@ -0,0 +1,227 @@
> 插件来源：[https://ext.dcloud.net.cn/plugin?id=3594](https://ext.dcloud.net.cn/plugin?id=3594)
##### 以下是作者写的插件介绍：
# Clipper 图片裁剪
> uniapp 图片裁剪，可用于图片头像等裁剪处理
> [查看更多](http://liangei.gitee.io/limeui/#/clipper) <br>
> Q群：458377637
## 平台兼容
| H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
| --- | ---------- | ------------ | ---------- | ---------- | --------- | --- |
| √ | √ | √ | 未测 | √ | √ | √ |
## 代码演示
### 基本用法
`@success` 事件点击 👉 **确定** 后会返回生成的图片信息，包含 `url`、`width`、`height`
```html
<image :src="url" v-if="url" mode="widthFix"></image>
<l-clipper v-if="show" @success="url = $event.url; show = false" @cancel="show = false" ></l-clipper>
<button @tap="show = true">裁剪</button>
```
```js
// 非uni_modules引入
import lClipper from '@/components/lime-clipper/'
// uni_modules引入
import lClipper from '@/uni_modules/lime-clipper/components/lime-clipper/'
export default {
components: {lClipper},
data() {
return {
show: false,
url: '',
}
}
}
```
### 传入图片
`image-url`可传入**相对路径**、**临时路径**、**本地路径**、**网络图片**<br>
* **当为网络地址时**
* H5：👉 需要解决跨域问题。 <br>
* 小程序：👉 需要配置 downloadFile 域名 <br>
```html
<image :src="url" v-if="url" mode="widthFix"></image>
<l-clipper v-if="show" :image-url="imageUrl" @success="url = $event.url; show = false" @cancel="show = false" ></l-clipper>
<button @tap="show = true">裁剪</button>
```
```js
export default {
components: {lClipper},
data() {
return {
imageUrl: 'https://img12.360buyimg.com/pop/s1180x940_jfs/t1/97205/26/1142/87801/5dbac55aEf795d962/48a4d7a63ff80b8b.jpg',
show: false,
url: '',
}
}
}
```
### 确定按钮颜色
样式变量名：`--l-clipper-confirm-color`
可放到全局样式的 `page` 里或节点的 `style`
```html
<l-clipper class="clipper" style="--l-clipper-confirm-color: linear-gradient(to right, #ff6034, #ee0a24)" ></l-clipper>
```
```css
// css 中为组件设置 CSS 变量
.clipper {
--l-clipper-confirm-color: linear-gradient(to right, #ff6034, #ee0a24)
}
// 全局
page {
--l-clipper-confirm-color: linear-gradient(to right, #ff6034, #ee0a24)
}
```
### 使用插槽
共五个插槽 `cancel` 取消按钮、 `photo` 选择图片按钮、 `rotate` 旋转按钮、 `confirm` 确定按钮和默认插槽。
```html
<image :src="url" v-if="url" mode="widthFix"></image>
<l-clipper
v-if="show"
:isLockWidth="isLockWidth"
:isLockHeight="isLockHeight"
:isLockRatio="isLockRatio"
:isLimitMove="isLimitMove"
:isDisableScale="isDisableScale"
:isDisableRotate="isDisableRotate"
:isShowCancelBtn="isShowCancelBtn"
:isShowPhotoBtn="isShowPhotoBtn"
:isShowRotateBtn="isShowRotateBtn"
:isShowConfirmBtn="isShowConfirmBtn"
@success="url = $event.url; show = false"
@cancel="show = false" >
<!-- 四个基本按钮插槽 -->
<view slot="cancel">取消</view>
<view slot="photo">选择图片</view>
<view slot="rotate">旋转</view>
<view slot="confirm">确定</view>
<!-- 默认插槽 -->
<view class="tools">
<view>显示取消按钮
<switch :checked="isShowCancelBtn" @change="isShowCancelBtn = $event.target.value" ></switch>
</view>
<view>显示选择图片按钮
<switch :checked="isShowPhotoBtn" @change="isShowPhotoBtn = $event.target.value" ></switch>
</view>
<view>显示旋转按钮
<switch :checked="isShowRotateBtn" @change="isShowRotateBtn = $event.target.value" ></switch>
</view>
<view>显示确定按钮
<switch :checked="isShowConfirmBtn" @change="isShowConfirmBtn = $event.target.value" ></switch>
</view>
<view>锁定裁剪框宽度
<switch :checked="isLockWidth" @change="isLockWidth = $event.target.value" ></switch>
</view>
<view>锁定裁剪框高度
<switch :checked="isLockHeight" @change="isLockHeight = $event.target.value" ></switch>
</view>
<view>锁定裁剪框比例
<switch :checked="isLockRatio" @change="isLockRatio = $event.target.value" ></switch>
</view>
<view>限制移动范围
<switch :checked="isLimitMove" @change="isLimitMove = $event.target.value" ></switch>
</view>
<view>禁止缩放
<switch :checked="isDisableScale" @change="isDisableScale = $event.target.value" ></switch>
</view>
<view>禁止旋转
<switch :checked="isDisableRotate" @change="isDisableRotate = $event.target.value" ></switch>
</view>
</view>
</l-clipper>
<button @tap="show = true">裁剪</button>
```
```js
export default {
components: {lClipper},
data() {
return {
show: false,
url: '',
isLockWidth: false,
isLockHeight: false,
isLockRatio: true,
isLimitMove: false,
isDisableScale: false,
isDisableRotate: false,
isShowCancelBtn: true,
isShowPhotoBtn: true,
isShowRotateBtn: true,
isShowConfirmBtn: true
}
}
}
```
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
| ------------- | ------------ | ---------------- | ------------ |
| image-url | 图片路径 | <em>string</em> | |
| quality | 图片的质量，取值范围为 [0, 1]，不在范围内时当作1处理 | <em>number</em> | `1` |
| source | `{album: '从相册中选择'}`key为图片来源类型，value为选项说明 | <em>Object</em> | |
| width | 裁剪框宽度，单位为 `rpx` | <em>number</em> | `400` |
| height | 裁剪框高度 | <em>number</em> | `400` |
| min-width | 裁剪框最小宽度 | <em>number</em> | `200` |
| min-height |裁剪框最小高度 | <em>number</em> | `200` |
| max-width | 裁剪框最大宽度 | <em>number</em> | `600` |
| max-height | 裁剪框最大宽度 | <em>number</em> | `600` |
| min-ratio | 图片最小缩放比 | <em>number</em> | `0.5` |
| max-ratio | 图片最大缩放比 | <em>number</em> | `2` |
| rotate-angle | 旋转按钮每次旋转的角度 | <em>number</em> | `90` |
| scale-ratio | 生成图片相对于裁剪框的比例， **比例越高生成图片越清晰** | <em>number</em> | `1` |
| is-lock-width | 是否锁定裁剪框宽度 | <em>boolean</em> | `false` |
| is-lock-height | 是否锁定裁剪框高度上 | <em>boolean</em> | `false` |
| is-lock-ratio | 是否锁定裁剪框比例 | <em>boolean</em> | `true` |
| is-disable-scale | 是否禁止缩放 | <em>boolean</em> | `false` |
| is-disable-rotate | 是否禁止旋转 | <em>boolean</em> | `false` |
| is-limit-move | 是否限制移动范围 | <em>boolean</em> | `false` |
| is-show-photo-btn | 是否显示选择图片按钮 | <em>boolean</em> | `true` |
| is-show-rotate-btn | 是否显示转按钮 | <em>boolean</em> | `true` |
| is-show-confirm-btn | 是否显示确定按钮 | <em>boolean</em> | `true` |
| is-show-cancel-btn | 是否显示关闭按钮 | <em>boolean</em> | `true` |
### 事件 Events
| 事件名 | 说明 | 回调 |
| ------- | ------------ | -------------- |
| success | 生成图片成功 | {`width`, `height`, `url`} |
| fail | 生成图片失败 | `error` |
| cancel | 关闭 | `false` |
| ready | 图片加载完成 | {`width`, `height`, `path`, `orientation`, `type`} |
| change | 图片大小改变时触发 | {`width`, `height`} |
| rotate | 图片旋转时触发 | `angle` |
## 常见问题
> 1、H5端使用网络图片需要解决跨域问题。<br>
> 2、小程序使用网络图片需要去公众平台增加下载白名单！二级域名也需要配！<br>
> 3、H5端生成图片是base64，有时显示只有一半可以使用原生标签`<IMG/>`<br>
> 4、IOS APP 请勿使用HBX2.9.3.20201014的版本！这个版本无法生成图片。<br>
> 5、APP端无成功反馈、也无失败反馈时，请更新基座和HBX。<br>
## 打赏
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。<br>
![输入图片说明](https://images.gitee.com/uploads/images/2020/1122/222521_bb543f96_518581.jpeg "微信图片编辑_20201122220352.jpg")

19
components/limeClipper/images/photo.svg Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
<style type="text/css">
.st0{fill:#606060;}
.st1{fill:none;stroke:#FFFFFF;stroke-width:2.4306;stroke-miterlimit:10;}
.st2{fill:#FFFFFF;}
</style>
<g>
<path class="st2" d="M11.6,11c0.4,0.4,0.6,0.9,0.6,1.5c0,0.6-0.2,1.1-0.6,1.4c-0.4,0.4-0.9,0.6-1.5,0.6c-0.6,0-1.1-0.2-1.5-0.6
c-0.4-0.4-0.6-0.9-0.6-1.4s0.2-1.1,0.6-1.5c0.4-0.4,0.9-0.6,1.5-0.6C10.8,10.4,11.2,10.6,11.6,11z M24.6,18.4V6.7H5.4v12l1.8-1.8
c0.3-0.3,0.6-0.4,1-0.4c0.4,0,0.7,0.1,1,0.4l1.8,1.8l5.8-7c0.3-0.3,0.6-0.5,1.1-0.5c0.4,0,0.8,0.2,1.1,0.5
C18.8,11.6,24.6,18.4,24.6,18.4z M25.6,5.7C25.9,6,26,6.3,26,6.7v16.1c0,0.4-0.1,0.7-0.4,1c-0.3,0.3-0.6,0.4-1,0.4H5.4
c-0.4,0-0.7-0.1-1-0.4c-0.3-0.3-0.4-0.6-0.4-1V6.7c0-0.4,0.1-0.7,0.4-1c0.3-0.3,0.6-0.4,1-0.4h19.3C25,5.3,25.3,5.4,25.6,5.7z"/>
<path class="st1" d="M24.3,21.5H5.7c-0.2,0-0.3-0.2-0.3-0.3V7c0-0.2,0.2-0.3,0.3-0.3h18.6c0.2,0,0.3,0.2,0.3,0.3v14.2
C24.6,21.3,24.5,21.5,24.3,21.5z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

15
components/limeClipper/images/rotate.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30px" height="30px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:2.4306;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;}
</style>
<g>
<path class="st0" d="M17.1,24.2h-12c-0.2,0-0.3-0.2-0.3-0.3v-9.3c0-0.2,0.2-0.3,0.3-0.3h12c0.2,0,0.3,0.2,0.3,0.3v9.3
C17.5,24.1,17.3,24.2,17.1,24.2z"/>
<path class="st0" d="M16.6,5.4c4.8,0,8.7,3.9,8.7,8.7"/>
<polyline class="st0" points="19.3,10.1 14.9,5.6 19.3,1.2 "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 806 B

160
components/limeClipper/index.css Normal file
View File

@ -0,0 +1,160 @@
.flex-auto {
flex: auto;
}
.bg-transparent {
background-color: rgba(0,0,0,0.9);
transition-duration: 0.35s;
}
.l-clipper {
width: 100vw;
height: calc(100vh - var(--window-top));
background-color: rgba(0,0,0,0.9);
position: fixed;
top: var(--window-top);
left: 0;
z-index: 1;
}
.l-clipper-mask {
position: relative;
z-index: 2;
pointer-events: none;
}
.l-clipper__content {
pointer-events: none;
position: absolute;
border: 1rpx solid rgba(255,255,255,0.3);
box-sizing: border-box;
box-shadow: rgba(0,0,0,0.5) 0 0 0 80vh;
background: transparent;
}
.l-clipper__content::before,
.l-clipper__content::after {
content: '';
position: absolute;
border: 1rpx dashed rgba(255,255,255,0.3);
}
.l-clipper__content::before {
width: 100%;
top: 33.33%;
height: 33.33%;
border-left: none;
border-right: none;
}
.l-clipper__content::after {
width: 33.33%;
left: 33.33%;
height: 100%;
border-top: none;
border-bottom: none;
}
.l-clipper__edge {
position: absolute;
width: 34rpx;
height: 34rpx;
border: 6rpx solid #fff;
pointer-events: auto;
}
.l-clipper__edge::before {
content: '';
position: absolute;
width: 40rpx;
height: 40rpx;
background-color: transparent;
}
.l-clipper__edge:nth-child(1) {
left: -6rpx;
top: -6rpx;
border-bottom-width: 0 !important;
border-right-width: 0 !important;
}
.l-clipper__edge:nth-child(1):before {
top: -50%;
left: -50%;
}
.l-clipper__edge:nth-child(2) {
right: -6rpx;
top: -6rpx;
border-bottom-width: 0 !important;
border-left-width: 0 !important;
}
.l-clipper__edge:nth-child(2):before {
top: -50%;
left: 50%;
}
.l-clipper__edge:nth-child(3) {
left: -6rpx;
bottom: -6rpx;
border-top-width: 0 !important;
border-right-width: 0 !important;
}
.l-clipper__edge:nth-child(3):before {
bottom: -50%;
left: -50%;
}
.l-clipper__edge:nth-child(4) {
right: -6rpx;
bottom: -6rpx;
border-top-width: 0 !important;
border-left-width: 0 !important;
}
.l-clipper__edge:nth-child(4):before {
bottom: -50%;
left: 50%;
}
.l-clipper-image {
width: 100%;
border-style: none;
position: absolute;
top: 0;
left: 0;
z-index: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform-origin: center;
}
.l-clipper-canvas {
position: fixed;
z-index: 10;
left: -200vw;
top: -200vw;
pointer-events: none;
}
.l-clipper-tools {
position: fixed;
left: 0;
bottom: 10px;
width: 100%;
z-index: 99;
color: #fff;
}
.l-clipper-tools__btns {
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 20rpx 40rpx;
box-sizing: border-box;
}
.l-clipper-tools__btns .cancel {
width: 112rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
}
.l-clipper-tools__btns .confirm {
width: 112rpx;
height: 60rpx;
line-height: 60rpx;
background-color: #07c160;
border-radius: 6rpx;
text-align: center;
}
.l-clipper-tools__btns image {
display: block;
width: 60rpx;
height: 60rpx;
}
.l-clipper-tools__btns {
flex-direction: row;
}

817
components/limeClipper/limeClipper.vue Normal file
View File

@ -0,0 +1,817 @@
<template>
<view class="l-clipper" :class="{open: value}" disable-scroll :style="'z-index: ' + zIndex + ';' + customStyle">
<view class="l-clipper-mask" @touchstart.stop.prevent="clipTouchStart" @touchmove.stop.prevent="clipTouchMove" @touchend.stop.prevent="clipTouchEnd">
<view class="l-clipper__content" :style="clipStyle"><view class="l-clipper__edge" v-for="(item, index) in [0, 0, 0, 0]" :key="index"></view></view>
</view>
<image
class="l-clipper-image"
@error="imageLoad"
@load="imageLoad"
@touchstart.stop.prevent="imageTouchStart"
@touchmove.stop.prevent="imageTouchMove"
@touchend.stop.prevent="imageTouchEnd"
:src="image"
:mode="imageWidth == 'auto' ? 'widthFix' : ''"
v-if="image"
:style="imageStyle"
/>
<canvas
:canvas-id="canvasId"
id="l-clipper"
disable-scroll
:style="'width: ' + canvasWidth * scaleRatio + 'px; height:' + canvasHeight * scaleRatio + 'px;'"
class="l-clipper-canvas"
></canvas>
<view class="l-clipper-tools">
<view class="l-clipper-tools__btns">
<view v-if="isShowCancelBtn" @tap="cancel">
<slot name="cancel" v-if="$slots.cancel" />
<view v-else class="cancel">取消</view>
</view>
<view v-if="isShowPhotoBtn" @tap="uploadImage">
<slot name="photo" v-if="$slots.photo" />
<image v-else src="@/static/limeClipper/photo.svg" />
</view>
<view v-if="isShowRotateBtn" @tap="rotate">
<slot name="rotate" v-if="$slots.rotate" />
<image v-else src="@/static/limeClipper/rotate.svg" data-type="inverse" />
</view>
<view v-if="isShowConfirmBtn" @tap="confirm">
<slot name="confirm" v-if="$slots.confirm" />
<view v-else class="confirm">确定</view>
</view>
</view>
<slot></slot>
</view>
</view>
</template>
<script>
import { determineDirection, calcImageOffset, calcImageScale, calcImageSize, calcPythagoreanTheorem, clipTouchMoveOfCalculate, imageTouchMoveOfCalcOffset } from './utils';
const cache = {}
export default {
// version: '0.6.3',
name: 'l-clipper',
props: {
value: {
type: Boolean,
default: true
},
// #ifdef MP-WEIXIN
type: {
type: String,
default: '2d'
},
// #endif
customStyle: {
type: String,
},
canvasId: {
type: String,
default: 'l-clipper'
},
zIndex: {
type: Number,
default: 99
},
imageUrl: {
type: String
},
fileType: {
type: String,
default: 'png'
},
quality: {
type: Number,
default: 1
},
width: {
type: Number,
default: 400
},
height: {
type: Number,
default: 400
},
minWidth: {
type: Number,
default: 200
},
maxWidth: {
type: Number,
default: 600
},
minHeight: {
type: Number,
default: 200
},
maxHeight: {
type: Number,
default: 600
},
isLockWidth: {
type: Boolean,
default: false
},
isLockHeight: {
type: Boolean,
default: false
},
isLockRatio: {
type: Boolean,
default: true
},
scaleRatio: {
type: Number,
default: 1
},
minRatio: {
type: Number,
default: 0.5
},
maxRatio: {
type: Number,
default: 2
},
isDisableScale: {
type: Boolean,
default: false
},
isDisableRotate: {
type: Boolean,
default: false
},
isLimitMove: {
type: Boolean,
default: false
},
isShowPhotoBtn: {
type: Boolean,
default: true
},
isShowRotateBtn: {
type: Boolean,
default: true
},
isShowConfirmBtn: {
type: Boolean,
default: true
},
isShowCancelBtn: {
type: Boolean,
default: true
},
rotateAngle: {
type: Number,
default: 90
},
source: {
type: Object,
default: () => ({
album: '从相册中选择',
camera: '拍照',
// #ifdef MP-WEIXIN
message: '从微信中选择'
// #endif
})
}
},
data() {
return {
canvasWidth: 0,
canvasHeight: 0,
clipX: 0,
clipY: 0,
clipWidth: 0,
clipHeight: 0,
animation: false,
imageWidth: 0,
imageHeight: 0,
imageTop: 0,
imageLeft: 0,
scale: 1,
angle: 0,
image: this.imageUrl,
sysinfo: {},
throttleTimer: null,
throttleFlag: true,
timeClipCenter: null,
flagClipTouch: false,
flagEndTouch: false,
clipStart: {},
animationTimer: null,
touchRelative: [{x: 0,y: 0}],
hypotenuseLength: 0,
ctx: null
};
},
computed: {
clipStyle() {
const {clipWidth, clipHeight, clipY, clipX, animation} = this
return `
width: ${clipWidth}px;
height:${clipHeight}px;
transition-property: ${animation ? '' : 'background'};
left: ${clipX}px;
top: ${clipY}px
`
},
imageStyle() {
const {imageWidth, imageHeight, imageLeft, imageTop, animation, scale, angle} = this
return `
width: ${imageWidth ? imageWidth + 'px' : 'auto'};
height: ${imageHeight ? imageHeight + 'px' : 'auto'};
transform: translate3d(${imageLeft - imageWidth / 2}px, ${imageTop - imageHeight / 2}px, 0) scale(${scale}) rotate(${angle}deg);
transition-duration: ${animation ? 0.35 : 0}s
`
},
clipSize() {
const { clipWidth, clipHeight } = this;
return { clipWidth, clipHeight };
},
clipPoint() {
const { clipY, clipX } = this;
return { clipY, clipX };
}
},
watch: {
value(val) {
if(!val) {
this.animation = 0
this.angle = 0
} else {
if(this.imageUrl) {
const {imageWidth, imageHeight, imageLeft, imageTop, scale, clipX, clipY, clipWidth, clipHeight, path} = cache?.[this.imageUrl] || {}
if(path != this.image) {
this.image = this.imageUrl;
} else {
this.setDiffData({imageWidth, imageHeight, imageLeft, imageTop, scale, clipX, clipY, clipWidth, clipHeight})
}
}
}
},
imageUrl(url) {
this.image = url
},
image:{
handler: async function(url) {
this.getImageInfo(url)
},
// immediate: true,
},
clipSize({ widthVal, heightVal }) {
let { minWidth, minHeight } = this;
minWidth = minWidth / 2;
minHeight = minHeight / 2;
if (widthVal < minWidth) {
this.setDiffData({clipWidth: minWidth})
}
if (heightVal < minHeight) {
this.setDiffData({clipHeight: minHeight})
}
this.calcClipSize();
},
angle(val) {
this.animation = true;
this.moveStop();
const { isLimitMove } = this;
if (isLimitMove && val % 90) {
this.setDiffData({
angle: Math.round(val / 90) * 90
})
}
this.imgMarginDetectionScale();
},
animation(val) {
clearTimeout(this.animationTimer);
if (val) {
let animationTimer = setTimeout(() => {
this.setDiffData({
animation: false
})
}, 260);
this.setDiffData({animationTimer})
this.animationTimer = animationTimer;
}
},
isLimitMove(val) {
if (val) {
if (this.angle % 90) {
this.setDiffData({
angle : Math.round(this.angle / 90) * 90
})
}
this.imgMarginDetectionScale();
}
},
clipPoint() {
this.cutDetectionPosition();
},
width(width, oWidth) {
if (width !== oWidth) {
this.setDiffData({
clipWidth: width / 2
})
}
},
height(height, oHeight) {
if (height !== oHeight) {
this.setDiffData({
clipHeight: height / 2
})
}
}
},
mounted() {
const sysinfo = uni.getSystemInfoSync();
this.sysinfo = sysinfo;
this.setClipInfo();
if(this.image) {
this.getImageInfo(this.image)
}
this.setClipCenter();
this.calcClipSize();
this.cutDetectionPosition();
},
methods: {
setDiffData(data) {
Object.keys(data).forEach(key => {
if (this[key] !== data[key]) {
this[key] = data[key];
}
});
},
getImageInfo(url) {
if (!url) return;
if(this.value) {
uni.showLoading({
title: '请稍候...',
mask: true
});
}
uni.getImageInfo({
src: url,
success: res => {
this.imgComputeSize(res.width, res.height);
this.image = res.path;
if (this.isLimitMove) {
this.imgMarginDetectionScale();
this.$emit('ready', res);
}
const {imageWidth, imageHeight, imageLeft, imageTop, scale, clipX, clipY, clipWidth, clipHeight} = this
cache[url] = Object.assign(res, {imageWidth, imageHeight, imageLeft, imageTop, scale, clipX, clipY, clipWidth, clipHeight});
},
fail: (err) => {
this.imgComputeSize();
if (this.isLimitMove) {
this.imgMarginDetectionScale();
}
}
});
},
setClipInfo() {
const { width, height, sysinfo, canvasId } = this;
const clipWidth = width / 2;
const clipHeight = height / 2;
const clipY = (sysinfo.windowHeight - clipHeight) / 2;
const clipX = (sysinfo.windowWidth - clipWidth) / 2;
const imageLeft = sysinfo.windowWidth / 2;
const imageTop = sysinfo.windowHeight / 2;
this.ctx = uni.createCanvasContext(canvasId, this);
this.clipWidth = clipWidth;
this.clipHeight = clipHeight;
this.clipX = clipX;
this.clipY = clipY;
this.canvasHeight = clipHeight;
this.canvasWidth = clipWidth;
this.imageLeft = imageLeft;
this.imageTop = imageTop;
},
setClipCenter() {
const { sysInfo, clipHeight, clipWidth, imageTop, imageLeft } = this;
let sys = sysInfo || uni.getSystemInfoSync();
let clipY = (sys.windowHeight - clipHeight) * 0.5;
let clipX = (sys.windowWidth - clipWidth) * 0.5;
this.imageTop = imageTop - this.clipY + clipY;
this.imageLeft = imageLeft - this.clipX + clipX;
this.clipY = clipY;
this.clipX = clipX;
},
calcClipSize() {
const { clipHeight, clipWidth, sysinfo, clipX, clipY } = this;
if (clipWidth > sysinfo.windowWidth) {
this.setDiffData({
clipWidth: sysinfo.windowWidth
})
} else if (clipWidth + clipX > sysinfo.windowWidth) {
this.setDiffData({
clipX: sysinfo.windowWidth - clipX
})
}
if (clipHeight > sysinfo.windowHeight) {
this.setDiffData({
clipHeight: sysinfo.windowHeight
})
} else if (clipHeight + clipY > sysinfo.windowHeight) {
this.clipY = sysinfo.windowHeight - clipY;
this.setDiffData({
clipY: sysinfo.windowHeight - clipY
})
}
},
cutDetectionPosition() {
const { clipX, clipY, sysinfo, clipHeight, clipWidth } = this;
let cutDetectionPositionTop = () => {
if (clipY < 0) {
this.setDiffData({clipY: 0})
}
if (clipY > sysinfo.windowHeight - clipHeight) {
this.setDiffData({clipY: sysinfo.windowHeight - clipHeight})
}
},
cutDetectionPositionLeft = () => {
if (clipX < 0) {
this.setDiffData({clipX: 0})
}
if (clipX > sysinfo.windowWidth - clipWidth) {
this.setDiffData({clipX: sysinfo.windowWidth - clipWidth})
}
};
if (clipY === null && clipX === null) {
let newClipY = (sysinfo.windowHeight - clipHeight) * 0.5;
let newClipX = (sysinfo.windowWidth - clipWidth) * 0.5;
this.setDiffData({
clipX: newClipX,
clipY: newClipY
})
} else if (clipY !== null && clipX !== null) {
cutDetectionPositionTop();
cutDetectionPositionLeft();
} else if (clipY !== null && clipX === null) {
cutDetectionPositionTop();
this.setDiffData({
clipX: (sysinfo.windowWidth - clipWidth) / 2
})
} else if (clipY === null && clipX !== null) {
cutDetectionPositionLeft();
this.setDiffData({
clipY: (sysinfo.windowHeight - clipHeight) / 2
})
}
},
imgComputeSize(width, height) {
const { imageWidth, imageHeight } = calcImageSize(width, height, this);
this.imageWidth = imageWidth;
this.imageHeight = imageHeight;
},
imgMarginDetectionScale(scale) {
if (!this.isLimitMove) return;
const currentScale = calcImageScale(this, scale);
this.imgMarginDetectionPosition(currentScale);
},
imgMarginDetectionPosition(scale) {
if (!this.isLimitMove) return;
const { scale: currentScale, left, top } = calcImageOffset(this, scale);
this.setDiffData({
imageLeft: left,
imageTop: top,
scale: currentScale
})
},
throttle() {
this.setDiffData({
throttleFlag: true
})
},
moveDuring() {
clearTimeout(this.timeClipCenter);
},
moveStop() {
clearTimeout(this.timeClipCenter);
const timeClipCenter = setTimeout(() => {
if (!this.animation) {
this.setDiffData({animation: true})
}
this.setClipCenter();
}, 800);
this.setDiffData({timeClipCenter})
},
clipTouchStart(event) {
// #ifdef H5
event.preventDefault()
// #endif
if (!this.image) {
uni.showToast({
title: '请选择图片',
icon: 'none'
});
return;
}
const currentX = event.touches[0].clientX;
const currentY = event.touches[0].clientY;
const { clipX, clipY, clipWidth, clipHeight } = this;
const corner = determineDirection(clipX, clipY, clipWidth, clipHeight, currentX, currentY);
this.moveDuring();
if(!corner) {return}
this.clipStart = {
width: clipWidth,
height: clipHeight,
x: currentX,
y: currentY,
clipY,
clipX,
corner
};
this.flagClipTouch = true;
this.flagEndTouch = true;
},
clipTouchMove(event) {
// #ifdef H5
event.stopPropagation()
event.preventDefault()
// #endif
if (!this.image) {
uni.showToast({
title: '请选择图片',
icon: 'none'
});
return;
}
// 只针对单指点击做处理
if (event.touches.length !== 1) {
return;
}
const { flagClipTouch, throttleFlag } = this;
if (flagClipTouch && throttleFlag) {
const { isLockRatio, isLockHeight, isLockWidth } = this;
if (isLockRatio && (isLockWidth || isLockHeight)) return;
this.setDiffData({
throttleFlag: false
})
this.throttle();
const clipData = clipTouchMoveOfCalculate(this, event);
if(clipData) {
const { width, height, clipX, clipY } = clipData;
if (!isLockWidth && !isLockHeight) {
this.setDiffData({
clipWidth: width,
clipHeight: height,
clipX,
clipY
})
} else if (!isLockWidth) {
this.setDiffData({
clipWidth: width,
clipX
})
} else if (!isLockHeight) {
this.setDiffData({
clipHeight: height,
clipY
})
}
this.imgMarginDetectionScale();
}
}
},
clipTouchEnd() {
this.moveStop();
this.flagClipTouch = false;
},
imageTouchStart(e) {
// #ifdef H5
event.preventDefault()
// #endif
this.flagEndTouch = false;
const { imageLeft, imageTop } = this;
const clientXForLeft = e.touches[0].clientX;
const clientYForLeft = e.touches[0].clientY;
let touchRelative = [];
if (e.touches.length === 1) {
touchRelative[0] = {
x: clientXForLeft - imageLeft,
y: clientYForLeft - imageTop
};
this.touchRelative = touchRelative;
} else {
const clientXForRight = e.touches[1].clientX;
const clientYForRight = e.touches[1].clientY;
let width = Math.abs(clientXForLeft - clientXForRight);
let height = Math.abs(clientYForLeft - clientYForRight);
const hypotenuseLength = calcPythagoreanTheorem(width, height);
touchRelative = [
{
x: clientXForLeft - imageLeft,
y: clientYForLeft - imageTop
},
{
x: clientXForRight - imageLeft,
y: clientYForRight - imageTop
}
];
this.touchRelative = touchRelative;
this.hypotenuseLength = hypotenuseLength;
}
},
imageTouchMove(e) {
// #ifdef H5
event.preventDefault()
// #endif
const { flagEndTouch, throttleFlag } = this;
if (flagEndTouch || !throttleFlag) return;
const clientXForLeft = e.touches[0].clientX;
const clientYForLeft = e.touches[0].clientY;
this.setDiffData({throttleFlag: false})
this.throttle();
this.moveDuring();
if (e.touches.length === 1) {
const { left: imageLeft, top: imageTop} = imageTouchMoveOfCalcOffset(this, clientXForLeft, clientYForLeft);
this.setDiffData({
imageLeft,
imageTop
})
this.imgMarginDetectionPosition();
} else {
const clientXForRight = e.touches[1].clientX;
const clientYForRight = e.touches[1].clientY;
let width = Math.abs(clientXForLeft - clientXForRight),
height = Math.abs(clientYForLeft - clientYForRight),
hypotenuse = calcPythagoreanTheorem(width, height),
scale = this.scale * (hypotenuse / this.hypotenuseLength);
if (this.isDisableScale) {
scale = 1;
} else {
scale = scale <= this.minRatio ? this.minRatio : scale;
scale = scale >= this.maxRatio ? this.maxRatio : scale;
this.$emit('change', {
width: this.imageWidth * scale,
height: this.imageHeight * scale
});
}
this.imgMarginDetectionScale(scale);
this.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
this.scale = scale;
}
},
imageTouchEnd() {
this.setDiffData({
flagEndTouch: true
})
this.moveStop();
},
uploadImage() {
const itemList = Object.entries(this.source)
const sizeType = ['original', 'compressed']
const success = ({tempFilePaths:a, tempFiles: b}) => {
this.image = a ? a[0] : b[0].path
};
const _uploadImage = (type) => {
if(type !== 'message') {
uni.chooseImage({
count: 1,
sizeType,
sourceType: [type],
success
});
}
// #ifdef MP-WEIXIN
if(type == 'message') {
wx.chooseMessageFile({
count: 1,
type: 'image',
success
})
}
// #endif
}
if(itemList.length > 1) {
uni.showActionSheet({
itemList: itemList.map(v => v[1]),
success: ({tapIndex: i}) => {
_uploadImage(itemList[i][0])
}
})
} else {
_uploadImage(itemList[0][0])
}
},
imageReset() {
const sys = this.sysinfo || uni.getSystemInfoSync();
this.scale = 1;
this.angle = 0;
this.imageTop = sys.windowHeight / 2;
this.imageLeft = sys.windowWidth / 2;
},
imageLoad(e) {
this.imageReset();
uni.hideLoading();
this.$emit('ready', e.detail);
},
rotate(event) {
if (this.isDisableRotate) return;
if (!this.image) {
uni.showToast({
title: '请选择图片',
icon: 'none'
});
return;
}
const { rotateAngle } = this;
const originAngle = this.angle
const type = event.currentTarget.dataset.type;
if (type === 'along') {
this.angle = originAngle + rotateAngle
} else {
this.angle = originAngle - rotateAngle
}
this.$emit('rotate', this.angle);
},
confirm() {
if (!this.image) {
uni.showToast({
title: '请选择图片',
icon: 'none'
});
return;
}
uni.showLoading({
title: '加载中'
});
const { canvasHeight, canvasWidth, clipHeight, clipWidth, ctx, scale, imageLeft, imageTop, clipX, clipY, angle, scaleRatio: dpr, image, quality, fileType, type: imageType, canvasId } = this;
const draw = () => {
const imageWidth = this.imageWidth * scale * dpr;
const imageHeight = this.imageHeight * scale * dpr;
const xpos = imageLeft - clipX;
const ypos = imageTop - clipY;
ctx.translate(xpos * dpr, ypos * dpr);
ctx.rotate((angle * Math.PI) / 180);
ctx.drawImage(image, -imageWidth / 2, -imageHeight / 2, imageWidth, imageHeight);
ctx.draw(false, () => {
const width = clipWidth * dpr
const height = clipHeight * dpr
let params = {
x: 0,
y: 0,
width,
height,
destWidth: width,
destHeight: height,
canvasId: canvasId,
fileType,
quality,
success: (res) => {
console.log( res.tempFilePath,' res.tempFilePath')
data.url = res.tempFilePath;
uni.hideLoading();
this.$emit('success', data);
this.$emit('input', false)
},
fail: (error) => {
console.error('error', error)
this.$emit('fail', error);
this.$emit('input', false)
}
};
let data = {
url: '',
width,
height
};
uni.canvasToTempFilePath(params, this)
});
};
if (canvasWidth !== clipWidth || canvasHeight !== clipHeight) {
this.canvasWidth = clipWidth;
this.canvasHeight = clipHeight;
ctx.draw();
this.$nextTick(() => {
setTimeout(() => {
draw();
}, 100);
})
} else {
draw();
}
},
cancel() {
this.$emit('cancel', false)
this.$emit('input', false)
},
}
};
</script>
<style scoped>
@import './index'
</style>

244
components/limeClipper/utils.js Normal file
View File

@ -0,0 +1,244 @@
/**
* 判断手指触摸位置
*/
export function determineDirection(clipX, clipY, clipWidth, clipHeight, currentX, currentY) {
/*
* (右下>>1 右上>>2 左上>>3 左下>>4)
*/
let corner;
/**
* 思路：（利用直角坐标系）
* 1.找出裁剪框中心点
* 2.如点击坐标在上方点与左方点区域内，则点击为左上角
* 3.如点击坐标在下方点与右方点区域内，则点击为右下角
* 4.其他角同理
*/
const mainPoint = [clipX + clipWidth / 2, clipY + clipHeight / 2]; // 中心点
const currentPoint = [currentX, currentY]; // 触摸点
if (currentPoint[0] <= mainPoint[0] && currentPoint[1] <= mainPoint[1]) {
corner = 3; // 左上
} else if (currentPoint[0] >= mainPoint[0] && currentPoint[1] <= mainPoint[1]) {
corner = 2; // 右上
} else if (currentPoint[0] <= mainPoint[0] && currentPoint[1] >= mainPoint[1]) {
corner = 4; // 左下
} else if (currentPoint[0] >= mainPoint[0] && currentPoint[1] >= mainPoint[1]) {
corner = 1; // 右下
}
return corner;
}
/**
* 图片边缘检测检测时，计算图片偏移量
*/
export function calcImageOffset(data, scale) {
let left = data.imageLeft;
let top = data.imageTop;
scale = scale || data.scale;
let imageWidth = data.imageWidth;
let imageHeight = data.imageHeight;
if ((data.angle / 90) % 2) {
imageWidth = data.imageHeight;
imageHeight = data.imageWidth;
}
const {
clipX,
clipWidth,
clipY,
clipHeight
} = data;
// 当前图片宽度/高度
const currentImageSize = (size) => (size * scale) / 2;
const currentImageWidth = currentImageSize(imageWidth);
const currentImageHeight = currentImageSize(imageHeight);
left = clipX + currentImageWidth >= left ? left : clipX + currentImageWidth;
left = clipX + clipWidth - currentImageWidth <= left ? left : clipX + clipWidth - currentImageWidth;
top = clipY + currentImageHeight >= top ? top : clipY + currentImageHeight;
top = clipY + clipHeight - currentImageHeight <= top ? top : clipY + clipHeight - currentImageHeight;
return {
left,
top,
scale
};
}
/**
* 图片边缘检测时，计算图片缩放比例
*/
export function calcImageScale(data, scale) {
scale = scale || data.scale;
let {
imageWidth,
imageHeight,
clipWidth,
clipHeight,
angle
} = data
if ((angle / 90) % 2) {
imageWidth = imageHeight;
imageHeight = imageWidth;
}
if (imageWidth * scale < clipWidth) {
scale = clipWidth / imageWidth;
}
if (imageHeight * scale < clipHeight) {
scale = Math.max(scale, clipHeight / imageHeight);
}
return scale;
}
/**
* 计算图片尺寸
*/
export function calcImageSize(width, height, data) {
let imageWidth = width,
imageHeight = height;
let {
clipWidth,
clipHeight,
sysinfo,
width: originWidth,
height: originHeight
} = data
if (imageWidth && imageHeight) {
if (imageWidth / imageHeight > (clipWidth || originWidth) / (clipWidth || originHeight)) {
imageHeight = clipHeight || originHeight;
imageWidth = (width / height) * imageHeight;
} else {
imageWidth = clipWidth || originWidth;
imageHeight = (height / width) * imageWidth;
}
} else {
let sys = sysinfo || uni.getSystemInfoSync();
imageWidth = sys.windowWidth;
imageHeight = 0;
}
return {
imageWidth,
imageHeight
};
}
/**
* 勾股定理求斜边
*/
export function calcPythagoreanTheorem(width, height) {
return Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
}
/**
* 拖动裁剪框时计算
*/
export function clipTouchMoveOfCalculate(data, event) {
const clientX = event.touches[0].clientX;
const clientY = event.touches[0].clientY;
let {
clipWidth,
clipHeight,
clipY: oldClipY,
clipX: oldClipX,
clipStart,
isLockRatio,
maxWidth,
minWidth,
maxHeight,
minHeight
} = data;
maxWidth = maxWidth / 2;
minWidth = minWidth / 2;
minHeight = minHeight / 2;
maxHeight = maxHeight / 2;
let width = clipWidth,
height = clipHeight,
clipY = oldClipY,
clipX = oldClipX,
// 获取裁剪框实际宽度/高度
// 如果大于最大值则使用最大值
// 如果小于最小值则使用最小值
sizecorrect = () => {
width = width <= maxWidth ? (width >= minWidth ? width : minWidth) : maxWidth;
height = height <= maxHeight ? (height >= minHeight ? height : minHeight) : maxHeight;
},
sizeinspect = () => {
sizecorrect();
if ((width > maxWidth || width < minWidth || height > maxHeight || height < minHeight) && isLockRatio) {
return false;
} else {
return true;
}
};
//if (clipStart.corner) {
height = clipStart.height + (clipStart.corner > 1 && clipStart.corner < 4 ? 1 : -1) * (clipStart.y - clientY);
//}
switch (clipStart.corner) {
case 1:
width = clipStart.width - clipStart.x + clientX;
if (isLockRatio) {
height = width / (clipWidth / clipHeight);
}
if (!sizeinspect()) return;
break;
case 2:
width = clipStart.width - clipStart.x + clientX;
if (isLockRatio) {
height = width / (clipWidth / clipHeight);
}
if (!sizeinspect()) {
return;
} else {
clipY = clipStart.clipY - (height - clipStart.height);
}
break;
case 3:
width = clipStart.width + clipStart.x - clientX;
if (isLockRatio) {
height = width / (clipWidth / clipHeight);
}
if (!sizeinspect()) {
return;
} else {
clipY = clipStart.clipY - (height - clipStart.height);
clipX = clipStart.clipX - (width - clipStart.width);
}
break;
case 4:
width = clipStart.width + clipStart.x - clientX;
if (isLockRatio) {
height = width / (clipWidth / clipHeight);
}
if (!sizeinspect()) {
return;
} else {
clipX = clipStart.clipX - (width - clipStart.width);
}
break;
default:
break;
}
return {
width,
height,
clipX,
clipY
};
}
/**
* 单指拖动图片计算偏移
*/
export function imageTouchMoveOfCalcOffset(data, clientXForLeft, clientYForLeft) {
let left = clientXForLeft - data.touchRelative[0].x,
top = clientYForLeft - data.touchRelative[0].y;
return {
left,
top
};
}

536
components/linzq-citySelect/film-citySelect.vue Normal file
View File

@ -0,0 +1,536 @@
<template>
<div class="wrapper" :style="'top:'+statusBarHeight+'px'">
<div class="header">
<view class="back_div" v-if="inputActive">
<image class="back_img" @click="back_city()" src="https://img.agrimedia.cn/chwl%2Fv2%2Fsearch.png" mode=""></image>
</view>
<input :class="inputActive? 'input':'input inputActive'" @input="onInput" placeholder="搜索城市名" v-model="searchValue" />
</div>
<scroll-view class="calendar-list" scroll-y="true" :scroll-into-view="scrollIntoId">
<view v-if="disdingwei" id="hot">
<!-- 定位模块 -->
<view class="dingwei">
<view class="dingwei_Tips">
当前城市
</view>
<view class="dingwei_city">
<view class="dingwei_city_one" @click="AtCity">
{{UserFilmArae['cityName']?UserFilmArae['cityName']:UserArae2['city']}}
</view>
</view>
</view>
<!-- 最近模块 -->
<view class="dingwei" v-if="Visit.length>=0">
<view class="dingwei_Tips">
最近搜索
</view>
<view class="dingwei_city dingwei_city_zuijin">
<view class="dingwei_city_one toright" v-for="(item,index) in Visit" :key="index" v-if="index<2" @click="back_city(item)">
{{item.cityName}}
</view>
</view>
</view>
</view>
<!-- 城市列表 -->
<view v-if="searchValue == ''" v-for="(item, index) in list" :id="getId(index)" :key="index">
<view class="letter-header">{{ getId(index) }}</view>
<view class="city-div" v-for="(city, i) in item" :key="i">
<view class="regionName" @click="back_city(city)">
{{city.cityName}}
</view>
</view>
</view>
<!-- 搜索结果 -->
<view class="city-div" v-for="(item, index) in searchList" :key="item.cityId">
<view class="regionName" @click="back_city(item)">
{{item.cityName}}
</view>
</view>
</view>
</scroll-view>
<!-- 右侧字母 -->
<view class="letters" v-if="searchValue == ''">
<view class="letters-item" v-for="item in letter" :key="item" @click="scrollTo(item)">{{ item }}</view>
</view>
<!-- 选中之后字母 -->
<view class="mask" v-if="showMask">
<view class="mask-r">{{selectLetter}}</view>
</view>
</div>
</template>
<script>
import { getFilmCity} from '@/request/film/index.js';
import { mapGetters} from 'vuex';
import Citys from '../city.js';
import { mapMutations } from 'vuex';
export default {
components: {},
props: {},
data() {
return {
statusBarHeight: this.statusBarHeight,
ImgUrl: this.ImgUrl,
letter: [],
selectLetter: '',
searchValue: '',
scrollIntoId: '',
list: [],
tId: null,
searchList: [],
showMask: false,
disdingwei: true,
Visit: [], //最近访问
position: '',
longitude: '', //经度
latitude: '', //纬度
seconds: 3,
po_tips: '重新定位',
citys:[],
hotCity:[],
inputActive: true
}
},
computed: {
...mapGetters({
// 获取用户自主选择的电影城市信息
UserFilmArae: 'GetFilmData',
// 获取用户设备定位的地址
UserArae2: 'GetcityInfor',
}),
},
created() {
getFilmCity().then(data=>{
this['citys'] = data['data'];
//获取存储的最近访问
var that = this
uni.getStorage({
key: 'Visit_key',
success: function(res) {
that.Visit = res.data
}
});
// this.position = this['getCityName'];
//获取定位 经度纬度
// that.getWarpweft()
//获取city.js 的程序字母
var mu = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'w', 'x', 'y', 'z'];
var tmp = [];
for (var i = 0; i < mu.length; i++) {
var item = mu[i];
for (var j = 0; j < this.citys.length; j++) {
var py = this.citys[j].firstLetter;
if (py.toLowerCase().substring(0, 1) == item) {
if (tmp.indexOf(item) == -1) {
this.list[i] = [this.citys[j]];
tmp.push(item);
this.letter.push(item.toUpperCase());
} else {
this.list[i].push(this.citys[j]);
}
}
}
}
})
},
methods: {
...mapMutations({
SETFILMDATA: 'SETFILMDATA',
}),
getId(index) {
return this.letter[index];
},
scrollTo(letter) {
this.showMask = true
this.selectLetter = letter == 'hot' ? '最' : letter
setTimeout(() => {
this.showMask = false
}, 300);
this.scrollIntoId = letter;
},
query(source, text) {
let res = [];
var self = this;
res = source.filter(item => {
const arr = [];
let isHave = false;
Object.keys(item).forEach(prop => {
const itemStr = item[prop];
self.isString(itemStr) &&
itemStr.split(',').forEach(val => {
arr.push(val);
});
});
arr.some(val => {
isHave = new RegExp('^' + text).test(val);
return isHave;
});
return isHave;
});
console.log(JSON.stringify(res));
return res;
},
isString(obj) {
return typeof obj === 'string';
},
onInput(e) {
const value = e.target.value;
console.log(value, '值');
if (value !== '' && this.citys && this.citys.length > 0) {
const queryData = this.query(this.citys, String(value).trim());
this.searchList = queryData;
this.disdingwei = false;
this.inputActive = false;
} else {
this.searchList = [];
this.disdingwei = true;
this.inputActive = true;
}
},
back_city(item, ind) {
if (item) {
const FilmCity = {
cityId: item.cityId,
cityName: item.cityName,
regionName: "",
regionId: ""
}
//unshift 把数据插入到首位，与push相反
if(this.Visit == null){
this.Visit = []
}
this.Visit.unshift(FilmCity)
this.searchValue = "";
this.disdingwei = true
var arr = this.Visit
//数组去重
function distinct(arr) {
let newArr = []
for (let i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) < 0) {
newArr.push(arr[i])
}
}
return newArr
}
this.Visit = distinct(arr)
console.log(this.Visit, "---最近访问")
uni.setStorage({
key: 'Visit_key',
data: this.Visit
});
this.SETFILMDATA(FilmCity);
// 保存之后退页
uni.navigateBack({
delta: 1
});
}
},
AtCity() {
uni.navigateBack({
delta: 1
});
},
getWarpweft() {
this.po_tips = '定位中'
this.$store.dispatch('location/getLocation').then(res => {
console.log(res,'locationinfo')
if(res != undefined){
this.$store.dispatch('location/getCityName2').then(res => {
this.po_tips = '重新定位';
// this.position = this['getCityName'];
})
}else{
this.po_tips = '定位失败'
}
})
return
var that = this
that.po_tips = '定位中...'
let qqmapsdk = new qqMap({
key: 'DABBZ-UVV33-TN63X-3YGRM-2L562-NHFGO' // 自己申请的key
})
this.$store.dispatch('location/getLocation').then(res => {
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success(res) {
console.log(res)
that.position = res.result.address_component.city
that.po_tips = '重新定位'
},
fail(err) {
console.log(err)
}
})
})
}
}
};
</script>
<style lang="scss" scoped>
.wrapper {
position: fixed;
z-index: 999999;
background: #F5F5F5;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
.mask {
position: absolute;
bottom: 0upx;
top: 83upx;
left: 0upx;
right: 0upx;
width: 750upx;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0);
}
.mask-r {
height: 120upx;
width: 120upx;
border-radius: 60upx;
display: flex;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
font-size: 40upx;
color: #FFFFFF
}
.content {
height: 100%;
width: 100%;
background-color: #ffffff;
}
.header {
height: 85upx;
display: flex;
justify-content: flex-start;
align-items: center;
display: flex;
}
.back_div {
width: 35rpx;
height: 35rpx;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 24rpx;
left: 280rpx;
}
.back_img {
width: 35rpx;
height: 35rpx;
}
.input {
font-size: 24upx;
width: 720rpx;
height: 60rpx;
border-radius: 40upx;
background-color: #FFFFFF;
padding-left: 20upx;
padding-right: 20upx;
box-sizing: border-box;
border: 2rpx solid #DEDEDE;
text-align: center;
margin: 0 auto;
color: #999;
}
.inputActive {
text-align: left !important;
}
.title {
font-size: 30upx;
color: white;
}
.show {
left: 0;
width: 100%;
transition: left 0.3s ease;
}
.hide {
left: 100%;
width: 100%;
transition: left 0.3s ease;
}
.title {
font-size: 30upx;
color: white;
}
.calendar-list {
position: absolute;
top: 83upx;
bottom: 0upx;
width: 100%;
}
.letters {
position: absolute;
right: 30upx;
bottom: 0px;
width: 50upx;
top: 260upx;
color: #2f9bfe;
text-align: center;
font-size: 24upx;
}
.letters-item {
margin-bottom: 5upx;
color: #666666;
}
.letter-header {
height: 45upx;
font-size: 22upx;
color: #333333;
padding-left: 24upx;
box-sizing: border-box;
display: flex;
align-items: center;
/* background-color: #ebedef; */
}
.city-div {
width: 100%;
padding: 0rpx 50rpx 0rpx 20rpx;
border-bottom-width: 0.5upx;
border-bottom-color: #ebedef;
border-bottom-style: solid;
align-items: center;
margin-right: 35upx;
.regionName {
width: 100%;
padding: 20rpx 30rpx;
margin: 0upx 24upx;
align-items: center;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 34rpx;
}
}
.city {
padding-left: 30upx;
font-size: 24rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
line-height: 34rpx;
}
.dingwei {
width: 100%;
padding-top: 25upx;
box-sizing: border-box;
margin-bottom: 26upx;
}
.dingwei_Tips {
margin-left: 24upx;
margin-bottom: 24upx;
font-size: 24upx;
color: #A5A5A5;
}
.dingwei_refresh {
width: 44rpx;
height: 44rpx;
}
.dingwei_city {
width: 100%;
padding-left: 55upx;
padding-right: 70upx;
box-sizing: border-box;
display: flex;
}
.dingwei_city_one {
width: 218rpx;
height: 80rpx;
line-height: 80rpx;
font-size: 24rpx;
color: #333333;
display: flex;
justify-content: center;
align-items: center;
background: #DEDEDE;
border-radius: 44rpx;
margin-right: 6rpx;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
text-align: center;
padding: 0rpx 20rpx;
}
.dingweis_div {
display: flex;
align-content: flex-end;
align-items: center;
font-size: 24upx;
color: #FD5745;
}
.dingweis {
width: 32upx;
height: 32upx;
}
.dingwei_city_zuijin {
display: flex;
justify-content: flex-start;
}
.toright {
margin-right: 25upx;
}
</style>

507
components/linzq-citySelect/linzq-citySelect.vue Normal file
View File

@ -0,0 +1,507 @@
<template>
<div class="wrapper" :style="'top:'+statusBarHeight+'px'">
<div class="header">
<view class="back_div" v-if="inputActive">
<!-- <image class="back_img" @click="back_city()" src="" mode=""></image> -->
<image class="back_img" @click="back_city()" src="https://img.agrimedia.cn/refresh.png" mode=""></image>
</view>
<input :class="inputActive? 'input':'input inputActive'" @input="onInput" placeholder="搜索城市名" v-model="searchValue" />
</div>
<scroll-view class="calendar-list" scroll-y="true" :scroll-into-view="scrollIntoId">
<view v-if="disdingwei" id="hot">
<!-- 定位模块 -->
<view class="dingwei">
<view class="dingwei_Tips">
当前城市
</view>
<view class="dingwei_city">
<view class="dingwei_city_one">
{{getCityName}}
</view>
<view class="dingweis_div" @click="getWarpweft">
<image class="dingweis" src="https://img.agrimedia.cn/refresh.png" mode=""></image>
<!-- <text>{{po_tips}}</text> -->
</view>
</view>
</view>
<!-- 最近模块 -->
<view class="dingwei" v-if="Visit.length>=0">
<view class="dingwei_Tips">
最近搜索
</view>
<view class="dingwei_city dingwei_city_zuijin">
<view class="dingwei_city_one toright" v-for="(item,index) in Visit" :key="index" v-if="index<2" @click="back_city(item)">
{{item.cityName}}
</view>
</view>
</view>
</view>
<!-- 城市列表 -->
<view v-if="searchValue == ''" v-for="(item, index) in list" :id="getId(index)" :key="index">
<view class="letter-header">{{ getId(index) }}</view>
<view class="city-div" v-for="(city, i) in item" :key="i" @click="back_city(city)">
<text class="city">{{ city.cityName }}</text>
</view>
</view>
<!-- 搜索结果 -->
<view class="city-div" v-for="(item, index) in searchList" :key="index" @click="back_city(item)">
<text class="city">{{ item.cityName }}</text>
</view>
</scroll-view>
<!-- 右侧字母 -->
<view class="letters" v-if="searchValue == ''">
<!-- <view class="letters-item" @click="scrollTo('hot')">最近</view> -->
<view class="letters-item" v-for="item in letter" :key="item" @click="scrollTo(item)">{{ item }}</view>
</view>
<!-- 选中之后字母 -->
<view class="mask" v-if="showMask">
<view class="mask-r">{{selectLetter}}</view>
</view>
</div>
</template>
<script>
let qqMap = require("@/utils/qqmap-wx-jssdk.min.js");
import { cityList} from '@/common/api/api.js'
import { mapGetters} from 'vuex'
import Citys from '../city.js';
export default {
components: {},
props: {},
computed: {
...mapGetters({
getCityName:'location/getCityName'
})
},
data() {
return {
statusBarHeight: this.statusBarHeight,
ImgUrl: this.ImgUrl,
letter: [],
selectLetter: '',
searchValue: '',
scrollIntoId: '',
list: [],
tId: null,
searchList: [],
showMask: false,
disdingwei: true,
Visit: [], //最近访问
position: '',
longitude: '', //经度
latitude: '', //纬度
seconds: 3,
po_tips: '重新定位',
citys:[],
hotCity:[],
inputActive: true
}
},
created() {
cityList().then(data=>{
this['citys'] = data['cities'];
this['hotCity'] = data['hotCity'];
//获取存储的最近访问
var that = this
uni.getStorage({
key: 'Visit_key',
success: function(res) {
that.Visit = res.data
}
});
// this.position = this['getCityName'];
//获取定位 经度纬度
// that.getWarpweft()
//获取city.js 的程序字母
var mu = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'w', 'x', 'y',
'z'
];
var tmp = [];
for (var i = 0; i < mu.length; i++) {
var item = mu[i];
for (var j = 0; j < this.citys.length; j++) {
var py = this.citys[j].py;
if (py.substring(0, 1) == item) {
if (tmp.indexOf(item) == -1) {
this.list[i] = [this.citys[j]];
tmp.push(item);
this.letter.push(item.toUpperCase());
} else {
this.list[i].push(this.citys[j]);
}
}
}
}
console.log(this.citys)
})
},
methods: {
getId(index) {
return this.letter[index];
},
scrollTo(letter) {
this.showMask = true
this.selectLetter = letter == 'hot' ? '最' : letter
setTimeout(() => {
this.showMask = false
}, 300);
this.scrollIntoId = letter;
},
query(source, text) {
let res = [];
var self = this;
res = source.filter(item => {
const arr = [];
let isHave = false;
Object.keys(item).forEach(prop => {
const itemStr = item[prop];
self.isString(itemStr) &&
itemStr.split(',').forEach(val => {
arr.push(val);
});
});
arr.some(val => {
isHave = new RegExp('^' + text).test(val);
return isHave;
});
return isHave;
});
console.log(JSON.stringify(res));
return res;
},
isString(obj) {
return typeof obj === 'string';
},
onInput(e) {
const value = e.target.value;
console.log(value);
if (value !== '' && this.citys && this.citys.length > 0) {
const queryData = this.query(this.citys, String(value).trim());
this.searchList = queryData;
this.disdingwei = false;
this.inputActive = false;
} else {
this.searchList = [];
this.disdingwei = true;
this.inputActive = true;
}
},
back_city(item) {
if (item) {
//unshift 把数据插入到首位，与push相反
console.log(this.Visit,'visit')
if(this.Visit == null){
this.Visit = []
}
this.Visit.unshift(item)
this.searchValue = "";
this.disdingwei = true
var arr = this.Visit
//数组去重
function distinct(arr) {
let newArr = []
for (let i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) < 0) {
newArr.push(arr[i])
}
}
return newArr
}
this.Visit = distinct(arr)
console.log(this.Visit, "---最近访问")
uni.setStorage({
key: 'Visit_key',
data: this.Visit
});
this.$store.commit('location/setCityName',item.cityName)
this.$emit('back_city', item);
// this.$emit('updateData')
}
// else {
// this.$emit('back_city', 'no');
// }
},
getWarpweft() {
this.po_tips = '定位中'
this.$store.dispatch('location/getLocation').then(res => {
console.log(res,'locationinfo')
if(res != undefined){
this.$store.dispatch('location/getCityName2').then(res => {
this.po_tips = '重新定位';
// this.position = this['getCityName'];
})
}else{
this.po_tips = '定位失败'
}
})
return
var that = this
that.po_tips = '定位中...'
let qqmapsdk = new qqMap({
key: 'DABBZ-UVV33-TN63X-3YGRM-2L562-NHFGO' // 自己申请的key
})
this.$store.dispatch('location/getLocation').then(res => {
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success(res) {
console.log(res)
that.position = res.result.address_component.city
that.po_tips = '重新定位'
},
fail(err) {
console.log(err)
}
})
})
}
}
};
</script>
<style scoped>
.wrapper {
position: fixed;
z-index: 999999;
background: #F5F5F5;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
.mask {
position: absolute;
bottom: 0upx;
top: 83upx;
left: 0upx;
right: 0upx;
width: 750upx;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0);
}
.mask-r {
height: 120upx;
width: 120upx;
border-radius: 60upx;
display: flex;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
font-size: 40upx;
color: #FFFFFF
}
.content {
height: 100%;
width: 100%;
background-color: #ffffff;
}
.header {
height: 85upx;
display: flex;
justify-content: flex-start;
align-items: center;
display: flex;
}
.back_div {
width: 35rpx;
height: 35rpx;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 30rpx;
left: 280rpx;
}
.back_img {
width: 35rpx;
height: 35rpx;
}
.input {
font-size: 24upx;
width: 720rpx;
height: 60rpx;
border-radius: 40upx;
background-color: #FFFFFF;
padding-left: 20upx;
padding-right: 20upx;
box-sizing: border-box;
border: 2rpx solid #DEDEDE;
text-align: center;
margin: 0 auto;
color: #999;
}
.inputActive {
text-align: left !important;
}
.title {
font-size: 30upx;
color: white;
}
.show {
left: 0;
width: 100%;
transition: left 0.3s ease;
}
.hide {
left: 100%;
width: 100%;
transition: left 0.3s ease;
}
.title {
font-size: 30upx;
color: white;
}
.calendar-list {
position: absolute;
top: 83upx;
bottom: 0upx;
width: 100%;
}
.letters {
position: absolute;
right: 30upx;
bottom: 0px;
width: 50upx;
top: 260upx;
color: #2f9bfe;
text-align: center;
font-size: 24upx;
}
.letters-item {
margin-bottom: 5upx;
color: #666666;
}
.letter-header {
height: 45upx;
font-size: 22upx;
color: #333333;
padding-left: 24upx;
box-sizing: border-box;
display: flex;
align-items: center;
/* background-color: #ebedef; */
}
.city-div {
width: 660upx;
height: 85upx;
margin-left: 24upx;
border-bottom-width: 0.5upx;
border-bottom-color: #ebedef;
border-bottom-style: solid;
display: flex;
align-items: center;
margin-right: 35upx;
}
.city {
padding-left: 30upx;
font-size: 24rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
line-height: 34rpx;
}
.dingwei {
width: 100%;
padding-top: 25upx;
box-sizing: border-box;
margin-bottom: 26upx;
}
.dingwei_Tips {
margin-left: 24upx;
margin-bottom: 24upx;
font-size: 24upx;
color: #A5A5A5;
}
.dingwei_refresh {
width: 44rpx;
height: 44rpx;
}
.dingwei_city {
width: 100%;
padding-left: 55upx;
padding-right: 70upx;
box-sizing: border-box;
display: flex;
}
.dingwei_city_one {
width: 218rpx;
height: 80rpx;
line-height: 80rpx;
font-size: 24rpx;
color: #333333;
display: flex;
justify-content: center;
align-items: center;
background: #DEDEDE;
border-radius: 44rpx;
margin-right: 6rpx;
}
.dingweis_div {
display: flex;
align-content: flex-end;
align-items: center;
font-size: 24upx;
color: #FD5745;
}
.dingweis {
width: 32upx;
height: 32upx;
}
.dingwei_city_zuijin {
display: flex;
justify-content: flex-start;
}
.toright {
margin-right: 25upx;
}
</style>

42
components/localSearch/localSearch.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<view>
<u-icon v-if="showLeftLabel" name="arrow-down" label="天津市" labelPos="left"></u-icon>
<u-line v-if="showLeftLabel" direction="col" margin="20rpx -5rpx 20rpx 20rpx" color="#666" length="30rpx"></u-line>
<u-search bgColor="#f2f2f2" :showAction="isShowAction" :disabled="true" :placeholder="placeholderValue"
v-model="keyword"></u-search>
</view>
</template>
<script>
export default {
name:"localSearch",
props:{
showLeftLabel:{
type:Boolean,
default:false
},
placeholderValue:{
type:String,
default:"请输入商品名称"
},
isShowAction:{
type:Boolean,
default:false
},
keyword:{
type:String,
default:"请输入商品名称"
}
},
data() {
return {
};
}
}
</script>
<style>
</style>

227
components/mehaotian-search-revision/mehaotian-search-revision.vue Normal file
View File

@ -0,0 +1,227 @@
<template>
<view class="serach">
<view class="content" :style="{'border-radius':radius+'px'}">
<!-- HM修改 增加进入输入状态的点击范围 -->
<view class="content-box" :class="{'center':mode === 2}" >
<text class="icon icon-serach"></text>
<!-- HM修改 增加placeholder input confirm-type confirm-->
<input :placeholder="placeholder" @input="inputChange" confirm-type="search" @confirm="triggerConfirm" class="input" :class="{'center':!active && mode === 2}" :focus="isFocus" v-model="inputVal" @focus="focus" @blur="blur"/>
<!-- <view v-if="!active && mode === 2" class="input sub" @click="getFocus">请输入搜索内容</view> -->
<!-- HM修改 @click换成@click.stop阻止冒泡 -->
<text v-if="isDelShow" class="icon icon-del" @click.stop="clear"></text>
</view>
<view v-show="(active&&show&&button === 'inside')||(isDelShow && button === 'inside')" class="serachBtn" @click="search">
搜索
</view>
</view>
<view v-if="button === 'outside'" class="button" :class="{'active':show||active}" @click="search">
<view class="button-item">{{!show?searchName:'搜索'}}</view>
</view>
</view>
</template>
<script>
export default {
props: {
mode: {
value: Number,
default: 1
},
//HM修改 定义默认搜索关键词(水印文字)
placeholder:{
value: String,
default: '请输入搜索内容'
},
value: {
type: String,
default:false
},
button: {
value: String,
default: 'outside'
},
show: {
value: Boolean,
default: true
},
radius: {
value: String,
default: 60
}
},
data() {
return {
active: false,
inputVal: '',
searchName: '取消',
isDelShow: false,
isFocus: true
};
},
methods: {
//HM修改 触发组件confirm事件
triggerConfirm(){
this.$emit('confirm', false);
},
//HM修改 触发组件input事件
inputChange(event){
var keyword = event.detail.value;
this.$emit('input', keyword);
if (this.inputVal) {
this.isDelShow = true;
}
},
focus() {
this.active = true;
//HM修改 增加获取焦点判断
if (this.inputVal) {
this.isDelShow = true;
}
},
blur() {
console.log('blur');
this.isFocus = false;
if (!this.inputVal) {
this.active = false;
}
},
clear() {
//HM修改 收起键盘
uni.hideKeyboard();
this.isFocus = false;
this.inputVal = '';
this.active = false;
//HM修改 清空内容时候触发组件input
this.$emit('input', '');
//this.$emit('search', '');//HM修改 清空内容时候不进行搜索
},
getFocus() {
if(!this.isFocus){
this.isFocus = true;
}
},
search() {
//HM修改 增加点击取消时候退出输入状态，内容为空时，输入默认关键字
if (!this.inputVal) {
if(!this.show&&this.searchName == '取消'){
uni.hideKeyboard();
this.isFocus = false;
this.active = false;
return;
}
}
console.log(this.inputVal);
this.$emit('search', this.inputVal?this.inputVal:this.placeholder);
}
},
watch: {
inputVal(newVal) {
if (newVal) {
this.searchName = '搜索';
//this.isDelShow = true; //HM修改 直接点击页面预设关键字样式异常，注销
} else {
this.searchName = '取消';
this.isDelShow = false;
}
},
//HM修改 双向绑定
value(val) {
this.inputVal = val;
},
}
};
</script>
<style lang="scss">
.serach {
display: flex;
width: 100%;
//border-bottom: 1px #f5f5f5 solid; //HM修改 去掉边框
box-sizing: border-box;
font-size: $uni-font-size-base;
.content {
display: flex;
align-items: center;
width: 100%;
height: 60upx;
//border: 1px #ccc solid; //HM修改 去掉边框
background: #fff;
overflow: hidden;
transition: all 0.2s linear;
border-radius: 30px;
.content-box {
width: 100%;
display: flex;
align-items: center;
&.center {
justify-content: center;
}
.icon {
padding: 0 15upx;
&.icon-del {
font-size: 38upx;
&:before {content:"\e644";}
}
&.icon-serach:before {content:"\e61c";}
}
.input {
width: 100%;
max-width: 100%;
line-height: 60upx;
height: 60upx;
transition: all 0.2s linear;
&.center {
width: 200upx;
}
&.sub {
// position: absolute;
width: auto;
color: grey;
}
}
}
.serachBtn {
height: 100%;
flex-shrink: 0;
padding: 0 30upx;
//HM修改 按钮背景色
background:linear-gradient(to right,#ff9801,#ff570a);
//background: $uni-color-success;
line-height: 60upx;
color: #fff;
//border-left: 1px #ccc solid; //HM修改 去掉边框
transition: all 0.3s;
}
}
.button {
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
width: 0;
transition: all 0.2s linear;
white-space: nowrap;
overflow: hidden;
&.active {
padding-left: 15upx;
width: 100upx;
}
}
}
//HM修改 把字体改成本地加载
@font-face {font-family:"iconfont";src:url('data:application/x-font-woff;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+s+0AAAE4AAAAQk9TLzI8fEg3AAABfAAAAFZjbWFws6gbWQAAAeQAAAGcZ2x5ZqgAaogAAAOMAAABMGhlYWQTyEk0AAAA4AAAADZoaGVhB90DhQAAALwAAAAkaG10eBAA//8AAAHUAAAAEGxvY2EA0gBOAAADgAAAAAptYXhwARIANgAAARgAAAAgbmFtZT5U/n0AAAS8AAACbXBvc3SanfjSAAAHLAAAAEUAAQAAA4D/gABcBAD//wAABAAAAQAAAAAAAAAAAAAAAAAAAAQAAQAAAAEAAL8Cm/NfDzz1AAsEAAAAAADYVQKbAAAAANhVApv///+ABAADgQAAAAgAAgAAAAAAAAABAAAABAAqAAQAAAAAAAIAAAAKAAoAAAD/AAAAAAAAAAEAAAAKAB4ALAABREZMVAAIAAQAAAAAAAAAAQAAAAFsaWdhAAgAAAABAAAAAQAEAAQAAAABAAgAAQAGAAAAAQAAAAAAAQQAAZAABQAIAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5gbmRAOA/4AAXAOBAIAAAAABAAAAAAAABAAAAAQA//8EAAAABAAAAAAAAAUAAAADAAAALAAAAAQAAAFoAAEAAAAAAGIAAwABAAAALAADAAoAAAFoAAQANgAAAAgACAACAADmBuYc5kT//wAA5gbmHOZE//8AAAAAAAAAAQAIAAgACAAAAAIAAQADAAABBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAA0AAAAAAAAAAMAAOYGAADmBgAAAAIAAOYcAADmHAAAAAEAAOZEAADmRAAAAAMAAAAAADoATgCYAAAAAv///4AEAAOAABMAHwAABQYiLwEGJCcmAjc2JBcWEgcXFhQBJiAHBhQXFiA3NjQD7RQyFMaG/sl9hw2BiQFqjXgTZccT/sBo/spoPz9oATZoPm0TE8dhDG6FAW2OhwaGfv6+h8YUMgLThoZV0FWGhlnMAAABAAD/gAMAA4EABQAACQE1CQE1AQACAP6IAXgBgP4AiAF4AXiIAAAABAAA//4DlAMnABAAIQAlACkAAAUuAzQ+AjIWFxYQBw4BAyIOAhQeAjI2NzYQJy4BFwEnAQU3AQcCAFKScz09c5Kkkjp2djqSUkiBZjU1ZoGQgTNoaDOBfP6YIAFo/qQgAVwgAgE9cpOjknM9PTl8/r18OT0C9zVmgZCBZTU1Mm4BHW0zNb/+mCABZysf/qQgAAAAAAAAEgDeAAEAAAAAAAAAFQAAAAEAAAAAAAEACAAVAAEAAAAAAAIABwAdAAEAAAAAAAMACAAkAAEAAAAAAAQACAAsAAEAAAAAAAUACwA0AAEAAAAAAAYACAA/AAEAAAAAAAoAKwBHAAEAAAAAAAsAEwByAAMAAQQJAAAAKgCFAAMAAQQJAAEAEACvAAMAAQQJAAIADgC/AAMAAQQJAAMAEADNAAMAAQQJAAQAEADdAAMAAQQJAAUAFgDtAAMAAQQJAAYAEAEDAAMAAQQJAAoAVgETAAMAAQQJAAsAJgFpCkNyZWF0ZWQgYnkgaWNvbmZvbnQKaWNvbmZvbnRSZWd1bGFyaWNvbmZvbnRpY29uZm9udFZlcnNpb24gMS4waWNvbmZvbnRHZW5lcmF0ZWQgYnkgc3ZnMnR0ZiBmcm9tIEZvbnRlbGxvIHByb2plY3QuaHR0cDovL2ZvbnRlbGxvLmNvbQAKAEMAcgBlAGEAdABlAGQAIABiAHkAIABpAGMAbwBuAGYAbwBuAHQACgBpAGMAbwBuAGYAbwBuAHQAUgBlAGcAdQBsAGEAcgBpAGMAbwBuAGYAbwBuAHQAaQBjAG8AbgBmAG8AbgB0AFYAZQByAHMAaQBvAG4AIAAxAC4AMABpAGMAbwBuAGYAbwBuAHQARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAECAQMBBAEFAAZzb3VzdW8IamlhbnRvdTQHc2hhbmNodQAAAAAA');}
.icon {
font-family: iconfont;
font-size: 32upx;
font-style: normal;
color: #999;
}
</style>

134
components/movies-item/movies-item.vue Normal file
View File

@ -0,0 +1,134 @@
<!-- 影院组件 -->
<template>
<view class="mov">
<view class="movie" @click="ToMoviesPlay()">
<!-- 名字距离 -->
<view class="movie-info">
<view class="movie-name">
{{data.cinemaName}}
</view>
<view class="movie-area">
{{data.cinemaAddress}}
</view>
</view>
<!-- 价格地址 -->
<view class="movie-address">
<view class="movie-distance">
{{data.distance}}km
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
cinemaData: {}
}
},
props: {
data: {
type: Object,
default: function () {
return {}
}
},
filmDesc: {
type: Object,
default: function () {
return {}
}
},
// 跳转场次or影院(默认影院)
isFilm: {
type: Boolean,
default: function () {
return false
}
},
},
onLoad(option) {
},
methods: {
// 选择电影场次
ToMoviesPlay() {
console.log(this.data,'-*-*-*--*');
// 电影院查场次
if (this.isFilm) {
uni.navigateTo({
url: `../../pages/film/filmYSearch?cinemaData=${encodeURIComponent(JSON.stringify(this.data))}`,
})
} else {
// 电影查场次
this.cinemaData = this.data
uni.navigateTo({
url: `../../pages/film/filmPlay?cinemaData=${encodeURIComponent(JSON.stringify(this.cinemaData))}&filmData=${encodeURIComponent(JSON.stringify(this.filmDesc))}`,
})
}
}
}
}
</script>
<style lang="scss" scoped>
.mov {
padding: 0rpx 24rpx;
background-color: #FFFFFF;
}
.movie {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #FFFFFF;
border-bottom: 2rpx solid #EDEDED;
box-sizing: border-box;
.movie-info {
padding-right: 20rpx;
.movie-name {
font-size: 30rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
line-height: 40rpx;
margin-bottom: 20rpx;
margin-top: 28rpx;
}
.movie-area {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 32rpx;
margin-bottom: 20rpx;
}
}
.movie-address {
.movie-money {
font-size: 24rpx;
font-family: Alibaba-PuHuiTi-H, Alibaba-PuHuiTi;
font-weight: 600;
color: #FC4B5C;
line-height: 32rpx;
margin-bottom: 20rpx;
text-align: right;
text {
font-size: 40rpx;
font-weight: 900;
}
}
.movie-distance {
font-size: 24rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #999999;
line-height: 32rpx;
text-align: right;
}
}
}
</style>

186
components/orderListItem/orderListItem.vue Normal file
View File

@ -0,0 +1,186 @@
<template>
<view>
<!-- <view class="mt-30 order-box" @click="goOrder(InforData.order_sn)" v-for="(item,index) in collectionList" :key="index"> -->
<view class="mt-30 order-box" @click="goOrder(InforData.order_sn)">
<view class="flbtn">
<view class="lit-333">
下单时间：{{InforData.create_time}}
</view>
<view class="lit-333 flex" style="color: #FF7700;" v-if="InforData.status == 0">
{{getStatusStr(InforData.status,InforData.is_evaluate)}}，剩余
<u-count-down @change="onChange"
:time="((new Date(InforData.create_time).getTime()) + 30*60*1000 - new Date().getTime())"
@finish="finish">
{{minutes < 10 ?'0'+minutes:minutes}}:{{seconds < 10 ?'0'+seconds:seconds}}
</u-count-down>
<!-- <countDownCom @finish="finish" @onChange="onChange" :time="((new Date(InforData.create_time).getTime()) + 30*60*1000 - new Date().getTime())"></countDownCom> -->
</view>
<view class="lit-333" v-else>
{{getStatusStr(InforData.status,InforData.is_evaluate)}}
</view>
</view>
<view class="item-box flbtn">
<view class="flex">
<u-image width="238rpx" height="178rpx" radius="20rpx" :src="InforData.goods_img"></u-image>
<view class="item-text">
<u-text :text="InforData.goods_name" size="28rpx" color="#333333" :bold="true" lines="1">
</u-text>
<view class="lit-999">
x{{InforData.goods_count}}
</view>
<u-gap height="40rpx"></u-gap>
<view class="price-item" style="font-size: 42rpx;color: #FF2A30;">
<text style="font-size: 22rpx;">￥</text>{{InforData.pay_price/100}}
</view>
</view>
</view>
<view class="flex" style="align-items: flex-end;">
<view class="" v-if="InforData.status == 0">
<view class="gopay" @click.stop="goOrder(InforData.order_sn)">
去支付
</view>
<view class="gopay cancel" @click.stop="cannelOrder(InforData.order_sn)">
取消订单
</view>
</view>
<view class="" v-if="InforData.status == 1">
<view class="gopay cancel" @click.stop="goOrder(InforData.order_sn)">
查看券码
</view>
</view>
<view class="" v-if="InforData.status == 5 && InforData.is_evaluate == 0">
<view class="gopay" @click.stop="goevaluated(InforData.order_sn)">
去评价
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "orderListItem",
props: {
item: {
type: Object,
default: {}
},
},
data() {
return {
minutes: 0,
seconds: 0,
InforData: {}
};
},
mounted() {
this['InforData'] = this['item'];
this['InforData']['create_time'] = this['InforData']['create_time'].replace(/-/g,"/");
},
methods: {
goevaluated(or_no) {
uni.navigateTo({
url: '/pages/evaluated/goevaluated?order_sn=' + or_no,
fail(e) {
console.log(e)
}
})
},
goOrder(order_sn) {
uni.navigateTo({
url: '/pages/Pendingpayment/paid?order_sn=' + order_sn
})
},
onChange(e) {
this.minutes = e.minutes
this.seconds = e.seconds
},
finish(e) {
console.log(this['InforData']['order_sn'],'倒计时结束');
this.InforData.status = 4
},
cannelOrder(order_sn) {
let _this = this
uni.showModal({
title: '您确定要取消订单吗',
success(confirm) {
if (confirm.confirm) {
_this.$store.dispatch('api/cancelOrder', {
order_sn: order_sn
}).then(res => {
_this['InforData']['status'] = 4;
// 组件中得到的数据不可更改
_this.$emit('OrderCancel', _this['index'])
//_this.getOrder();
})
}
}
})
},
getStatusStr(status, is_evaluate) {
console.log(status, '订单状态-1');
let str = ''
switch (status) {
case 0:
str = '待支付';
break;
case 1:
str = '待使用'
break
case 3:
str = '已退款'
break
case 4:
str = '已取消'
break
case 5:
if (is_evaluate == 0) {
str = '待评价'
}
break;
}
return str;
},
}
}
</script>
<style lang="scss">
.order-box {
margin-top: 20rpx;
.item-box {
margin-top: 20rpx;
.item-text {
margin-left: 20rpx;
max-width: 260rpx;
}
}
.gopay {
font-size: 24rpx;
font-weight: bold;
color: #FF7700;
border-radius: 10rpx;
border: 2rpx solid #FF7700;
text-align: center;
width: 170rpx;
height: 58rpx;
line-height: 58rpx;
margin-bottom: 10rpx;
}
.cancel {
color: #999999;
border: 2rpx solid #999999;
font-weight: normal;
padding-bottom: 0;
}
}
</style>

77
components/orderindex-scan-code/orderindex-scan-code.vue Normal file
View File

@ -0,0 +1,77 @@
<template>
<view class="flex" @click="copyThis(item['orderSn'])">
<view style="margin-right: 20rpx;">
<u-image width="170rpx" height="170rpx" :src="item['store_img']"></u-image>
</view>
<view style="width: 100%;">
<view class="flbtn" style="align-items:center;">
<u-text lines="1" color="#333" :text="item['store_name']"></u-text>
<view class="lit-666">
{{item['create_time']}}
</view>
</view>
<view class="flex">
<u-text lines="1" size="24rpx" color="#999" :text="'订单编号：'+item['orderSn']"></u-text>
<view class="">
<text class="iconfont icon-copy" style="margin-left: 10rpx; color: #999; font-size:26rpx;"></text>
</view>
</view>
<view class="lit-999" v-if="type == '2'">
预估佣金：{{item['self_commission']}}
</view>
<view class="flbtn">
<view class="lit-999" v-if="type == '2'">
佣金状态：{{item['commission_name']}}
</view>
<view class="lit-333 bold">
付款金额：￥{{RetainDecimalPoint(item['amount'])}}
</view>
</view>
</view>
</view>
</template>
<script>
import mixin from "@/static/js/mixin/mixin.js";
export default {
mixins: [mixin],
name: "orderindex-scan-code",
props: {
type: {
type: String,
default: '1'
},
item: {
type: Object,
default: () => {}
}
},
data() {
return {
};
},
methods: {
copyThis(str) {
console.log(str)
uni.setClipboardData({
data: str, //要被复制的内容
success: () => { //复制成功的回调函数
uni.showToast({ //提示
title: "复制成功"
})
},
fail(e) {
console.log(e)
}
});
},
}
}
</script>
<style lang="scss">
.flex {
margin-bottom: 32rpx;
}
</style>

137
components/pick-regions/pick-regions.vue Normal file
View File

@ -0,0 +1,137 @@
<template>
<picker mode="multiSelector"
:value="multiIndex"
:range="multiArray"
@change="handleValueChange"
@columnchange="handleColumnChange">
<slot></slot>
</picker>
</template>
<script>
const CHINA_REGIONS = require('./regions.json')
export default {
props:{
defaultRegions:{
type:Array,
default(){
return []
}
},
defaultRegionCode:{
type:String
},
defaultRegion:[String,Array]
},
data() {
return {
cityArr:CHINA_REGIONS[0].childs,
districtArr:CHINA_REGIONS[0].childs[0].childs,
multiIndex: [0, 0, 0],
isInitMultiArray:true,
}
},
watch:{
defaultRegion:{
handler(region,oldRegion){
if(Array.isArray(region)){
// 避免传的是字面量的时候重复触发
oldRegion = oldRegion || []
if(region.join('')!==oldRegion.join('')){
this.handleDefaultRegion(region)
}
}else if(region&&region.length == 6){
this.handleDefaultRegion(region)
}else{
console.warn('defaultRegion非有效格式')
}
},
immediate:true,
}
},
computed:{
multiArray(){
return this.pickedArr.map(arr=>arr.map(item=>item.name))
},
pickedArr(){
// 进行初始化
if(this.isInitMultiArray){
return [
CHINA_REGIONS,
CHINA_REGIONS[0].childs,
CHINA_REGIONS[0].childs[0].childs
]
}
return [CHINA_REGIONS,this.cityArr,this.districtArr];
}
},
methods: {
handleColumnChange(e){
// console.log(e);
this.isInitMultiArray = false;
const that = this;
let col = e.detail.column;
let row = e.detail.value;
that.multiIndex[col] = row;
try{
switch(col){
case 0:
if(CHINA_REGIONS[that.multiIndex[0]].childs.length==0){
that.cityArr = that.districtArr = [CHINA_REGIONS[that.multiIndex[0]]]
break;
}
that.cityArr = CHINA_REGIONS[that.multiIndex[0]].childs
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
break;
case 1:
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
break;
case 2:
break;
}
}catch(e){
// console.log(e);
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[0].childs
}
},
handleValueChange(e){
// 结构赋值
let [index0,index1,index2] = e.detail.value;
let [arr0,arr1,arr2] = this.pickedArr;
let address = [arr0[index0],arr1[index1],arr2[index2]];
// console.log(address);
this.$emit('getRegion',address)
},
handleDefaultRegion(region){
const isCode = !Array.isArray(region)
this.isInitMultiArray = false;
let children = CHINA_REGIONS
for(let i=0;i<3;i++){
for(let j=0;j<children.length;j++){
let condition = isCode?children[j].code==region.slice(0,(i+1)*2):children[j].name.includes(region[i]);
if(condition){
// 匹配成功进行赋值
// console.log(i,j,children.length-1);
children = children[j].childs;
if(i==0){
this.cityArr = children
}else if(i==1){
this.districtArr = children
}
this.$set(this.multiIndex,i,j)
// console.log(this.multiIndex);
break;
}else{
// 首次匹配失败就用默认的初始化
// console.log(i,j,children.length-1);
if(i==0 && j==(children.length-1)){
this.isInitMultiArray = true;
}
}
}
}
}
},
}
</script>

1
components/pick-regions/regions.json Normal file
View File

File diff suppressed because one or more lines are too long

109
components/pickerAddress/pickerAddress.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="value" mode="multiSelector">
<slot></slot>
</picker>
</template>
<script>
// import AllAddress from '../../static/js/data.js';
let AllAddress;
let selectVal = ['','','']
import { regionList } from "@/common/api/api.js"
export default {
data() {
return{
value: [0,0,0],
array: [],
index: 0
}
},
created() {
regionList().then(res=>{
AllAddress = res;
console.log(AllAddress,'AllAddress');
this.initSelect()
})
},
methods:{
// 初始化地址选项
initSelect() {
this.updateSourceDate() // 更新源数据
.updateAddressDate() // 更新结果数据
.$forceUpdate() // 触发双向绑定
},
// 地址控件改变控件
columnchange(d) {
this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
.updateSourceDate() // 更新源数据
.updateAddressDate() // 更新结果数据
.$forceUpdate() // 触发双向绑定
},
/**
* 更新源数据
* */
updateSourceDate() {
this.array = []
this.array[0] = AllAddress.map(obj => {
return {
name: obj.name
}
})
this.array[1] = AllAddress[this.value[0]].city.map(obj => {
return {
name: obj.name
}
})
this.array[2] = AllAddress[this.value[0]].city[this.value[1]].area.map(obj => {
return {
name: obj
}
})
return this
},
/**
* 更新索引
* */
updateSelectIndex(column, value){
let arr = JSON.parse(JSON.stringify(this.value))
arr[column] = value
if(column === 0 ) {
arr[1] = 0
arr[2] = 0
}
if(column === 1 ) {
arr[2] = 0
}
this.value = arr
return this
},
/**
* 更新结果数据
* */
updateAddressDate() {
selectVal[0] = this.array[0][this.value[0]].name
selectVal[1] = this.array[1][this.value[1]].name
selectVal[2] = this.array[2][this.value[2]].name
return this
},
/**
* 点击确定
* */
bindPickerChange(e) {
this.$emit('change', {
index: this.value,
data: selectVal
})
return this
}
}
}
</script>
<style>
</style>

140
components/popup-layer/popup-layer.vue Normal file
View File

@ -0,0 +1,140 @@
<template>
<view>
<view v-show="ifshow" @tap="ableClose" @touchmove.stop.prevent class="popup-layer" >
</view>
<view ref="popRef" class="popup-content" @tap.stop="stopEvent" :style="_location">
<slot></slot>
</view>
</view>
</template>
<script>
export default {
name: 'popup-layer',
model: {
prop: "showPop",
event: "change"
},
props: {
showPop:{
type:Boolean,
default:false,
},
direction: {
type: String,
default: 'top', // 方向 top，bottom，left，right
},
autoClose: {
type: Boolean,
default: true,
}
},
data() {
return {
ifshow: false, // 是否展示,
translateValue: -100, // 位移距离
site:-100,
timer: null,
iftoggle: false,
};
},
computed: {
_translate() {
const transformObj = {
'top': `transform:translateY(${-this.translateValue}%)`,
'bottom': `transform:translateY(${this.translateValue}%)`,
'left': `transform:translateX(${-this.translateValue}%)`,
'right': `transform:translateX(${this.translateValue}%)`
};
return transformObj[this.direction]
},
_location() {
const positionValue = {
'top': `bottom:${this.site}%;width:100%;`,
'bottom': `top:${this.site}%;width:100%;`,
'left': `right:0px;top:0;height:100%;`,
'right': `left:0px;top:0;height:100%;`,
};
return positionValue[this.direction]+ this._translate;
}
},
mounted(){
if(this.showPop){
// console.log(222);
this.show();
}
},
watch:{
showPop(value){
console.log(value)
if(value){
this.show();
}else{
this.close();
}
}
},
methods: {
stopMove(event){
return;
},
show(events) {
this.ifshow = true;
this.site=0;
let _open = setTimeout(() => {
this.translateValue = 0;
_open = null;
}, 100)
let _toggle = setTimeout(() => {
this.iftoggle = true;
_toggle = null;
}, 300);
},
close() {
if (this.timer !== null || !this.iftoggle) {
return;
}
this.translateValue = -100;
this.timer = setTimeout(() => {
this.ifshow = false;
this.timer = null;
this.iftoggle = false;
this.$emit('closeCallBack', null);
this.$emit('change',false)
}, 300);
},
ableClose() {
if (this.autoClose) {
this.close();
}
},
stopEvent(event) {},
doSome(){
}
}
}
</script>
<style lang="scss">
.popup-layer {
position: fixed;
z-index: 999999;
// background: rgba(0, 0, 0, .3);
height: 100%;
width: 100%;
top: 0px;
left: 0px;
overflow: hidden;
}
.popup-content {
position: fixed;
z-index: 1000000;
background: #FFFFFF;
transition: transform .2s ease;
overflow: hidden;
}
</style>

62
components/rechareModal/rechareModal.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<view>
<u-modal :show=showModal :showConfirmButton="false" >
<image src='https://img.agrimedia.cn/rechareImg.png'></image>
<text @click="know" class="knowSty">我知道了</text>
</u-modal>
</view>
</template>
<script>
export default {
name:"rechareModal",
data() {
return {
}
},
props:{
showModal:{
type:Boolean,
},
},
data() {
return {
};
},
methods:{
know(e){
this.$emit('knowClick',e)
}
}
}
</script>
<style scoped lang="scss">
/deep/ .u-modal__content{
flex-direction: column;
image{
width: 100%;
height: 540rpx
}
.knowSty{
width: 272rpx;
height: 88rpx;
line-height: 88rpx;
background: linear-gradient(180deg, #FFAF00 0%, #FF7700 100%);
border-radius: 44rpx;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FFFFFF;
position: absolute;
bottom: 60rpx;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
}
</style>

59
components/recharge/recharge-Service.vue Normal file
View File

@ -0,0 +1,59 @@
<template>
<view class="recharge-Service">
<view class="recharge-Service-Logo">
<image class="img" :src="logo" mode=""></image>
</view>
<view class="recharge-Service-Title">
{{title}}
</view>
</view>
</template>
<script>
/**
* @param { logo } 服务商logo
* @param { title } 服务商名称
* */
export default {
name: "recharge-Service",
props: {
logo: {
type: String,
default: "http://b2dfdc47e670.66bbn.com/uploads/20210323/33f88897865b9a85c1ac16faa388cd2e.png"
},
title: {
type: String,
default: "爱奇艺视频"
}
},
data() {
return {};
}
}
</script>
<style lang="scss" scoped>
.recharge-Service {
background: linear-gradient(90deg, #FFFDF8, #F9EECC);
height: 200rpx;
padding: 0 20rpx;
display: flex;
align-items: center;
&-Logo {
width: 100rpx;
height: 100rpx;
.img {
width: 100%;
height: 100%;
}
}
&-Title {
font-size: 40rpx;
font-weight: bold;
padding-left: 20rpx;
}
}
</style>

43
components/recharge/recharge-Type.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<view class="recharge-Type">
<view class="recharge-Type-Tile flbtn">
<view class="big-333 bold">
{{title}}
</view>
</view>
<!-- <view class="goods-type" style="padding-top: 20rpx;">
<view :class="'title '+ (v == activeName?'active':'')" v-for="(v,index) in spce" :key="index"
@click="activeType(index,v)">
{{v}}
</view>
</view> -->
</view>
</template>
<script>
export default {
name: "recharge-Type",
props: {
title: {
type: String,
default: '充值类型'
}
},
data() {},
watch: {}
}
</script>
<style lang="scss" scoped>
.recharge-Type {
background-color: #fff;
padding: 20rpx;
margin-top: 20rpx;
// display: grid;
// grid-template-columns: auto auto;
// grid-gap: 20rpx;
&-Tile {}
}
</style>

77
components/recharge/recharge-User.vue Normal file
View File

@ -0,0 +1,77 @@
<template>
<view class="recharge-User">
<view class="recharge-User-Title flbtn">
<view class="big-333 bold">
{{text}}
</view>
<view class="recharge-User-Hint lit-333">
*请确认账号信息，充值成功后不支持退换
</view>
</view>
<view class="" style="padding-top: 20rpx;">
<u-input fontSize="46rpx" :type="inputtype" border="none" v-model="modelvalue" :placeholder="placeholder"></u-input>
</view>
</view>
</template>
<script>
/**
* @param { value } 组件接收值
* @param { placeholder } 组件占位文字
* */
export default {
name: "recharge-User",
props: {
value: {
type: [String,Number],
default: ''
},
placeholder: {
type: String,
default: ''
},
inputtype:{
type:String,
default:'text'
},
// 输入框标题
text:{
type:String,
default:'充值账号'
}
},
data() {
return {
account: ''
};
},
computed: {
modelvalue:{
get() {
return this['value'];
},
set(value) {
this.$emit('input', value)
}
}
},
}
</script>
<style lang="scss" scoped>
.recharge-User {
background-color: #fff;
padding: 20rpx;
margin-top: 20rpx;
&-Title {
padding-bottom: 20rpx;
border-bottom: 2rpx solid #EDEDED;
}
&-Hint {
color: #FF2A30 !important;
}
}
</style>

6
components/recharge/说明.md Normal file
View File

@ -0,0 +1,6 @@
# recharge组件文件说明
## 该组件文件存储的是充值模块的组件
## 充值服务商组件 Recharge-Service
## 充值面额 Recharge-Amount
## 充值类型 Recharge-Type
## 充值账号输入 Recharge-User

680
components/shopCar/shopCar.vue Normal file
View File

@ -0,0 +1,680 @@
<template>
<view class="common-car">
<view class="empty-shop-car" v-if="isEmpty">
<image src="../../static/empty_shop_car.png" class="empty-shop-car-image" mode=""></image>
<text>当前您的购物车是空的</text>
<view class="empty-shop-car-btn" @click="goIndex">
<text style="color: #fff;">去逛逛</text>
</view>
</view>
<view class="shop-car" v-else>
<view class="shop-car-header">
<text @tap="cut">{{isCut?'管理':'完成'}}</text>
</view>
<view class="store-box" v-for="(itemq,indexq) in datas" :key="indexq">
<view class="store-header">
<image src="../../static/selects.png" v-if="itemq.checked == 2" class="checked-image" mode=""
@tap="storeCheck(indexq,itemq.checked)"></image>
<image src="../../static/not_select.png" v-else class="checked-image" mode=""
@tap="storeCheck(indexq,itemq.checked)">
</image>
<text class="shop_title">{{itemq.name}}</text>
<image src="../../static/youjiantou1.png" class="label" mode=""></image>
</view>
<view class="goodsInfo" v-for="(itemw,indexw) in itemq.goods" :key="indexw">
<image src="../../static/selects.png" v-if="itemw.checked == 2" class="checked-image" mode=""
@tap="goodsCheck(indexq,indexw,itemw.checked)"></image>
<image src="../../static/not_select.png" v-else class="checked-image" mode=""
@tap="goodsCheck(indexq,indexw,itemw.checked)"></image>
<view class="goodsInfo-right">
<image :src="itemw.img" class="goods-image"></image>
<view class="goodsInfo-box">
<view class="goods-mid">
<view class="goods-name">{{itemw.title}}</view>
<view class="goods-price">
<text>¥{{itemw.price/100}}</text>
<text class="goods-original">{{itemw.originalPrice/100}}</text>
</view>
</view>
<!-- <text class="spe">规格：{{itemw.remark}}</text> -->
<view class="goods-box">
<view class="goods-num-box">
<view class="goods-image" @tap="sub(indexq,indexw,itemw.number,itemw.goods_id)">
<text :class="itemw.number == 1? 'goods-ban':''">-</text>
</view>
<view class="goods-num">
<text>{{itemw.number}}</text>
</view>
<view class="goods-image" @tap="add(indexq,indexw,itemw.number,itemw.goods_id)">
<text>+</text>
</view>
</view>
</view>
</view>
<view class="icon" v-if="itemw.is_kill == -1000">
<u-icon width="60rpx" height="60rpx" name="https://img.agrimedia.cn/chwl/v2/seckill-icon.png"></u-icon>
</view>
</view>
</view>
<!-- <u-gap height="100rpx"></u-gap> -->
</view>
<view class="statistics-box">
<view class="statistics">
<view class="statistics-left" v-if="statisticsIndex" @tap="allCheck">
<image src="../../static/selects.png" class="checked-image" mode="">
</image>
<text class="all-check">全选</text>
</view>
<view class="statistics-left" v-else @tap="allCheck">
<image src="../../static/not_select.png" class="checked-image" mode="">
</image>
<text class="all-check">全选</text>
</view>
<view class="statistics-right" v-if="isCut" @tap="accounts">
<view class="">
<text class="all">总计：</text>
<text class="text-icon">¥</text>
<text class="text-color">{{total/100}}</text>
</view>
<view class="btn">
<text>结算</text>
</view>
</view>
<view class="statistics-right" v-else @tap="delect">
<view class="btn">
<text>删除</text>
</view>
</view>
</view>
<view class="gap"></view>
</view>
</view>
<slot></slot>
</view>
</template>
<script>
export default {
name: "commonCar",
data() {
return {
// isEmpty: true,
iPhoneX: false,
statisticsIndex: false,
total: 0,
isCut: true,
// datas:[]
}
},
props: {
list: {
type: [Object, Array],
default: {}
}
},
computed: {
isEmpty() {
return this.list.length == 0
},
datas: {
get() {
return this.list
},
set(e) {
console.log(e)
}
}
},
created() {
// console.log(this.list,'this list')
// if (this.list.length == 0) {
// this.isEmpty = true
// } else {
// this.datas = this.list
// this.isEmpty = false
// }
// console.log(this.list,'this list')
// console.log(this.datas,'this datas')
},
methods: {
goIndex(){
this.$store.commit('tabbar/setCurrent',0)
uni.reLaunch({
url:"/pages/index/index"
})
},
//商品选择
goodsCheck(storeIndex, goodsIndex, goodsChecked) {
if (goodsChecked == 1) {
this.datas[storeIndex].goods[goodsIndex].checked = 2
} else {
this.datas[storeIndex].goods[goodsIndex].checked = 1
}
//判断是否该店铺全选
let storeChecked = true
this.datas[storeIndex].goods.map((item, index) => {
if (item.checked == 1) {
storeChecked = false
}
})
if (storeChecked == false) {
this.datas[storeIndex].checked = 1
} else {
this.datas[storeIndex].checked = 2
}
//判断是否全选
let statisticsIndex = true
this.datas.find((item, index) => {
if (item.checked == 1) {
statisticsIndex = false
}
})
if (statisticsIndex == false) {
this.statisticsIndex = false
} else {
this.statisticsIndex = true
}
this.statistics()
},
//店铺选择
storeCheck(storeIndex, storeCheck) {
if (storeCheck == 1) {
this.datas[storeIndex].checked = 2
this.datas[storeIndex].goods.find((item, index) => {
item.checked = 2
})
} else {
this.datas[storeIndex].checked = 1
this.datas[storeIndex].goods.find((item, index) => {
item.checked = 1
})
}
//判断是否全选
let statisticsIndex = true
this.datas.find((item, index) => {
if (item.checked == 1) {
statisticsIndex = false
}
})
if (statisticsIndex == false) {
this.statisticsIndex = false
} else {
this.statisticsIndex = true
}
this.statistics()
},
//减少
sub(storeIndex, goodsIndex, goodsnum,goods_id) {
if (goodsnum == 1) {
return
} else {
this.$store.dispatch('api/goodsAddCart',{
goods_id:goods_id,
num:(goodsnum-1)
}).then(res => {
this.datas[storeIndex].goods[goodsIndex].number--
})
}
this.statistics()
},
//增加
add(storeIndex, goodsIndex, goodsnum,goods_id) {
this.$store.dispatch('api/goodsAddCart',{
goods_id:goods_id,
num:(goodsnum+1)
}).then(res => {
this.datas[storeIndex].goods[goodsIndex].number++
})
this.statistics()
},
//全选
allCheck() {
if (this.statisticsIndex) {
this.datas.find((item, index) => {
item.checked = 1
item.goods.find((itemq, indexq) => {
itemq.checked = 1
})
})
this.statisticsIndex = false
} else {
this.datas.find((item, index) => {
item.checked = 2
item.goods.find((itemq, indexq) => {
itemq.checked = 2
})
})
this.statisticsIndex = true
}
this.statistics()
},
//统计
statistics() {
let total = 0
console.log(this.datas, 'this data')
this.datas.find((item, index) => {
item.goods.find((itemq, indexq) => {
if (itemq.checked == 2) {
total = total + itemq.price * itemq.number
}
})
})
this.total = total.toFixed(2)
},
cut() {
this.isCut = !this.isCut
this.statisticsIndex = true
this.allCheck()
},
accounts() {
let judge = this.judgeSelect()
if (judge) {
this.$emit('accounts', this.datas)
} else {
uni.showToast({
title: '您当前未选择任何商品,结算失败',
icon: 'none'
})
}
},
delect() {
let judge = this.judgeSelect()
if (judge) {
let ids = this.checkedIds()
this.$store.dispatch('api/delCartGoods',{
cart_ids:ids
}).then(res => {
this.$emit('delect', this.datas)
})
} else {
uni.showToast({
title: '您当前未选择任何商品,删除失败',
icon: 'none'
})
}
},
checkedIds(){
let arr = []
this.datas.find((item, index) => {
item.goods.find((itemq, indexq) => {
if (itemq.checked == 2) {
arr.push(itemq.cart_id)
}
})
})
return arr
},
judgeSelect() {
let judge = false
this.datas.find((item, index) => {
item.goods.find((itemq, indexq) => {
if (itemq.checked == 2) {
judge = true
}
})
})
return judge
}
}
}
</script>
<style lang="scss" scoped>
.common-car {
width: 750rpx;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background: #F5F5F5;
}
.empty-shop-car {
width: 750rpx;
min-height: 680rpx;
display: flex;
flex-direction: column;
align-items: center;
.empty-shop-car-image {
width: 340rpx;
height: 278rpx;
margin-top: 102rpx;
}
text {
margin-top: 40rpx;
font-size: 28rpx;
font-weight: 400;
color: #666666;
}
.empty-shop-car-btn {
width: 240rpx;
height: 90rpx;
background: #FF4D02;
border-radius: 200rpx;
margin-top: 40rpx;
text-align: center;
line-height: 90rpx;
font-size: 30rpx;
font-weight: 400;
color: #313133;
}
}
.shop-car {
width: 750rpx;
display: flex;
flex-direction: column;
align-items: center;
.shop-car-header {
width: 690rpx;
height: 80rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
text {
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #666666;
line-height: 40rpx;
}
}
.store-box {
width: 690rpx;
margin-bottom: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
background-color: #FFFFFF;
border-radius: 20rpx;
.store-header {
width: 690rpx;
height: 78rpx;
padding: 0 30rpx;
display: flex;
flex-direction: row;
align-items: center;
font-size: 28rpx;
font-weight: 400;
color: #313133;
.checked-image {
width: 36rpx;
height: 36rpx;
flex-shrink: 0;
}
text {
font-size: 28rpx;
font-weight: 400;
color: #313133;
margin-left: 20rpx;
}
.label {
width: 14rpx;
height: 24rpx;
margin-left: 10rpx;
margin-top: 5rpx;
}
.shop_title {
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
line-height: 44rpx;
letter-spacing: 2rpx;
}
}
.goodsInfo {
width: 100%;
height: 246rpx;
display: flex;
flex-direction: row;
align-items: center;
padding: 0rpx 20rpx;
&:nth-last-child(1) {
border: none;
}
.checked-image {
width: 36rpx;
height: 36rpx;
border-radius: 10rpx;
flex-shrink: 0;
}
.goodsInfo-right {
width: 634rpx;
height: 246rpx;
margin-left: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
.icon{
width: 60rpx;
height: 60rpx;
border-radius: 50%;
position: absolute;
left: 0rpx;
top: 40rpx;
}
.goods-image {
width: 180rpx;
height: 180rpx;
border-radius: 20rpx;
flex-shrink: 0;
}
.goodsInfo-box {
width: 428rpx;
margin-left: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
.goods-name {
// width: 428rpx;
font-size: 28rpx;
font-weight: 400;
color: #313133;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
letter-spacing: 2rpx;
margin-bottom: 32rpx;
}
.goods-price {
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FF2A30;
line-height: 40rpx;
letter-spacing: 2rpx;
.goods-original {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 34rpx;
padding-left: 12rpx;
text-decoration:line-through;
}
}
.spe {
width: 428rpx;
margin-top: 10rpx;
font-size: 24rpx;
font-weight: 400;
color: #919298;
}
.goods-box {
// width: 428rpx;
margin-top: 18rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-left: 10rpx;
.goods-num-box {
width: 168rpx;
height: 46rpx;
display: flex;
flex-direction: row;
align-items: center;
margin-right: 20rpx;
.goods-image {
width: 44rpx;
height: 44rpx;
background: #F6F6F6;
border-radius: 10rpx;
line-height: 38rpx;
text-align: center;
text {
color: #666666;
}
.goods-ban {
color: #C7C7C7;
}
}
.goods-num {
width: 76rpx;
height: 44rpx;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
line-height: 40rpx;
letter-spacing: 2rpx;
text-align: center;
color: #333333;
}
}
}
}
}
}
}
.statistics-box {
width: 750rpx;
display: flex;
flex-direction: column;
align-items: center;
background-color: #FFFFFF;
position: fixed;
bottom: 82rpx;
.statistics {
width: 720rpx;
padding: 0 0 0 30rpx;
height: 132rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.statistics-left {
width: 120rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
image {
width: 36rpx;
height: 36rpx;
}
text {
font-size: 30rpx;
font-weight: 400;
color: #313133;
}
.all-check {
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #666666;
line-height: 40rpx;
letter-spacing: 2rpx;
}
}
.statistics-right {
width: 600rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
.all {
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #666666;
line-height: 40rpx;
letter-spacing: 2rpx;
}
.btn {
width: 176rpx;
height: 88rpx;
background: #FF7700;
border-radius: 20rpx;
text-align: center;
color: #FFFFFF;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
line-height: 88rpx;
margin-left: 20rpx;
}
text {
font-size: 30rpx;
font-weight: 400;
color: #fff;
}
.text-icon {
font-size: 22rpx;
color: rgba(242, 18, 18, 1);
}
.text-color {
color: rgba(242, 18, 18, 1);
font-size: 44rpx;
font-weight: 600;
}
}
}
.gap {
width: 750rpx;
height: 40rpx;
}
}
}
</style>

33
components/skeleton-index/skeleton-index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<view>
<u-gap height="20"></u-gap>
<u-skeleton title loading titleWidth="20%"></u-skeleton>
<u-gap height="20"></u-gap>
<u-skeleton title loading titleWidth="100%" titleHeight="400rpx"></u-skeleton>
<view class="flex flex-space-between" style="padding: 30rpx;" v-for="(v,i) in ['1','1']" :key="i">
<view class="" style="width: 15%;" v-for="(item,index) in ['1','1','1','1','1']" :key="index">
<view style="padding-left: 14rpx;">
<u-skeleton avatarSize="80rpx" loading avatar :title="false">
</u-skeleton>
</view>
<u-gap height="10"></u-gap>
<u-skeleton title loading titleWidth="100%"></u-skeleton>
</view>
</view>
</view>
</template>
<script>
export default {
name:"skeleton-index",
data() {
return {
};
}
}
</script>
<style>
</style>

23
components/startEndTime/startEndTime.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<view>
<view style="margin-left: 20rpx;" @click="showPopup = true">
<u-icon width="40rpx" height="40rpx" name="https://img.agrimedia.cn/chwl%2Findex%2Fshaixuan.png">
</u-icon>
</view>
</view>
</template>
<script>
export default {
name:"startEndTime",
data() {
return {
};
}
}
</script>
<style>
</style>

212
components/sw-form/login.vue Normal file
View File

@ -0,0 +1,212 @@
<template>
<div class="account-wrap">
<!-- 登陆 -->
<div class="login-box">
<div class="list" >
<div class="name">国家和地区</div>
<div class="value">中国大陆</div>
</div>
<div class="list" @tap="focus('phone')">
<div class="name">+86</div>
<div class="value">
<text :class="{'show-bl':borderFor=='phone' && !login.phone, 'show-br':borderFor=='phone' && login.phone}">{{login.phone || '请输入手机号'}}</text>
</div>
</div>
<div class="list" @tap="focus('idcard')">
<div class="name">身份证号</div>
<div class="value">
<text :class="{'show-bl':borderFor=='idcard' && !login.idcard, 'show-br':borderFor=='idcard' && login.idcard}">{{login.idcard || '请输入身份证'}}</text>
</div>
</div>
<div class="list" @tap="focus('plateNumber')">
<div class="name">车牌号</div>
<div class="value">
<text :class="{'show-bl':borderFor=='plateNumber' && !login.plateNumber, 'show-br':borderFor=='plateNumber' && login.plateNumber}">{{login.plateNumber || '请输入车牌号'}}</text>
</div>
</div>
<div class="list" @tap="focus('checkcode')">
<div class="name">验证码</div>
<div class="value flex">
<text :class="{'show-bl':borderFor=='checkcode' && !login.checkcode, 'show-br':borderFor=='checkcode' && login.checkcode}">{{login.checkcode || '请输入验证码'}}</text>
<div class="send-btn" :class="{sending:loginCodeText!=='发送验证码'}" @tap="sendMsg(0)" v-text="loginCodeText=='发送验证码' ? loginCodeText : loginCodeText+'(s)'"></div>
</div>
</div>
<div class="submit" @tap="submit(0)" >登陆</div>
<!-- <div class="login-type">
<p>使用第三方登录</p>
<image src="/static/img/qq.png" @tap="login"></image>
<image src="/static/img/wechat.png"></image>
</div> -->
</div>
<keyboard-package :disableDot="true" :type="keyboardType" @input="inputVal" ref="keyboard"></keyboard-package>
</div>
</template>
<script>
// import { loginByPhone, getCode } from '@/api/api.js'
import keyboardPackage from '@/components/keyboard-package/keyboard-package.vue'
export default {
components:{keyboardPackage},
data () {
return {
borderFor:false, //当前是哪个输入框
keyboardFor: false, //当前键盘是给谁用的
loginCodeText:'发送验证码',
keyboardType: 1, //键盘类型 1-数字 2-身份证 3-车牌号
timer:false, //定时器
login:{
classfy:1,
type:1,
idcard:'',
phone:'', //手机号
checkcode:'' ,//验证码
plateNumber:'' //车牌号
},
}
},
methods: {
focus ( type ) {
let typeArr = {
phone: 1,
checkcode:1,
idcard: 2,
plateNumber: 3
}
if(this.borderFor != type) {
this.keyboardFor = type
this.keyboardType = typeArr[type]
clearInterval(this.timer)
this.timer = setInterval(()=>{
this.borderFor = this.borderFor == type ? false : type
},500)
}
this.$refs.keyboard.open()
},
inputVal ( val ) {
val = val.toString()
let key = this.keyboardFor
let _this = this
const writeValue = (key, maxlength)=>{
let len = _this.login[key].length
if(!val){
_this.login[key] = _this.login[key].substring(0, len-1)
return
}
if(len === maxlength) return
_this.login[key] += val
}
const funArr = {
phone () {
writeValue (key, 11)
},
idcard () {
writeValue (key, 18)
},
plateNumber () {
writeValue (key, 7)
},
checkcode () {
writeValue (key, 6)
}
}
funArr[key]()
},
//发送验证码
sendMsg ( type ) {
//检测手机号是否符合规则
let regPhone = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
if( !regPhone.test(this.login.phone) ){
uni.showToast({
title:'您的手机号输入不合法',
icon:'none'
})
return
}
// getCode({userid:this.login.phone,classfy:1})
// .then(res=>{
// this.log(res)
// let icon = 'none'
// let title = res.msg
// if( res.code === '200' ){
// icon = 'succes'
// title = '短信发送成功'
// this.loginCodeText = 60
// this.timer = setInterval(()=> {
// this.loginCodeText -= 1
// if( this.loginCodeText === 0){
// clearInterval(this.timer)
// this.loginCodeText = '发送验证码'
// }
// }, 1000)
// }
// uni.showToast({title,icon})
// })
},
//登陆、注册
submit ( type ) {
//检测手机号是否符合规则
let regPhone = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
if( !regPhone.test(this.login.phone) ){
uni.showToast({
title:'您的手机号输入不合法',
icon:'none'
})
return
}
let code = /^\d{6}$/
if(!this.login.checkcode || !code.test(this.login.checkcode)){
uni.showToast({
title:'验证码填写有误',
icon:'none'
})
return
}
//请求登录
}
}
}
</script>
<style scoped lang="scss">
.account-wrap{
.change-bar div{
width: 50%;text-align: center;color: #777;padding: 3px 0;
}
.login-box{
margin-top: 10px;
}
.line{
width: 40%;left: 5%;top: 45px;background:#A7CF2B;height: 2px;position: fixed;border-radius: 5px;
}
.list{
border-bottom: 1px solid #efefef;color: #777; padding: 5px 10px;margin: 5px auto;
display: flex;justify-content: space-between;align-items: center;font-size: .9rem;
.name{
width: 32%;
}
.value{
width: 68%;
text{border: 4upx solid transparent;}
.show-bl{border-left-color:#ccc}
.show-br{border-right-color:#ccc}
.send-btn{
width:50%;font-size: .8rem;text-align: center;
color: #A7CF2B;
}
.sending{color: #ccc !important;}
}
}
.submit{
width: 80%;padding: 8px 0;margin: 40px auto;background: #A7CF2B;text-align: center;
color: #fff;border-radius: 20px;box-shadow: 0 0 3px 1px #ccc;
}
.login-type{
text-align: center;color: #777;font-size: .7rem;
image{width: 30px;height: 30px;margin: 5px 10px;}
}
}
</style>

106
components/tabbars/tabbars.vue Normal file
View File

@ -0,0 +1,106 @@
<template>
<view class="u-page">
<view class="u-page__item">
<u-tabbar :zIndex="99999" :value="thisChecked" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
activeColor="#FF4D03">
<template v-for="(item,index) in tabs">
<u-tabbar-item :key="index" :text="item['title']" :icon="item['icon']" @click="setCurrent(index)"></u-tabbar-item>
</template>
</u-tabbar>
</view>
</view>
</template>
<script>
import {
mapGetters,
mapMutations
} from 'vuex'
export default {
name: "tabbars",
data() {
return {
tabs: [{
title: '首页',
icon: 'home-fill',
url: '/pages/index/index'
},
{
title: '分类',
icon: 'grid-fill',
url: '/pages/sort/sort'
},
{
title: '购物车',
icon: 'shopping-cart-fill',
url: '/pages/myCart/myCart'
},
{
title: '我的',
icon: 'account-fill',
url: '/pages/uCenter/uCenter'
}
],
tabbarsHeight: 0,
};
},
computed: {
...mapGetters({
thisChecked: 'tabbar/thisChecked',
}),
},
mounted() {
let self = this;
// 因为uni-app中的不支持uni.createSelectorQuery支付宝获取元素信息,且支付宝中的my.createSelectorQuery不支持获取组件信息,官方建议将获取信息放在组件内部使用,然后将获取到的元素信息传至父组件
// #ifdef MP-ALIPAY
this.$nextTick(() => {
my.createSelectorQuery()
.select('.u-tabbar__content').boundingClientRect()
.selectViewport().scrollOffset().exec((ret) => {
console.log(ret, '信息2');
self['tabbarsHeight'] = ret[0]['height']
})
})
// #endif
},
watch:{
thisChecked(val){
uni.switchTab({
url: this['tabs'][val]['url']
});
}
},
methods: {
...mapMutations({
setCurrent: 'tabbar/setCurrent'
}),
}
}
</script>
<style lang="scss">
.u-page {
padding: 0;
&__item {
&__title {
color: $u-primary;
background-color: $u-primary;
padding: 15px;
font-size: 15px;
&__slot-title {
color: $u-primary;
font-size: 14px;
}
}
&__slot-icon {
width: 17px;
height: 17px;
}
}
}
</style>

100
components/tabbarsnew/tabbarsnew.vue Normal file
View File

@ -0,0 +1,100 @@
<template>
<view class="u-page">
<view class="u-page__item">
<u-tabbar :zIndex="99999" :value="thisChecked" @change="changeTargets" :fixed="true" :placeholder="true"
:safeAreaInsetBottom="true" activeColor="#FF4D03">
<u-tabbar-item text="首页" icon="https://img.agrimedia.cn/chwl/v2/sy.png">
</u-tabbar-item>
<u-tabbar-item text="分类" icon="https://img.agrimedia.cn/chwl/v2/fl.png"></u-tabbar-item>
<u-tabbar-item text="购物车" icon="https://img.agrimedia.cn/chwl/v2/gwc.png"></u-tabbar-item>
<u-tabbar-item text="我的" icon="https://img.agrimedia.cn/chwl/v2/wd-active.png"></u-tabbar-item>
</u-tabbar>
</view>
</view>
</template>
<script>
import {
mapGetters,
mapMutations
} from 'vuex'
export default {
name: "tabbars",
data() {
return {
link: [
'/pages/index/index',
'/pages/sort/sort',
'/pages/myCart/myCart',
'/pages/uCenter/uCenter',
],
};
},
computed: {
...mapGetters({
thisChecked: 'tabbar/thisChecked',
}),
},
created() {
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
let curRoute = routes[routes.length - 1].route //获取当前页面路由
if(curRoute == 'pages/index/index'){
this.setCurrent(0)
}
if(curRoute == 'pages/sort/sort'){
this.setCurrent(1)
}
if(curRoute == 'pages/myCart/myCart'){
this.setCurrent(2)
}
if(curRoute == 'pages/uCenter/uCenter'){
this.setCurrent(3)
}
console.log(curRoute,'tabbar')
},
methods: {
...mapMutations({
setCurrent: 'tabbar/setCurrent'
}),
changeTargets(e) {
console.log(e, 'changeTargets')
this.setCurrent(e)
uni.reLaunch({
url: this.link[e],
complete(res) {
console.log(res)
}
})
// name => value6 = name
}
}
}
</script>
<style lang="scss">
.u-page {
padding: 0;
&__item {
&__title {
color: $u-primary;
background-color: $u-primary;
padding: 15px;
font-size: 15px;
&__slot-title {
color: $u-primary;
font-size: 14px;
}
}
&__slot-icon {
width: 17px;
height: 17px;
}
}
}
</style>

52
components/tagsTitle/tagsTitle.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<view>
<view class="top">
<u-cell-group>
<u-cell
:title="this.title"
:value="this.value"
:isLink = "this.isLink"
@click="cellClick"
></u-cell>
</u-cell-group>
</view>
</view>
</template>
<script>
export default {
name:"tagsTitle",
props:{
title:{
type:String,
default:""
},
value:{
type:String,
default:"切换"
},
isLink:{
type:Boolean,
default:true
}
},
data() {
return {
};
},
methods:{
cellClick(e){
this.$emit('cellClick',e)
}
}
}
</script>
<style>
.top{
background-color: #FFFFFF;
border-top-left-radius: 30rpx;
border-top-right-radius: 30rpx;
}
</style>

216
components/teamGroup/teamGroup.vue Normal file
View File

@ -0,0 +1,216 @@
<template>
<view>
<view class="group-box">
<view class="flex" style="padding: 20rpx;" @click="goFansInfo">
<u-avatar size="127rpx" :src="detail.user_thumbnail"></u-avatar>
<view style="width: 100%;padding-left: 20rpx;">
<view class="flex flex-space-between">
<view class="flex" style="padding-top: 20rpx;">
<view class="big-333 bold">
{{detail.u_nickname}}
</view>
<view style="margin-left: 10rpx;padding-top: 4rpx;">
<u-image width="100rpx" height="36rpx" :src="'/static/icon/level/v'+(detail.u_level+1)+'.png'"></u-image>
</view>
</view>
<view class="lit-666" style="padding-top: 20rpx;">
{{detail.createtime?detail.createtime.substr(0,10):''}}
</view>
</view>
<u-gap height="20rpx"></u-gap>
<view class="flex flex-space-between">
<view class="tab-box">
<text v-if="isHideScan == 0">{{detail.is_scan}}</text>
<text v-if="showTj == false" @click="showTjx">推荐人</text>
</view>
<view class="">
<text class="lit-333">邀请码：</text>
<text class="lit-666">{{detail.invite_code}}</text>
<text class="iconfont icon-copy" @click.stop="copyThis(detail.invite_code)"
style=" margin-left: 19rpx; color: #666; font-size:24rpx;"></text>
</view>
</view>
</view>
</view>
<view v-if="showTj" class="flex flex-space-between" style="margin: 0 60rpx;">
<view class="box-nr">
<view class="t-tt">
订单量
</view>
<view class="t-vl">
{{detail.order_count}}
</view>
</view>
<view class="box-nr">
<view class="t-tt">
下级粉丝
</view>
<view class="t-vl">
{{detail.fans_count}}
</view>
</view>
<view class="box-nr">
<view class="t-tt">
累计收益
</view>
<view class="t-vl">
{{detail.total_amount/100}}
</view>
</view>
</view>
</view>
<u-popup bgColor="transparent" :show="showPopup" @close="showPopup = false" mode="center">
<view class="alt-box">
<view class="big-333 bold">
推荐人信息
</view>
<view class="tx">
<u-image radius="50%" width="125rpx" height="125rpx" :src="u_p1Data.user_thumbnail"></u-image>
</view>
<view class="big-333 bold">
{{u_p1Data.u_nickname}}
</view>
<view class="lit-666" style="margin-top: 20rpx;">
邀请码：{{u_p1Data.invite_code}}
</view>
<view class="lit-666" style="margin-top: 20rpx;">
微信号：{{u_p1Data.u_wx_id}}
</view>
<view class="btn-class">
<u-button @click="copyThis(u_p1Data.u_wx_id)" color="linear-gradient(45deg,#FFAD02,#FD8F3B)" text="复制微信号"></u-button>
</view>
<view class="btn-class">
<u-button @click="showPopup = false" color="#999999" text="取消"></u-button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
name: "teamGroup",
props: {
showTj: {
type: Boolean,
default: true
},
isHideScan:{
type:Number,
default:0
},
canClick: {
type: Boolean,
default: false
},
detail:{
type:Object,
default:null
},
userMember:{
typeof:Number,
default:0
}
},
data() {
return {
u_p1Data:{},
showPopup:false,
};
},
methods:{
copyThis(str) {
console.log(str)
uni.setClipboardData({
data: str, //要被复制的内容
success: () => { //复制成功的回调函数
uni.showToast({ //提示
title: "复制成功"
})
},
fail(e) {
console.log(e)
}
});
},
goFansInfo(){
if(!this.canClick){
return ;
}
// console.log(this.userMember);return
if(this.userMember == 1){
uni.navigateTo({
url:'/b_client/member/fansInfo?u_id='+this.detail.u_id+'&is_scan=其他&isUserCenter=1'
// url: '/pages/Myteam/fansdetails?u_id='+u_id +'&orderNum='+ on+'&fans_count='+fc+'&sy='+sy
})
return
}
uni.navigateTo({
url:'/b_client/member/fansInfo?u_id='+this.detail.u_id+'&is_scan='+this.detail.is_scan
})
},
showTjx(){
// 这里ajax搞一下
//this.$emit('getTjx',{u_p1:this.detail.u_p1})
// return
this.$store.dispatch('api/recommender',{
u_p1 :this.detail.u_p1
}).then(res => {
this.u_p1Data = res
this.showPopup = true;
})
}
}
}
</script>
<style lang="scss">
.alt-box{
background-color: #F8F8F8;
border-radius: 20rpx;
min-width: 470rpx;
text-align: center;
padding: 20rpx;
.tx{
width: 125rpx;
height: 125rpx;
margin: 20rpx auto;
border: 10rpx solid #fff;
border-radius: 50%;
}
}
.btn-class{
width: 242rpx;
margin: 20rpx auto;
}
.box-nr {
.t-tt {
color: #666666;
font-size: 24rpx;
text-align: center;
margin-top: 20rpx;
}
.t-vl {
margin-top: 10rpx;
color: #666666;
font-size: 24rpx;
text-align: center;
font-weight: bold;
}
}
.tab-box {
text {
border: 2rpx solid #999999;
border-radius: 20rpx;
font-size: 24rpx;
color: #999;
padding: 0 10rpx 5rpx 10rpx;
margin-right: 20rpx;
}
}
</style>

46
components/新建文件夹/b-Bottom-Fit/b-Bottom-Fit.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<view class="b-Bottom-Fit" :class="[Class]"></view>
</template>
<script>
export default {
name: "b-Bottom-Fit",
data() {
return {
// Class: ''
};
},
computed:{
Class(){
// 获取系统信息
let system = uni.getSystemInfoSync();
console.log(system.platform, '设备类型');
if (system.platform === 'android' || system.platform === 'devtools') {
return 'Android';
} else if (system.platform === 'ios' || system.platform === 'devtools') {
return 'IOS';
}
}
},
mounted() {
}
}
</script>
<style lang="scss">
.b-Bottom-Fit {
width: 100%;
}
.Android {
padding-bottom: 32rpx;
box-sizing: content-box;
}
.IOS {
height: constant(safe-area-inset-bottom);
height: calc(env(safe-area-inset-bottom));
box-sizing: content-box;
}
</style>

918
components/新建文件夹/b-Shopping-Cart/b-Shopping-Cart.vue Normal file
View File

@ -0,0 +1,918 @@
<template>
<view class="b-Shopping-Cart">
<template v-if="BrandInfor['brand_id'] == 1">
<!-- 购物车 -->
<view class="shoppingcart">
<view class="left">
<view class="left-img">
<image class="img" @tap="Shoplength > 0?shoppingshow = !shoppingshow:''"
:src="qnyurl('gouwuceicon.png')" mode="aspectFill">
</image>
<u-badge type="error" v-if="Shoplength > 0" absolute :value="Shoplength" :offset="[0,5]">
</u-badge>
</view>
<view class="price">
<text class="yang">￥</text>
<text class="amount">{{RetainDecimalPoint(totalPrice)}}</text>
</view>
</view>
<view class="right" @tap="create" :class="[Shoplength > 0?'right2':'']">
{{Shoplength > 0?'选好了':'未选择商品'}}
</view>
</view>
<!-- 购物车弹框 -->
<u-popup :round="15" :overlayStyle="{bottom:'100rpx'}" bottom="100rpx" closeOnClickOverlay
@close="shoppingshow = false" :show="shoppingshow" mode="bottom">
<view class="popupcontent">
<scroll-view :scroll-top="0" scroll-y style="height: 642rpx;">
<template v-for="(item,index) in MealList">
<view class="popupcontent-item" :key='index'>
<!-- 商品 -->
<view class="name">
{{item['product_name']}}
</view>
<!-- 价格 -->
<view class="money">
<view class="price">
<text class="yang">￥</text>
<text
class="amount">{{RetainDecimalPoint(item['pay_price'] * item['num'])}}</text>
</view>
</view>
<!-- 数量 -->
<view class="quantity">
<image class="img" :src="qnyurl('jian.png')" mode="" @tap="reducecommodity(item)">
</image>
<view class="num">
{{item['num']}}
</view>
<image class="img" :src="qnyurl('jia.png')" mode="" @tap="Addcommodity(item)">
</image>
</view>
</view>
</template>
</scroll-view>
</view>
</u-popup>
</template>
<!-- 瑞幸购物车 -->
<template v-if="BrandInfor['brand_id'] == 13">
<!-- 购物车 -->
<view class="shoppingcart-rx">
<view class="shoppingcart-rx-left" @tap="Shoplength > 0?shoppingshow = !shoppingshow:''">
<view class="shoppingcart-rx-left-img">
<image class="img" :src="qnyurl('shopping.png','rx')" mode="aspectFill">
</image>
<u-badge type="error" v-if="Shoplength > 0" absolute :value="Shoplength" :offset="[0,5]">
</u-badge>
</view>
<view class="shoppingcart-rx-left-price">
<text class="yang">￥</text>
<text class="amount">{{RetainDecimalPoint(totalPrice)}}</text>
</view>
</view>
<view class="shoppingcart-rx-right" @tap="create" :class="[Shoplength > 0?'right2':'']">
{{Shoplength > 0?'结算':'未选择商品'}}
</view>
</view>
<!-- 购物车弹框 -->
<u-popup :round="15" :overlayStyle="{bottom:'100rpx'}" bottom="100rpx" closeOnClickOverlay
@close="shoppingshow = false" :show="shoppingshow" mode="bottom">
<view class="popupcontent-rx">
<scroll-view :scroll-top="0" scroll-y style="height: 642rpx;">
<view class="popupcontent-rx-top">
<view class="text">
已选商品
</view>
<view class="popupcontent-rx-top-empty" @tap="EMPTY(GetShopInfor['restaurant_id'])">
<image class="img" :src="qnyurl('qingkong.png','rx')" mode=""></image>
<text>清空购物车</text>
</view>
</view>
<template v-for="(item,index) in MealList">
<view class="popupcontent-rx-item" :key='index'>
<view class="popupcontent-rx-item-commodity">
<view class="popupcontent-rx-item-commodity-img">
<image class="img" :src="item['product_img']" mode=""></image>
</view>
<view class="popupcontent-rx-item-commodity-infor">
<!-- 商品 -->
<view class="popupcontent-rx-item-commodity-infor-name">
{{item['product_name']}}
</view>
<view class="popupcontent-rx-item-commodity-infor-sku">
{{item['sku'].join('/')}}
</view>
<!-- 价格 -->
<view class="popupcontent-rx-item-commodity-infor-money">
<view class="popupcontent-rx-item-commodity-infor-money-price">
<text
class="popupcontent-rx-item-commodity-infor-money-yang">￥</text>
<text
class="popupcontent-rx-item-commodity-infor-money-amount">{{RetainDecimalPoint(item['pay_price'] * item['num'])}}</text>
</view>
</view>
</view>
</view>
<!-- 数量 -->
<view class="quantity">
<image class="img" :src="qnyurl('reduce.png','rx')" mode=""
@tap="reducecommodity(item)">
</image>
<view class="num">
{{item['num']}}
</view>
<image class="img" :src="qnyurl('add.png','rx')" mode="" @tap="Addcommodity(item)">
</image>
</view>
</view>
</template>
</scroll-view>
</view>
</u-popup>
</template>
<template v-if="BrandInfor['brand_id'] == 10">
<!-- 购物车 -->
<view class="shoppingcart-xbk">
<view class="shoppingcart-xbk-left" @tap="Shoplength > 0?shoppingshow = !shoppingshow:''">
<view class="shoppingcart-xbk-left-img">
<image class="img" :src="qnyurl('shopping.png','xbk')" mode="heightFix">
</image>
<u-badge type="error" v-if="Shoplength > 0" absolute :value="Shoplength" :offset="[0,5]">
</u-badge>
</view>
<view class="shoppingcart-xbk-left-price">
<text class="yang">￥</text>
<text class="amount">{{RetainDecimalPoint(totalPrice)}}</text>
</view>
</view>
<view class="shoppingcart-xbk-right" @tap="create" :class="[Shoplength > 0?'right2':'']">
{{Shoplength > 0?'结算':'未选择商品'}}
</view>
</view>
<!-- 购物车弹框 -->
<u-popup :round="15" :overlayStyle="{bottom:'100rpx'}" bottom="100rpx" closeOnClickOverlay
@close="shoppingshow = false" :show="shoppingshow" mode="bottom">
<view class="popupcontent-xbk">
<scroll-view :scroll-top="0" scroll-y style="height: 642rpx;">
<view class="popupcontent-xbk-top">
<view class="text">
已选商品
</view>
<view class="popupcontent-xbk-top-empty" @tap="EMPTY(GetShopInfor['restaurant_id'])">
<image class="img" :src="qnyurl('qingkong.png','xbk')" mode=""></image>
<text>清空购物车</text>
</view>
</view>
<template v-for="(item,index) in MealList">
<view class="popupcontent-xbk-item" :key='index'>
<view class="popupcontent-xbk-item-commodity">
<view class="popupcontent-xbk-item-commodity-img">
<image class="img" :src="item['product_img']" mode=""></image>
</view>
<view class="popupcontent-xbk-item-commodity-infor">
<!-- 商品 -->
<view class="popupcontent-xbk-item-commodity-infor-name">
{{item['product_name']}}
</view>
<view class="popupcontent-xbk-item-commodity-infor-sku">
{{item['sku'].join('/')}}
</view>
<!-- 价格 -->
<view class="popupcontent-xbk-item-commodity-infor-money">
<view class="popupcontent-xbk-item-commodity-infor-money-price">
<text
class="popupcontent-xbk-item-commodity-infor-money-yang">￥</text>
<text
class="popupcontent-xbk-item-commodity-infor-money-amount">{{RetainDecimalPoint((item['pay'] * item['num']))}}</text>
</view>
</view>
</view>
</view>
<!-- 数量 -->
<view class="quantity">
<image class="img" :src="qnyurl('reduce.png','xbk')" mode=""
@tap="reducecommodity(item)">
</image>
<view class="num">
{{item['num']}}
</view>
<image class="img" :src="qnyurl('add.png','xbk')" mode="" @tap="Addcommodity(item)">
</image>
</view>
</view>
</template>
</scroll-view>
</view>
</u-popup>
</template>
</view>
</template>
<script>
// vuex
// import {
// mapGetters,
// mapMutations,
// mapActions
// } from 'vuex';
// 混入
import mixin from '@/static/js/mixin/mixin.js';
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
export default {
mixins: [mixin,restaurantmixins],
name: "b-Shopping-Cart",
props:{
tabbar:{
type:Array,
default:()=>[],
}
},
data() {
return {
// 购物车
MealList: [],
// 购物车合计
totalPrice: 0,
// 购物车弹框显示变量
shoppingshow: false
};
},
computed: {
// ...mapGetters({
// // 获取品牌Id
// BrandInfor: 'shopping/BrandInfor',
// // 获取餐厅信息
// GetShopInfor: 'shopping/GetShopInfor',
// // 获取购物车
// GetCartList: 'shopping/GetCartList',
// }),
//当前商店购物信息
// shopCart() {
// try {
// return {
// ...this['GetCartList']
// };
// } catch (e) {
// return {}
// }
// },
// 获取购物车长度
Shoplength() {
if (this['MealList']['length'] <= 0) {
this['shoppingshow'] = false;
}
return this['MealList']['length'];
}
},
watch: {
GetCartList: {
deep: true,
immediate: true,
handler(val) {
console.log(val, 'GetCartList');
this.initCategoryNum();
}
}
},
methods: {
/**
* @本地数据与当前餐厅数格式化
* */
initCategoryNum() {
console.log(this['tabbar'],'-----------');
// 因为该方法是每次商品数据变更都会重新加载,所以不用考虑是否会重复添加问题
if (this['tabbar']['length'] <= 0) return;
console.log(this.GetCartList,'进入initCategoryNum');
console.time()
// 先将菜单数据整合成一个数组
let shoparr = [];
let newArr = [];
let Price = 0;
this['tabbar'].map(item => {
shoparr.push(...item['foods'])
});
// 将所有商品的id取出
let commodityids = shoparr.map(item => item['product_id']);
// 循环购物车
console.log(Object.keys(this['GetCartList']),'*********');
let list = Object.keys(this['GetCartList']);
console.log(list,'进入initCategoryNum');
for (let i = 0; i < list['length']; i++) {
console.log('*********');
// 将item转为数字
let id = +Object.keys(this['GetCartList'])[i];
// // 在commodityids中查找item
let index = commodityids.indexOf(id);
// let cmr = this.screensku_xbk(shoparr[index]['details']['optional'],shoparr[index]['pay_price']);
// let newarr = this['GetCartList'][id]['sku_code'].split(',').map(item=>item.replace('_',',').split(','));
let item = {};
if (index != -1) {
item = {
// ...this['GetCartList'][id],
...shoparr[index],
num: this['GetCartList'][id]['num'],
sku: this['GetCartList'][id]['sku'],
sku_code: this['GetCartList'][id]['sku_code'],
restaurant_id: this['GetShopInfor']['restaurant_id'],
// 加入购物车时会根据商品原价与算选规格价格计算得到规格价格加上原价的实际价格
pay: this['GetCartList'][id]['pay'] || 0
};
// console.log(item,'itemitemitemitemitem');
// for(let i = 0; i < item['details']['optional']['length'];i++){
// for(let j = 0; i<item['details']['optional'][i]['sku_infos']['length'];j++){
// if((+item['details']['optional'][i]['id']) == (+newarr[i][j]) && (+item['details']['optional'][i]['sku_infos'][i]['id']) == (+newarr[i][j+1])){
// item['details']['optional'][i]['sku_infos'][j]['checked'] = true;
// }else{
// item['details']['optional'][i]['sku_infos'][j]['checked'] = false;
// }
// }
// }
// console.log(item,'itemitemitemitemitem');
newArr.push(item);
if(this['BrandInfor']['brand_id'] == 10){
Price += ((+item['pay']) * item['num']);
}else{
Price += ((+item['pay_price']) * item['num']);
}
// 此处逻辑是将同商品下的不同规格数据取出来
if (this['GetCartList'][id]['Differentskulist'] && this['GetCartList'][id]['Differentskulist'][
'length'
] > 0) {
for (let i = 0; i < this['GetCartList'][id]['Differentskulist']['length']; i++) {
let _item = this['GetCartList'][id]['Differentskulist'][i];
console.log(_item);
_item = {
...shoparr[index],
num: _item['num'],
sku: _item['sku'],
sku_code: _item['sku_code'],
// 加入购物车时会根据商品原价与算选规格价格计算得到规格价格加上原价的实际价格
pay:_item['pay']
};
this['GetCartList'][id]['Differentskulist'][i] = _item;
};
newArr.push(...this['GetCartList'][id]['Differentskulist']);
if(this['BrandInfor']['brand_id'] == 10){
Price += this['GetCartList'][id]['Differentskulist'].map(e => e['pay'] * e['num'])
.reduce((a, b) => a + b);
}else{
Price += this['GetCartList'][id]['Differentskulist'].map(e => e['pay_price'] * e['num'])
.reduce((a, b) => a + b);
}
}
} else {
// 后期处理存在购物车但是店铺已下架商品
}
};
console.log(newArr,'newArrnewArrnewArrnewArr');
this['MealList'] = newArr;
this['totalPrice'] = Price;
console.timeEnd()
console.log('结束initCategoryNum');
},
/**
* @添加数量/增加商品
* */
Addcommodity(item) {
console.log(item);
console.log(this,'*-*-*')
this.ADD_CART({
commodity: item
})
},
/**
* @减少/删除商品
* */
reducecommodity(item) {
this.REDUCE_CART(item)
},
/**
* @创建订单页面
* */
create() {
if (this['Shoplength'] <= 0) return;
this['$parent']['loading'] = true;
let self = this;
self.SETREPLACE(self['MealList']);
switch (this['BrandInfor']['brand_id']) {
case 1:
uni.navigateTo({
url: `/pages/restaurant/order/orders-settlement/orders-settlement`,
success: () => {
this['$parent']['loading'] = false;
}
});
break;
case 13:
uni.navigateTo({
url: `/pages/restaurant/order/orders-settlement/rx-orders-settlement`,
success: () => {
this['$parent']['loading'] = false;
}
});
break;
case 10:
uni.navigateTo({
url: `/pages/restaurant/order/orders-settlement/xbk_orders_settlement`,
success: () => {
this['$parent']['loading'] = false;
}
});
break;
}
},
}
}
</script>
<style lang="scss">
// 肯德基购物车
.shoppingcart {
width: 100%;
display: flex;
justify-content: space-between;
position: relative;
z-index: 20075;
.left {
flex: 1;
height: 100rpx;
background-color: #333333;
display: flex;
align-items: center;
padding-left: 50rpx;
&-img {
position: relative;
.img {
width: 65rpx;
height: 65rpx;
margin-right: 25rpx;
}
}
.price {
color: #ffffff;
display: flex;
align-items: baseline;
.yang {
font-size: 26rpx;
}
.amount {
font-size: 50rpx;
}
}
}
// 未选择商品样式
.right {
width: 235rpx;
height: 100rpx;
background: #DFDFDF;
color: #333333;
text-align: center;
line-height: 100rpx;
}
// 已选择商品样式
.right2 {
background: #C63836 !important;
color: #ffffff !important;
}
}
.popupcontent {
width: 100%;
// padding-bottom: calc();
height: 642rpx;
background-color: #ffffff;
&-item {
width: 100%;
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx;
box-sizing: border-box;
.name {
font-size: $FONTSIZE26;
max-width: 336rpx;
min-width: 336rpx;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.money {
color: $THEMECOLOR1;
max-width: 115rpx;
min-width: 115rpx;
text-align: center;
.yang {
font-size: $FONTSIZE22;
}
.price {
font-size: $FONTSIZE30;
}
}
.quantity {
display: flex;
justify-content: space-between;
align-items: center;
font-size: $FONTSIZE36;
.num {
max-width: 100rpx;
min-width: 100rpx;
text-align: center;
}
.img {
width: 42rpx;
height: 42rpx;
}
}
}
}
// 瑞幸购物车
.shoppingcart-rx {
width: 100%;
display: flex;
justify-content: space-between;
position: relative;
z-index: 20075;
background-color: #ffffff;
align-items: center;
padding: 0 32rpx;
&-left {
flex: 1;
height: 100rpx;
display: flex;
align-items: center;
&-img {
position: relative;
.img {
width: 65rpx;
height: 65rpx;
margin-right: 25rpx;
}
}
&-price {
color: #000000;
display: flex;
align-items: baseline;
.yang {
font-size: 26rpx;
}
.amount {
font-size: 50rpx;
}
}
}
&-right {
width: 225rpx;
height: 77rpx;
background: linear-gradient(-77deg, #4A6FE7, #83ACFF);
box-shadow: 0 6rpx 8rpx 0 rgba(74, 111, 231, 0.2300);
border-radius: 48rpx;
text-align: center;
color: #ffffff;
line-height: 77rpx;
}
}
.popupcontent-rx {
width: 100%;
// padding-bottom: calc();
height: 642rpx;
background-color: #ffffff;
.popupcontent-rx-top {
width: 100%;
height: 87rpx;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
padding: 0 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 26rpx;
.text {
color: #666666;
}
&-empty {
color: #666666;
display: flex;
align-items: center;
padding: 15rpx 0 15rpx 15rpx;
.img {
width: 29rpx;
height: 31rpx;
margin-right: 15rpx;
}
}
}
&-item {
width: 100%;
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx;
box-sizing: border-box;
&-commodity {
display: flex;
&-img {
width: 120rpx;
height: 120rpx;
.img {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
&-infor {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-left: 22rpx;
&-name {
font-size: $FONTSIZE30;
max-width: 336rpx;
min-width: 336rpx;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
&-sku {
color: #999999;
font-size: $FONTSIZE22;
}
&-money {
color: $THEMECOLOR1;
max-width: 115rpx;
min-width: 115rpx;
text-align: center;
color: #FF780F;
&-yang {
font-size: $FONTSIZE22;
}
&-price {
display: flex;
align-items: center;
font-size: $FONTSIZE30;
}
}
}
}
.quantity {
display: flex;
justify-content: space-between;
align-items: center;
font-size: $FONTSIZE36;
.num {
max-width: 100rpx;
min-width: 100rpx;
text-align: center;
}
.img {
width: 42rpx;
height: 42rpx;
}
}
}
}
// 星巴克
// 瑞幸购物车
.shoppingcart-xbk {
width: 100%;
display: flex;
justify-content: space-between;
position: relative;
z-index: 20075;
background-color: #ffffff;
align-items: center;
padding: 0 32rpx;
&-left {
flex: 1;
height: 100rpx;
display: flex;
align-items: center;
&-img {
position: relative;
.img {
width: 65rpx;
height: 65rpx;
margin-right: 25rpx;
}
}
&-price {
color: #000000;
display: flex;
align-items: baseline;
.yang {
font-size: 26rpx;
}
.amount {
font-size: 50rpx;
}
}
}
&-right {
width: 225rpx;
height: 77rpx;
background: #00AF66;
box-shadow: 0 6rpx 8rpx 0 rgba(74, 111, 231, 0.2300);
border-radius: 48rpx;
text-align: center;
color: #ffffff;
line-height: 77rpx;
}
}
.popupcontent-xbk {
width: 100%;
// padding-bottom: calc();
height: 642rpx;
background-color: #ffffff;
.popupcontent-xbk-top {
width: 100%;
height: 87rpx;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
padding: 0 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 26rpx;
.text {
color: #666666;
}
&-empty {
color: #666666;
display: flex;
align-items: center;
padding: 15rpx 0 15rpx 15rpx;
.img {
width: 29rpx;
height: 31rpx;
margin-right: 15rpx;
}
}
}
&-item {
width: 100%;
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx;
box-sizing: border-box;
&-commodity {
display: flex;
&-img {
width: 120rpx;
height: 120rpx;
.img {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
&-infor {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-left: 22rpx;
&-name {
font-size: $FONTSIZE30;
max-width: 336rpx;
min-width: 336rpx;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
&-sku {
color: #999999;
font-size: $FONTSIZE22;
}
&-money {
color: $THEMECOLOR1;
max-width: 115rpx;
min-width: 115rpx;
text-align: center;
color: #FF780F;
&-yang {
font-size: $FONTSIZE22;
}
&-price {
display: flex;
align-items: center;
font-size: $FONTSIZE30;
}
}
}
}
.quantity {
display: flex;
justify-content: space-between;
align-items: center;
font-size: $FONTSIZE36;
.num {
max-width: 100rpx;
min-width: 100rpx;
text-align: center;
}
.img {
width: 42rpx;
height: 42rpx;
}
}
}
}
</style>

133
components/新建文件夹/b-load/b-load.vue Normal file
View File

@ -0,0 +1,133 @@
<template>
<view class="b-load" :style="[Style]" v-show="display">
<view class="b-load-content">
<view class="b-load-content-Img">
<image :src="LoadImg" mode="" :style="[ImgStyle]"></image>
</view>
<view class="b-load-content-text" :style="[TextStyle]">
{{LoadText}}
</view>
</view>
</view>
</template>
<script>
/**
* 点餐加载组件
* @property { Boolean } show 组件显示
* @property { String } position 加载组件的定位对应css中的定位属性，值为absolute时组件父元素必须是relative
* @property { String } background 加载组件的背景色，16进的或者rgba都可以
* @property { String } img 组件加载中图片
* @property { String } type 加载组件类型
* @property { String } color 提示文字颜色
*/
// 加载中 load
// 加载中 close
// 加载中 orders
// 加载中 store
import props from './prop.js';
import mixin from '@/static/js/mixin/mixin.js'
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js'
export default {
mixins:[props,mixin,restaurantmixins],
name: "b-load",
data() {
return {
};
},
computed:{
display(){
console.log('组件状态');
return this['show']
},
GetType(){
return this['type']
},
Style(){
let style = {};
style['position'] = this['position'];
style['background-color'] = this['background'];
style['z-index'] = new Date().getTime();
return style;
},
ImgStyle() {
return {
width: `${this['width']}rpx`,
height: `${this['height']}rpx`
}
},
TextStyle(){
return {
color:this['color']
};
},
LoadText() {
if(this['text'] != ''){
return this['text'];
}
// 加载中
if (this['GetType'] == 'load') {
return '加载中，请稍后'
} else if (this['GetType'] == 'close') {
// 闭店
return '抱歉，该门店已打烊'
} else if (this['GetType'] == 'orders') {
// 没有订单
return '您还没有小食订单 '
} else if (this['GetType'] == 'store') {
// 没有门店
return '该地区暂无门店信息'
}
},
LoadImg() {
if(this['img'] != ''){
return this['img'];
}
// 加载中
if (this['GetType'] == 'load') {
if(this['BrandInfor']['brand_id'] == 1){
return this.qnyurl('kdjload.png')
}else if(this['BrandInfor']['brand_id'] == 10){
return this.qnyurl('load.gif', 'xbk')
}else if(this['BrandInfor']['brand_id'] == 13){
return this.qnyurl('load.png', 'rx')
}
} else if (this['GetType'] == 'close') {
// 闭店
return this.qnyurl('closureimg.png', 'rx')
} else if (this['GetType'] == 'orders') {
// 没有订单
return this.qnyurl('orderno.png', 'rx')
} else if (this['GetType'] == 'store') {
// 没有门店
return this.qnyurl('default.png', 'rx')
}
},
}
}
</script>
<style lang="scss">
.b-load {
width: 100%;
height: 100%;
left: 0;
top: 0;
&-content{
width: 100%;
height: 100%;
display: flex;
align-items:center;
flex-direction:column;
justify-content: center;
&-text{
margin-top: 34rpx;
font-size: 28rpx;
}
}
}
</style>

41
components/新建文件夹/b-load/prop.js Normal file
View File

@ -0,0 +1,41 @@
export default {
props:{
img:{
type:String,
default:''
},
text:{
type:String,
default:''
},
show:{
type: Boolean,
default: false
},
position: {
type: String,
default: 'fixed'
},
background:{
type:String,
default:'#FFFFFF'
},
width:{
type:String,
default:''
},
height:{
type:String,
default:''
},
type:{
type:String,
default:'load'
},
color:{
type:String,
default:'#FFFFFF'
}
}
}

364
components/新建文件夹/b-orders/b-order-item-settlement.vue Normal file
View File

@ -0,0 +1,364 @@
<template>
<view class="Order-settlement">
<view class="Order-settlement-left">
<view class="Order-settlement-left-item">
原价: ￥{{RetainDecimalPoint(InforData['original_price'])}}
</view>
<view class="Order-settlement-left-item">
消费补贴卡抵扣：￥{{RetainDecimalPoint(InforData['deduction_amount_total'])}}
</view>
<view class="Order-settlement-left-item">
预估佣金：￥{{InforData['self_commission']}}
</view>
</view>
<view class="Order-settlement-btn-price">
<view class="Order-settlement-btn-price-pay-price">
<text class="text1">{{InforData['status'] | OrderStateText}}：</text>
<text class="text2" style="color:#DE2F2C">￥{{RetainDecimalPoint(InforData['pay_price'])}}</text>
</view>
<!-- 待支付 -->
<view class="Order-settlement-btn-price-operate" v-if="InforData['status'] == OrderStatus0">
<view class="btn btn1" @tap.stop="cancel(InforData['order_sn'],index)">
取消订单
</view>
<view class="btn btn2" :style="[orderStyle]" @tap.stop="payment(InforData['order_sn'],index)">
去支付
</view>
</view>
<!-- 已出餐 -->
<view class="Order-settlement-btn-price-operate" v-if="InforData['status'] == OrderStatus2">
<!-- 瑞幸-已出参订单按钮 -->
<template v-if="Brand_RX">
<view class="btn btn1" @tap.stop="service">
联系客服
</view>
<!-- <navigator hover-class="none" -->
<!-- :url="`/pages/restaurant/order/order-details/rx-orders-details?order=${InforData['order_sn']}`"> -->
<view class="btn btn2" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['RX_brand_id'])">
查看取餐码
</view>
<!-- </navigator> -->
</template>
<!-- 肯德基-已出参订单按钮 -->
<template v-if="Brand_KFC">
<!-- <navigator hover-class="none"
:url="`/pages/restaurant/order/order-details/order-details?order=${InforData['order_sn']}`"> -->
<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['KFC_brand_id'])">
查看取餐码
</view>
<!-- </navigator> -->
</template>
<!-- 星巴克-已出参订单按钮 -->
<template v-if="Brand_XBK">
<!-- <navigator hover-class="none" -->
<!-- :url="`/pages/restaurant/order/order-details/xbk-orders-details?order=${InforData['order_sn']}`"> -->
<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['XBK_brand_id'])">
取餐口令
</view>
<!-- </navigator> -->
</template>
</view>
<!-- 已出餐（部分退款） -->
<view class="Order-settlement-btn-price-operate" v-if="InforData['status'] == OrderStatus4">
<!-- 瑞幸-已出参（部分退款）订单按钮 -->
<template v-if="Brand_RX">
<!-- <navigator hover-class="none" -->
<!-- :url="`/pages/restaurant/order/order-details/rx-orders-details?order=${InforData['order_sn']}`"> -->
<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['RX_brand_id'])">
查看取餐码
</view>
<!-- </navigator> -->
</template>
<!-- 肯德基-已出参（部分退款）订单按钮 -->
<template v-if="Brand_KFC">
<!-- <navigator hover-class="none" -->
<!-- :url="`/pages/restaurant/order/order-details/order-details?order=${InforData['order_sn']}`"> -->
<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['KFC_brand_id'])">
查看取餐码
</view>
<!-- </navigator> -->
</template>
<!-- 星巴克-已出参（部分退款）订单按钮 -->
<template v-if="Brand_XBK">
<!-- <navigator hover-class="none" -->
<!-- :url="`/pages/restaurant/order/order-details/xbk-orders-details?order=${InforData['order_sn']}`"> -->
<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['XBK_brand_id'])">
查看口令
</view>
<!-- </navigator> -->
</template>
</view>
<!-- 待出餐/已退款（订单失败就会退款） -->
<view class="Order-settlement-btn-price-operate"
v-if="InforData['status'] == OrderStatus1 || InforData['status'] == OrderStatus3">
<!-- 瑞幸-待出餐/已退款订单按钮 -->
<template v-if="Brand_RX">
<view class="btn btn1" @tap.stop="service">
联系客服
</view>
<!-- <navigator hover-class="none" -->
<!-- :url="`/pages/restaurant/order/order-details/rx-orders-details?order=${InforData['order_sn']}`"> -->
<view class="btn btn1 btn2" @tap.stop="OrderDetails(shopid['RX_brand_id'])">
查看订单
</view>
<!-- </navigator> -->
</template>
<!-- 肯德基-待出餐/已退款订单按钮 -->
<template v-if="Brand_KFC">
<view class="btn btn1" @tap.stop="service">
联系客服
</view>
</template>
<!-- 星巴克-待出餐/已退款订单按钮 -->
<template v-if="Brand_XBK">
<!-- <navigator hover-class="none" -->
<!-- :url="`/pages/restaurant/order/order-details/xbk-orders-details?order=${InforData['order_sn']}`"> -->
<view class="btn btn1 btn2" @tap.stop="OrderDetails(shopid['XBK_brand_id'])">
查看订单
</view>
<!-- </navigator> -->
</template>
</view>
<!-- 已取消 -->
<view class="Order-settlement-btn-price-operate" v-if="InforData['status'] == OrderStatus5">
<!-- 瑞幸-已取消订单按钮 -->
<template v-if="Brand_RX">
<view class="btn btn1" @tap.stop="service">
联系客服
</view>
<view class="btn btn1 btn2" @tap.stop="OrderReorder">
再来一单
</view>
</template>
<!-- 肯德基-已取消订单按钮 -->
<template v-if="Brand_KFC">
<view class="btn btn1 btn2" @tap.stop="OrderReorder">
重新下单
</view>
</template>
<!-- 星巴克-已取消订单按钮 -->
<template v-if="Brand_XBK">
<view class="btn btn1" @tap.stop="service">
联系客服
</view>
<view class="btn btn1 btn2" @tap.stop="OrderReorder">
重新下单
</view>
</template>
</view>
</view>
</view>
</template>
<script>
import {
RXSERVICE
} from '@/static/js/serviceurl.js'
import mixin from '@/static/js/mixin/mixin.js';
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
import {
mapGetters,
} from 'vuex'
export default {
name: 'b-order-item-settlement',
mixins: [mixin, restaurantmixins],
// 取消订单,再次支付,重新下单
inject: ["cancel", "Reorder", "payment"],
props: {
index: {
type: Number,
default: 0
},
infor: {
type: Object,
default: () => {}
}
},
computed: {
InforData() {
return this['infor']
},
// 各品牌主体色不一样
orderStyle() {
let style = {};
switch (this['BrandInfor']['brand_id']) {
case 1:
style['color'] = uni.$u.addUnit('#C63836');
style['border'] = uni.$u.addUnit('1px solid #DC7473');
break;
case 10:
style['color'] = uni.$u.addUnit('#ffffff');
style['background-color'] = uni.$u.addUnit('#00AF66');
// style['border'] = uni.$u.addUnit('1px solid #00AF66');
break;
case 13:
style['color'] = uni.$u.addUnit('#4A6FE7');
style['border'] = uni.$u.addUnit('1px solid #4A6FE7');
break;
};
return style;
},
Brand_RX() {
return this['BrandInfor']['brand_id'] == 13;
},
Brand_KFC() {
return this['BrandInfor']['brand_id'] == 1;
},
Brand_XBK() {
return this['BrandInfor']['brand_id'] == 10;
}
},
data() {
return {
}
},
methods: {
// 重新下单前数据重构
OrderReorder() {
let arr = this['InforData']['goods'].map(item => {
item['restaurant_id'] = this['InforData']['restaurant_id'];
// 以下数据用于重新下单时保存当前店铺信息
item['restaurant_address'] = this['InforData']['restaurant_address'];
item['restaurant_name'] = this['InforData']['restaurant_name'];
item['latitude'] = this['InforData']['lat'];
item['longitude'] = this['InforData']['lng'];
// 因为前端记录商品数量使用的是num,而重新加入购物车时后台代表数量的则是amount
item['num'] = item['amount'];
item['pay'] = item['original_price'] / item['amount'];
// item['pay_price'] = item['original_price'];
return item
});
this.Reorder(arr);
},
OrderDetails(type) {
let url;
switch (type) {
case this['shopid']['KFC_brand_id']:
url =
`/pages/restaurant/order/order-details/order-details?order=${this['InforData']['order_sn']}`;
break;
case this['shopid']['XBK_brand_id']:
url =
`/pages/restaurant/order/order-details/xbk-orders-details?order=${this['InforData']['order_sn']}`;
break;
case this['shopid']['RX_brand_id']:
url =
`/pages/restaurant/order/order-details/rx-orders-details?order=${this['InforData']['order_sn']}`;
break;
};
uni.navigateTo({url})
},
/**
* @跳转客服
* */
service() {
uni.openCustomerServiceChat({
extInfo: {
url: RXSERVICE,
},
corpId: 'ww4f46b491a045158c',
success(e) {
console.log(e)
},
fail(e) {
console.log(e)
}
})
},
}
}
</script>
<style lang="scss">
.Order-settlement {
padding: 0 32rpx 21rpx 32rpx;
margin-top: 48rpx;
display: flex;
justify-content: space-between;
&-left {
color: #333333;
font-size: $FONTSIZE24;
&-item:nth-of-type(1) {
margin-bottom: 12rpx;
}
&-item:nth-of-type(2) {
margin-bottom: 12rpx;
}
}
&-btn-price {
display: flex;
align-items: flex-end;
flex-direction: column;
justify-content: space-between;
&-pay-price {
.text1 {
color: #333333;
font-size: $FONTSIZE24;
}
.text2 {
// color: #CE211F;
font-size: $FONTSIZE36;
}
}
&-operate {
display: flex;
.btn {
width: 160rpx;
height: 58rpx;
font-size: $FONTSIZE22;
text-align: center;
// line-height: 58rpx;
display: flex;
align-items: center;
justify-content: center;
}
.btn1 {
border: 2rpx solid #E3E3E3;
border-radius: 50rpx;
color: #666666;
}
.btn2 {
// border: 2rpx solid #C63836;
border-radius: 50rpx;
// color: #C63836;
margin-left: 20rpx;
}
}
}
}
</style>

Some files were not shown because too many files have changed in this diff Show More