updata
This commit is contained in:
commit
361f444663
|
|
@ -0,0 +1 @@
|
||||||
|
unpackage
|
||||||
|
|
@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -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;
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 806 B |
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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&®ion.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>
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
# recharge组件文件说明
|
||||||
|
## 该组件文件存储的是充值模块的组件
|
||||||
|
## 充值服务商组件 Recharge-Service
|
||||||
|
## 充值面额 Recharge-Amount
|
||||||
|
## 充值类型 Recharge-Type
|
||||||
|
## 充值账号输入 Recharge-User
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -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
Loading…
Reference in New Issue