Feat:寻看点和抽奖
This commit is contained in:
lifizer
@@ -0,0 +1,71 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 商品是否已收藏
|
||||
* */
|
||||
export function checkProduct(productId, uniqueId) {
|
||||
return request.get('/product/hasFavorite', {productId, uniqueId})
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加收藏商品
|
||||
* */
|
||||
export function addProduct(productId, uniqueId) {
|
||||
return request.post('/collection/product/add', {productId, uniqueId})
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消收藏商品
|
||||
* */
|
||||
export function removeProduct(productId, uniqueId) {
|
||||
return request.post('/collection/product/remove', {productId, uniqueId})
|
||||
}
|
||||
|
||||
/**
|
||||
* 收藏商品列表
|
||||
* */
|
||||
export function getProductList(page = 1, limit = 10) {
|
||||
return request.get('/collection/product/list', {page, limit})
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加收藏店铺
|
||||
* */
|
||||
export function addStore(hotelId) {
|
||||
return request.post('/collection/hotel/add', {hotelId})
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消收藏店铺
|
||||
* */
|
||||
export function removeStore(hotelId){
|
||||
return request.post('/collection/hotel/remove',{hotelId})
|
||||
}
|
||||
|
||||
/**
|
||||
* 收藏店铺列表
|
||||
* */
|
||||
export function getStoreList(page = 1, limit = 10) {
|
||||
return request.get('/collection/hotel/list', {page, limit})
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加收藏视频
|
||||
* */
|
||||
export function addVideo(videoId) {
|
||||
return request.post('/collection/video/add', {videoId})
|
||||
}
|
||||
|
||||
/**
|
||||
* 收藏视频列表
|
||||
* */
|
||||
export function getVideoList(page = 1, limit = 10) {
|
||||
return request.get('/collection/video/list', {page, limit})
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除收藏项目
|
||||
* */
|
||||
export function removeFavorite(ids) {
|
||||
return request.post('/collection/delete', ids)
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 抽奖活动信息
|
||||
* */
|
||||
export function getDetail() {
|
||||
return request.get('/lottery/dice/detail')
|
||||
}
|
||||
|
||||
/**
|
||||
* 抽奖
|
||||
* */
|
||||
export function getPrize() {
|
||||
return request.post('/lottery/dice/draw')
|
||||
}
|
||||
|
||||
/**
|
||||
* 领奖
|
||||
* */
|
||||
export function takePrize(lotteryRecordId){
|
||||
return request.post('/lottery/takePrize',{lotteryRecordId})
|
||||
}
|
||||
|
||||
/**
|
||||
* 抽奖记录
|
||||
* @param page 页码
|
||||
* @param limit 每页条数
|
||||
* */
|
||||
export function getLogs(page = 1, limit = 10) {
|
||||
return request.get('/lottery/dice/records',{page,limit})
|
||||
}
|
||||
+2
-2
@@ -8,9 +8,9 @@ import request from "@/utils/request";
|
||||
* @param cartId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function postOrderConfirm(cartId) {
|
||||
export function postOrderConfirm(cartId,lotteryRecordId='') {
|
||||
return request.post("/order/confirm", {
|
||||
cartId
|
||||
cartId,lotteryRecordId
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -97,6 +97,13 @@ export function getProductPoster(id) {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 购物车分组列表
|
||||
* */
|
||||
export function getCartGroup() {
|
||||
return request.get('/cart/listGroup')
|
||||
}
|
||||
|
||||
/*
|
||||
* 购物车 添加
|
||||
* */
|
||||
|
||||
@@ -393,6 +393,12 @@ export function getWithdrawalRecordList(q) {
|
||||
return request.get("/list", q);
|
||||
}
|
||||
|
||||
export function payoutLog(page, limit = 3, status) {
|
||||
let param = {page,limit}
|
||||
if (status) param.status = status
|
||||
return request.get('/extract/listGroup', param)
|
||||
}
|
||||
|
||||
/*
|
||||
* 提现银行
|
||||
* */
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 寻看点获取随机视频
|
||||
* */
|
||||
export function randomList(param) {
|
||||
return request.get('/video/random', param)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取城市列表
|
||||
* */
|
||||
export function getVideoCity() {
|
||||
return request.get('/video/cityList')
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频点赞
|
||||
* */
|
||||
export function likeVideo(videoId) {
|
||||
return request.post('/video/like', {videoId})
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频取消点赞
|
||||
* */
|
||||
export function removeLikeVideo(videoId) {
|
||||
return request.post('/video/removeLike', {videoId})
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频取消收藏
|
||||
* */
|
||||
export function removeFavoriteVideo(videoId) {
|
||||
return request.post('/video/removeFavorite', {videoId})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取评论
|
||||
* */
|
||||
export function getReplyList(id, page, limit = 10) {
|
||||
return request.get(`/video/replyList/${id}`, {page, limit})
|
||||
}
|
||||
|
||||
/**
|
||||
* 发布评论
|
||||
* */
|
||||
export function submitReply(videoId, comment) {
|
||||
return request.post('/video/reply', {videoId, comment})
|
||||
}
|
||||
@@ -278,9 +278,8 @@ page {
|
||||
}
|
||||
|
||||
.noCommodity .noPictrue {
|
||||
width: 4.14*100rpx;
|
||||
height: 3.36*100rpx;
|
||||
margin: 0 auto 0.3*100rpx auto;
|
||||
width: 496rpx;
|
||||
height: 450rpx;
|
||||
}
|
||||
|
||||
.noCommodity .noPictrue .image {
|
||||
@@ -2035,8 +2034,8 @@ page {
|
||||
}
|
||||
|
||||
.shoppingCart .noCart .pictrue {
|
||||
width: 4.14*100rpx;
|
||||
height: 3.36*100rpx;
|
||||
width: 420rpx;
|
||||
height: 418rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -2406,8 +2405,8 @@ page {
|
||||
}
|
||||
|
||||
.user .wrapper .myOrder .title .allOrder {
|
||||
font-size: 0.26*100rpx;
|
||||
color: #666;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.user .wrapper .myOrder .title .allOrder .iconfont {
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<view class="components-checkbox-icon jc-center ai-center" :class="{'isSelected':isSelected}" @click="change">
|
||||
<image class="icon-hook" :src="webUrl+'/20240109175325131970.png'" mode="scaleToFill" v-if="isSelected"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {VUE_APP_RESOURCES_URL} from '../config/index'
|
||||
|
||||
export default {
|
||||
name: 'CheckboxIcon',
|
||||
props: {
|
||||
defaultState: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl: VUE_APP_RESOURCES_URL
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isSelected: function() {
|
||||
return this.defaultState
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
this.$emit('change', !this.isSelected)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.components-checkbox-icon {
|
||||
display: inline-flex;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid #D5D7D8;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.icon-hook {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.isSelected {
|
||||
border: 3px solid #FD5749;
|
||||
background: #FD5749;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<view class="components-checkbox-icon jc-center ai-center" :class="{'isSelected':isSelected}" @click="change"
|
||||
v-if="ready">
|
||||
<image class="icon-hook" :src="webUrl+'/20240109175325131970.png'" mode="scaleToFill" v-if="isSelected"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed, getCurrentInstance, onMounted, ref} from '@vue/composition-api'
|
||||
import {VUE_APP_RESOURCES_URL} from '../config/index'
|
||||
|
||||
const webUrl = VUE_APP_RESOURCES_URL
|
||||
|
||||
const emit = defineEmits(['change'])
|
||||
const {proxy} = getCurrentInstance()
|
||||
const props = defineProps({
|
||||
defaultState: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
mark: Array
|
||||
})
|
||||
|
||||
const ready = ref(false)
|
||||
onMounted(() => {
|
||||
ready.value = true
|
||||
})
|
||||
|
||||
|
||||
const isSelected = computed(() => {
|
||||
return props.defaultState
|
||||
})
|
||||
const change = () => {
|
||||
emit('change', !isSelected.value, props.mark)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.components-checkbox-icon {
|
||||
display: inline-flex;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid #D5D7D8;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.icon-hook {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.isSelected {
|
||||
border: 3px solid #FD5749;
|
||||
background: #FD5749;
|
||||
}
|
||||
</style>
|
||||
@@ -81,15 +81,11 @@
|
||||
|
||||
<script type="text/babel">
|
||||
import uniPopup from "./uni-popup/uni-popup.vue";
|
||||
import uniPopupMessage from "./uni-popup/uni-popup-message.vue";
|
||||
import uniPopupDialog from "./uni-popup/uni-popup-dialog.vue";
|
||||
|
||||
export default {
|
||||
name: "CitySelect",
|
||||
components: {
|
||||
uniPopup,
|
||||
uniPopupMessage,
|
||||
uniPopupDialog
|
||||
uniPopup
|
||||
},
|
||||
props: ["callback", "items", "defaultValue"],
|
||||
data() {
|
||||
|
||||
@@ -1,122 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="coupon-list-window" :class="value === true ? 'on' : ''">
|
||||
<view class="title">
|
||||
优惠券
|
||||
<text class="iconfont icon-guanbi" @click="close"></text>
|
||||
</view>
|
||||
<view v-if="couponList.length > 0">
|
||||
<view class="coupon-list">
|
||||
<div
|
||||
class="item acea-row row-center-wrapper"
|
||||
v-for="coupon in couponList"
|
||||
:key="coupon.id"
|
||||
@click="click(coupon)"
|
||||
>
|
||||
<div class="money">
|
||||
<div>
|
||||
￥<span class="num">{{ coupon.couponPrice }}</span>
|
||||
</div>
|
||||
<div class="pic-num">满{{ coupon.useMinPrice }}元可用</div>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="condition line1">{{ coupon.couponTitle }}</div>
|
||||
<div class="data acea-row row-between-wrapper">
|
||||
<div v-if="coupon.endTime === 0">不限时</div>
|
||||
<div v-else>截止:{{ coupon.endTime }}</div>
|
||||
<div
|
||||
class="iconfont icon-xuanzhong1 font-color-red"
|
||||
v-if="checked === coupon.id"
|
||||
></div>
|
||||
<div class="iconfont icon-weixuanzhong" v-else></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
<view class="couponNo bg-color-red" @click="couponNo">不使用优惠券</view>
|
||||
</view>
|
||||
<view v-if="!couponList.length && loaded">
|
||||
<view class="pictrue">
|
||||
<image src="http://admin-api.xdd618.com/file/pic/20210203154207179472.png" class="image" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mask" @touchmove.prevent :hidden="value === false" @click="close"></view>
|
||||
</view>
|
||||
</template>
|
||||
<style scoped lang="less">
|
||||
.coupon-list-window .iconfont {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.couponNo {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
width: 690rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 43rpx;
|
||||
text-align: center;
|
||||
line-height: 86rpx;
|
||||
margin: 60rpx auto;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import { getOrderCoupon } from "@/api/order";
|
||||
import DataFormatT from "@/components/DataFormatT";
|
||||
|
||||
export default {
|
||||
name: "CouponListWindow",
|
||||
components: {
|
||||
DataFormatT
|
||||
},
|
||||
props: {
|
||||
value: Boolean,
|
||||
checked: Number,
|
||||
price: {
|
||||
type: [Number, String],
|
||||
default: undefined
|
||||
},
|
||||
cartid: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
couponList: [],
|
||||
loaded: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
price(n) {
|
||||
if (n === undefined || n == null) return;
|
||||
this.getCoupon();
|
||||
},
|
||||
cartid(n) {
|
||||
if (n === undefined || n == null) return;
|
||||
this.getCoupon();
|
||||
}
|
||||
},
|
||||
mounted: function() {},
|
||||
methods: {
|
||||
close: function() {
|
||||
this.$emit("input", false);
|
||||
this.$emit("close");
|
||||
},
|
||||
getCoupon() {
|
||||
getOrderCoupon(this.cartid).then(res => {
|
||||
this.couponList = res.data;
|
||||
this.loaded = true;
|
||||
});
|
||||
},
|
||||
click(coupon) {
|
||||
this.$emit("checked", coupon);
|
||||
this.$emit("input", false);
|
||||
},
|
||||
couponNo: function() {
|
||||
this.$emit("checked", null);
|
||||
this.$emit("input", false);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="coupon-list-window" :class="coupon.coupon === true ? 'on' : ''">
|
||||
<view class="title">
|
||||
优惠券
|
||||
<text class="iconfont icon-guanbi" @click="close"></text>
|
||||
</view>
|
||||
<view class="coupon-list" v-if="coupon.list.length > 0">
|
||||
<view
|
||||
class="item acea-row row-center-wrapper"
|
||||
v-for="(item, couponpopIndex) in coupon.list"
|
||||
:key="couponpopIndex"
|
||||
@click="getCouponUser(couponpopIndex, item.id)"
|
||||
>
|
||||
<view class="money">
|
||||
￥
|
||||
<text class="num">{{ item.coupon_price }}</text>
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="condition line1">购物满{{ item.use_min_price }}元可用</view>
|
||||
<view class="data acea-row row-between-wrapper">
|
||||
<view v-if="item.end_time === 0">不限时</view>
|
||||
<view v-else>{{ item.start_time }}-{{ item.end_time }}</view>
|
||||
<view
|
||||
class="bnt acea-row row-center-wrapper"
|
||||
:class="!item.is_use ? 'bg-color-red' : 'gray'"
|
||||
>{{ !item.is_use ? "立即领取" : "已领取" }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--无优惠券-->
|
||||
<view class="pictrue" v-else>
|
||||
<image src="http://admin-api.xdd618.com/file/pic/20210203154207179472.png" class="image" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="mask" @touchmove.prevent :hidden="coupon.coupon === false" @click="close"></view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { getCouponReceive } from "@/api/user";
|
||||
export default {
|
||||
name: "CouponPop",
|
||||
props: {
|
||||
coupon: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {};
|
||||
},
|
||||
mounted: function() {},
|
||||
methods: {
|
||||
close: function() {
|
||||
this.$emit("changeFun", { action: "changecoupon", value: false }); //$emit():注册事件；
|
||||
},
|
||||
getCouponUser: function(index, id) {
|
||||
let that = this,
|
||||
list = that.coupon.list;
|
||||
if (list[index].is_use === true) return;
|
||||
getCouponReceive(id).then(function() {
|
||||
uni.showToast({
|
||||
title: "已领取",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
that.$set(list[index], "is_use", true);
|
||||
that.$emit("changefun", { action: "currentcoupon", value: index });
|
||||
that.$emit("changeFun", { action: "changecoupon", value: false });
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="components-coupons">
|
||||
<image class="coupons__cover" :src="data.image" mode="scaleToFill"/>
|
||||
<image class="coupons__cover" :src="data.image" mode="widthFix"/>
|
||||
|
||||
<view class="coupons__section flex jc-between ai-center">
|
||||
<view>有效期至：
|
||||
@@ -9,7 +9,7 @@
|
||||
<view class="coupons__tag coupons__tag-expire" v-if="data.status===2">已到期</view>
|
||||
<view class="coupons__tag" @click="goGoods()" v-if="data.status===0 && !radioModel">去使用</view>
|
||||
<view @click="selectCoupon">
|
||||
<radio :value="data.id" :checked="data.checked" color="#FF564A" v-if="radioModel && data.status===0"/>
|
||||
<radio :value="data.id" :checked="data.checked" color="#FF564A" v-if="radioModel && data.status===0"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<view class="coupons__rules-title" @click="changeRules()">使用规则
|
||||
<image :class="{'open':isOpen}" :src="webUrl+'/20231125220409665027.png'" mode="scaleToFill"/>
|
||||
</view>
|
||||
<view v-html="data.description" v-show="isOpen"></view>
|
||||
<rich-text :nodes="data.description" v-show="isOpen"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -47,7 +47,7 @@ export default {
|
||||
this.isOpen = !this.isOpen
|
||||
},
|
||||
goGoods() {
|
||||
uni.switchTab({url:'/pages/home/landMark'})
|
||||
uni.switchTab({url: '/pages/home/landMark'})
|
||||
// this.$global.navToGoods(this.data.productId)
|
||||
},
|
||||
selectCoupon() {
|
||||
@@ -72,7 +72,7 @@ export default {
|
||||
|
||||
.coupons__cover {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.coupons__section {
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
:key="index" v-if="type===0" @click="goStore(item.hotelId)">
|
||||
<image class="cover" :src="item.hotelImage" mode="scaleToFill"/>
|
||||
<image class="logo" :src="item.hotelLogo" mode="scaleToFill"/>
|
||||
<view style="width: 100%">
|
||||
<view style="width: 100%;box-sizing: border-box;padding:0 8rpx">
|
||||
<view class="name tc one-t">{{ item.hotelName }}</view>
|
||||
<rich-text class="text tc one-t" :nodes="item.hotelText"/>
|
||||
</view>
|
||||
@@ -486,12 +486,13 @@ export default {
|
||||
}
|
||||
|
||||
.name {
|
||||
padding-bottom: 10rpx;
|
||||
font-size: 24rpx;
|
||||
padding-bottom: 8rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding-bottom: 10rpx;
|
||||
padding-bottom: 8rpx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,142 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<view
|
||||
id="_drag_button"
|
||||
class="drag"
|
||||
:style="'left: ' + left + 'px; top:' + top + 'px;'"
|
||||
@touchstart="touchstart"
|
||||
@touchmove.stop.prevent="touchmove"
|
||||
@touchend="touchend"
|
||||
@click.stop.prevent="click"
|
||||
:class="{transition: isDock && !isMove }"
|
||||
>
|
||||
<image style="width: 100%;height: 100%;" mode="scaleToFill" src="http://admin-api.xdd618.com/file/pic/20210809112551575811.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'drag-button',
|
||||
props: {
|
||||
isDock:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
existTabBar:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
top:0,
|
||||
left:0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
offsetWidth: 0,
|
||||
offsetHeight: 0,
|
||||
windowWidth: 0,
|
||||
windowHeight: 0,
|
||||
isMove: true,
|
||||
edge: 10,
|
||||
text: '按钮'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const sys = uni.getSystemInfoSync();
|
||||
|
||||
this.windowWidth = sys.windowWidth;
|
||||
this.windowHeight = sys.windowHeight;
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
this.existTabBar && (this.windowHeight -= 50);
|
||||
// #endif
|
||||
if (sys.windowTop) {
|
||||
this.windowHeight += sys.windowTop;
|
||||
}
|
||||
console.log(sys)
|
||||
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('#_drag_button').boundingClientRect(data => {
|
||||
this.width = data.width;
|
||||
this.height = data.height;
|
||||
this.offsetWidth = data.width / 2;
|
||||
this.offsetHeight = data.height / 2;
|
||||
this.left = this.windowWidth - this.width - this.edge;
|
||||
this.top = this.windowHeight - this.height - this.edge;
|
||||
}).exec();
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
this.$emit('btnClick');
|
||||
},
|
||||
touchstart(e) {
|
||||
this.$emit('btnTouchstart');
|
||||
},
|
||||
touchmove(e) {
|
||||
// 单指触摸
|
||||
if (e.touches.length !== 1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.isMove = true;
|
||||
|
||||
this.left = e.touches[0].clientX - this.offsetWidth;
|
||||
|
||||
let clientY = e.touches[0].clientY - this.offsetHeight;
|
||||
// #ifdef H5
|
||||
clientY += this.height;
|
||||
// #endif
|
||||
let edgeBottom = this.windowHeight - this.height - this.edge;
|
||||
|
||||
// 上下触及边界
|
||||
if (clientY < this.edge) {
|
||||
this.top = this.edge;
|
||||
} else if (clientY > edgeBottom) {
|
||||
this.top = edgeBottom;
|
||||
} else {
|
||||
this.top = clientY
|
||||
}
|
||||
|
||||
},
|
||||
touchend(e) {
|
||||
if (this.isDock) {
|
||||
let edgeRigth = this.windowWidth - this.width - this.edge;
|
||||
|
||||
if (this.left < this.windowWidth / 2 - this.offsetWidth) {
|
||||
this.left = this.edge;
|
||||
} else {
|
||||
this.left = edgeRigth;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.isMove = false;
|
||||
|
||||
this.$emit('btnTouchend');
|
||||
},
|
||||
}}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.drag {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
//background-color: rgba(0, 0, 0, 0.5);
|
||||
//box-shadow: 0 0 6upx rgba(0, 0, 0, 0.4);
|
||||
color: $uni-text-color-inverse;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
font-size: $uni-font-size-sm;
|
||||
position: fixed;
|
||||
z-index: 999999;
|
||||
|
||||
&.transition {
|
||||
transition: left .3s ease,top .3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,40 +0,0 @@
|
||||
# 轮播组件
|
||||
|
||||
# 基础式
|
||||
<ls-swiper :list="base_lsit" imgKey="imgUrl" :loop="true" :dots='true' :autoplay='true' @clickItem="clickItem()" />
|
||||
|
||||
# 链式
|
||||
<ls-swiper :list="list" imgKey="imgUrl" imgWidth="300" previousMargin="20" nextMargin='20'/>
|
||||
|
||||
# 卡片式
|
||||
<ls-swiper :list="base_lsit" imgKey="imgUrl" :crown="true" :loop="true" :shadow='true' height='130' previousMargin="120" nextMargin='120' imgRadius="5" />
|
||||
|
||||
# props
|
||||
参数名 | 说明 | 类型 | 默认值
|
||||
-----------------|-------------------------------------------------- -|-------------|------------
|
||||
list | 轮播数据 | Array | 必输
|
||||
imgKey | 轮播数据key（图片url属性） | String | 必输 (自定义模式，非必输)
|
||||
autoplay | 是否自动播放 | Boolean | false
|
||||
loop | 是否循环 | Boolean | false
|
||||
autoplay | 是否自动播放 | Boolean | false
|
||||
dots | 是否显示轮播点 | Boolean | false
|
||||
crown | 卡片特效 (中间突出，两边缩放特效) | Boolean | false
|
||||
interval | 播放时间间隔 | Number | 2000
|
||||
duration | 滑动速度 | Number | 1500
|
||||
bottom | 轮播点下边距 | Number | 10 (单位:px,设计图建议以375px为准)
|
||||
height | 高度 | Number | 200 (单位:px,设计图建议以375px为准)
|
||||
previousMargin | 图片前边距 | Number | 0 (单位:px,设计图建议以375px为准)
|
||||
nextMargin | 图片后间距 | Number | 0 (单位:px,设计图建议以375px为准)
|
||||
imgRadius | 图片圆角 | Number | 0 (单位:px,设计图建议以375px为准)
|
||||
imgWidth | 图片宽度 | String | 100%
|
||||
@clickItem | 点击事件 | Function |
|
||||
@change | 切换事件 | Function |
|
||||
|
||||
# 自定义
|
||||
<ls-swiper :list="list">
|
||||
<template v-slot="{data}">
|
||||
xxx
|
||||
</template>
|
||||
</ls-swiper>
|
||||
|
||||
如有其他需求，可在插槽内编写自定义内容, 自动覆盖原图片样式。
|
||||
@@ -1,180 +0,0 @@
|
||||
<template>
|
||||
<view class="ls-wrap">
|
||||
<swiper class="ls-swiper" :style="{height: height *2 + 'rpx'}" :autoplay="autoplay" :interval="interval" :duration="duration"
|
||||
:circular='loop' @change='change' :previous-margin='previousMargin + "rpx"' :next-margin='nextMargin + "rpx"'>
|
||||
<swiper-item v-for="(item,index) in list" :key='index' @click="$emit('clickItem',item)">
|
||||
<view v-if="list && list.length>0" class="item" :class="[!crown ? '' : current==index ? 'crown-active':'crown']">
|
||||
<image v-if="!slotsMode" class="item-img" :class="[imgShadow?'imgShadow':'']" :src="item[imgKey]" :style="{ borderRadius: imgRadius + 'px',width:imgWidth}"
|
||||
mode=""></image>
|
||||
<slot v-else :data='item'></slot>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="dots flex" :style="{bottom: bottom * 2 + 'rpx'}" v-if="dots">
|
||||
<view class="dot" :class="[current == i ? 'curr-dot' : '']" v-for="(d,i) in list" :key='i'>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 轮播图片key
|
||||
imgKey: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
// 高度
|
||||
height: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
// 图片圆角
|
||||
imgRadius: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 图片阴影
|
||||
imgShadow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 前边距
|
||||
previousMargin: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 后边距
|
||||
nextMargin: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 图片宽度
|
||||
imgWidth: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
// 是否循环
|
||||
loop: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 自动播放
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 播放时间间隔
|
||||
interval: {
|
||||
type: Number,
|
||||
default: 2000
|
||||
},
|
||||
// 滑动速度
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 1200
|
||||
},
|
||||
// 显示指示点
|
||||
dots: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 轮播点下边距
|
||||
bottom: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
// 卡片特效
|
||||
crown: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
slotsMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
slots: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 判断异步数据源，是否使用插槽自定义样式
|
||||
list: {
|
||||
handler(val) {
|
||||
if (val.length > 0 && this.$slots.default) {
|
||||
this.slots = true
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(event) {
|
||||
let current = event.detail.current
|
||||
this.current = current
|
||||
this.$emit('change', this.list[current])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ls-wrap {
|
||||
position: relative;
|
||||
|
||||
.crown {
|
||||
transform: scale(0.93, 0.85);
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 100%;
|
||||
transition: 1.2s;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.imgShadow {
|
||||
height: calc(100% - 10px);
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 6px 6px rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
.crown-active {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.dots {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.dot {
|
||||
width: 6rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #D6D6D6;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.curr-dot {
|
||||
height: 6rpx;
|
||||
width: 22rpx;
|
||||
border-radius: 6rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -7,7 +7,8 @@ import MescrollEmpty from '@/components/mescroll-uni/components/mescroll-empty.v
|
||||
-->
|
||||
<template>
|
||||
<view class="mescroll-empty" :class="{ 'empty-fixed': option.fixed }" :style="{ 'z-index': option.zIndex, top: option.top }">
|
||||
<image v-if="icon" class="empty-icon" :src="icon" mode="widthFix" />
|
||||
<image v-if="option.width" :style="{'width':option.width+'rpx','height':option.height+'rpx'}" :src="icon" mode="widthFix"/>
|
||||
<image v-else-if="icon" class="empty-icon" :src="icon" mode="widthFix" />
|
||||
<view v-if="tip" class="empty-tip">{{ tip }}</view>
|
||||
<view v-if="option.btnText" class="empty-btn" @click="emptyClick">{{ option.btnText }}</view>
|
||||
</view>
|
||||
|
||||
@@ -15,7 +15,9 @@ import {
|
||||
WX_LIVE_APPID
|
||||
} from "@/config";
|
||||
import uView from "uview-ui";
|
||||
import VueCompositionApi from '@vue/composition-api'
|
||||
|
||||
Vue.use(VueCompositionApi)
|
||||
Vue.use(uView);
|
||||
Vue.mixin(mixin)
|
||||
|
||||
|
||||
+161
-164
@@ -1,172 +1,169 @@
|
||||
{
|
||||
"name": "云南香道滇官方商城",
|
||||
"appid": "__UNI__C7A519E",
|
||||
"description": "",
|
||||
"versionName": "4.0.0",
|
||||
"versionCode": 4,
|
||||
"transformPx": false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus": {
|
||||
"usingComponents": true,
|
||||
"nvueCompiler": "uni-app",
|
||||
"compilerVersion": 3,
|
||||
"splashscreen": {
|
||||
"alwaysShowBeforeRender": false,
|
||||
"waiting": false,
|
||||
"autoclose": true,
|
||||
"delay": 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules": {
|
||||
"OAuth": {},
|
||||
"Payment": {},
|
||||
"Share": {}
|
||||
},
|
||||
/* 应用发布信息 */
|
||||
"distribute": {
|
||||
/* android打包配置 */
|
||||
"android": {
|
||||
"permissions": [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios": {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs": {
|
||||
"oauth": {
|
||||
"weixin": {
|
||||
"appid": "wx7c84ede33062d1e4",
|
||||
"appsecret": "c47ef66d3311194da44e60387d5c1abd",
|
||||
"UniversalLinks": ""
|
||||
}
|
||||
"name" : "地标文化特产",
|
||||
"appid" : "__UNI__281C173",
|
||||
"description" : "",
|
||||
"versionName" : "4.0.0",
|
||||
"versionCode" : 4,
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : false,
|
||||
"waiting" : false,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
"payment": {
|
||||
"weixin": {
|
||||
"appid": "wx7c84ede33062d1e4",
|
||||
"UniversalLinks": ""
|
||||
}
|
||||
/* 模块配置 */
|
||||
"modules" : {
|
||||
"OAuth" : {},
|
||||
"Payment" : {},
|
||||
"Share" : {}
|
||||
},
|
||||
"share": {
|
||||
"weixin": {
|
||||
"appid": "wx7c84ede33062d1e4",
|
||||
"UniversalLinks": ""
|
||||
}
|
||||
},
|
||||
"ad": {}
|
||||
},
|
||||
"splashscreen": {
|
||||
"ios": {
|
||||
"iphone": {
|
||||
"portrait-896h@3x": "unpackage/res/splash/1242+2688.png",
|
||||
"portrait-896h@2x": "unpackage/res/splash/828+1792.png",
|
||||
"iphonex": "unpackage/res/splash/1125+2436.png",
|
||||
"retina55": "unpackage/res/splash/1142+2208.png",
|
||||
"retina47": "unpackage/res/splash/750+1334.png",
|
||||
"retina40": "unpackage/res/splash/640+1136.png",
|
||||
"retina35": "unpackage/res/splash/640+960.png"
|
||||
}
|
||||
},
|
||||
"android": {
|
||||
"hdpi": "unpackage/res/splash/480+762.png",
|
||||
"xhdpi": "unpackage/res/splash/720+1242.png",
|
||||
"xxhdpi": "unpackage/res/splash/1080+1882.png"
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {
|
||||
"oauth" : {
|
||||
"weixin" : {
|
||||
"appid" : "wx7c84ede33062d1e4",
|
||||
"appsecret" : "c47ef66d3311194da44e60387d5c1abd",
|
||||
"UniversalLinks" : ""
|
||||
}
|
||||
},
|
||||
"payment" : {
|
||||
"weixin" : {
|
||||
"appid" : "wx7c84ede33062d1e4",
|
||||
"UniversalLinks" : ""
|
||||
}
|
||||
},
|
||||
"share" : {
|
||||
"weixin" : {
|
||||
"appid" : "wx7c84ede33062d1e4",
|
||||
"UniversalLinks" : ""
|
||||
}
|
||||
},
|
||||
"ad" : {}
|
||||
},
|
||||
"splashscreen" : {
|
||||
"ios" : {
|
||||
"iphone" : {
|
||||
"portrait-896h@3x" : "unpackage/res/splash/1242+2688.png",
|
||||
"portrait-896h@2x" : "unpackage/res/splash/828+1792.png",
|
||||
"iphonex" : "unpackage/res/splash/1125+2436.png",
|
||||
"retina55" : "unpackage/res/splash/1142+2208.png",
|
||||
"retina47" : "unpackage/res/splash/750+1334.png",
|
||||
"retina40" : "unpackage/res/splash/640+1136.png",
|
||||
"retina35" : "unpackage/res/splash/640+960.png"
|
||||
}
|
||||
},
|
||||
"android" : {
|
||||
"hdpi" : "unpackage/res/splash/480+762.png",
|
||||
"xhdpi" : "unpackage/res/splash/720+1242.png",
|
||||
"xxhdpi" : "unpackage/res/splash/1080+1882.png"
|
||||
}
|
||||
},
|
||||
"icons" : {
|
||||
"android" : {
|
||||
"hdpi" : "unpackage/res/icons/72x72.png",
|
||||
"xhdpi" : "unpackage/res/icons/96x96.png",
|
||||
"xxhdpi" : "unpackage/res/icons/144x144.png",
|
||||
"xxxhdpi" : "unpackage/res/icons/192x192.png"
|
||||
},
|
||||
"ios" : {
|
||||
"appstore" : "unpackage/res/icons/1024x1024.png",
|
||||
"ipad" : {
|
||||
"app" : "unpackage/res/icons/76x76.png",
|
||||
"app@2x" : "unpackage/res/icons/152x152.png",
|
||||
"notification" : "unpackage/res/icons/20x20.png",
|
||||
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||
"proapp@2x" : "unpackage/res/icons/167x167.png",
|
||||
"settings" : "unpackage/res/icons/29x29.png",
|
||||
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||
"spotlight" : "unpackage/res/icons/40x40.png",
|
||||
"spotlight@2x" : "unpackage/res/icons/80x80.png"
|
||||
},
|
||||
"iphone" : {
|
||||
"app@2x" : "unpackage/res/icons/120x120.png",
|
||||
"app@3x" : "unpackage/res/icons/180x180.png",
|
||||
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||
"notification@3x" : "unpackage/res/icons/60x60.png",
|
||||
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||
"settings@3x" : "unpackage/res/icons/87x87.png",
|
||||
"spotlight@2x" : "unpackage/res/icons/80x80.png",
|
||||
"spotlight@3x" : "unpackage/res/icons/120x120.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"icons": {
|
||||
"android": {
|
||||
"hdpi": "unpackage/res/icons/72x72.png",
|
||||
"xhdpi": "unpackage/res/icons/96x96.png",
|
||||
"xxhdpi": "unpackage/res/icons/144x144.png",
|
||||
"xxxhdpi": "unpackage/res/icons/192x192.png"
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "wx9417047e1a0c340b",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true,
|
||||
"permission" : {
|
||||
"scope.userLocation" : {
|
||||
"desc" : "你的位置信息将用于小程序位置接口的效果展示"
|
||||
}
|
||||
},
|
||||
"requiredPrivateInfos" : [ "getLocation", "chooseLocation" ],
|
||||
"plugins" : {
|
||||
"live-player-plugin" : {
|
||||
"version" : "1.3.5",
|
||||
//最新直播组件版本号
|
||||
"provider" : "wx2b03c6e691cd7370"
|
||||
}
|
||||
},
|
||||
"ios": {
|
||||
"appstore": "unpackage/res/icons/1024x1024.png",
|
||||
"ipad": {
|
||||
"app": "unpackage/res/icons/76x76.png",
|
||||
"app@2x": "unpackage/res/icons/152x152.png",
|
||||
"notification": "unpackage/res/icons/20x20.png",
|
||||
"notification@2x": "unpackage/res/icons/40x40.png",
|
||||
"proapp@2x": "unpackage/res/icons/167x167.png",
|
||||
"settings": "unpackage/res/icons/29x29.png",
|
||||
"settings@2x": "unpackage/res/icons/58x58.png",
|
||||
"spotlight": "unpackage/res/icons/40x40.png",
|
||||
"spotlight@2x": "unpackage/res/icons/80x80.png"
|
||||
},
|
||||
"iphone": {
|
||||
"app@2x": "unpackage/res/icons/120x120.png",
|
||||
"app@3x": "unpackage/res/icons/180x180.png",
|
||||
"notification@2x": "unpackage/res/icons/40x40.png",
|
||||
"notification@3x": "unpackage/res/icons/60x60.png",
|
||||
"settings@2x": "unpackage/res/icons/58x58.png",
|
||||
"settings@3x": "unpackage/res/icons/87x87.png",
|
||||
"spotlight@2x": "unpackage/res/icons/80x80.png",
|
||||
"spotlight@3x": "unpackage/res/icons/120x120.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp": {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin": {
|
||||
"appid": "wx9417047e1a0c340b",
|
||||
"setting": {
|
||||
"urlCheck": false
|
||||
},
|
||||
"usingComponents": true,
|
||||
"permission": {
|
||||
"scope.userLocation": {
|
||||
"desc": "你的位置信息将用于小程序位置接口的效果展示"
|
||||
}
|
||||
},
|
||||
"requiredPrivateInfos": [
|
||||
"getLocation",
|
||||
"chooseLocation"
|
||||
],
|
||||
"plugins": {
|
||||
"live-player-plugin": {
|
||||
"version": "1.3.5",
|
||||
//最新直播组件版本号
|
||||
"provider": "wx2b03c6e691cd7370"
|
||||
//直播appid
|
||||
}
|
||||
"optimization" : {
|
||||
"subPackages" : true
|
||||
}
|
||||
},
|
||||
"optimization": {
|
||||
"subPackages": true
|
||||
}
|
||||
},
|
||||
"mp-alipay": {
|
||||
"usingComponents": true,
|
||||
"appid": ""
|
||||
},
|
||||
"mp-baidu": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"mp-toutiao": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"vueVersion": "2"
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true,
|
||||
"appid" : ""
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"vueVersion" : "2"
|
||||
}
|
||||
|
||||
@@ -48,6 +48,7 @@
|
||||
"test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dcloudio/uni-app": "^2.0.2-3090920231225001",
|
||||
"@dcloudio/uni-app-plus": "^2.0.1-35320220729002",
|
||||
"@dcloudio/uni-h5": "^2.0.1-35320220729002",
|
||||
"@dcloudio/uni-helper-json": "*",
|
||||
@@ -67,6 +68,7 @@
|
||||
"@dcloudio/uni-quickapp-webview": "^2.0.1-35320220729002",
|
||||
"@dcloudio/uni-stacktracey": "^2.0.1-35320220729002",
|
||||
"@dcloudio/uni-stat": "^2.0.1-35320220729002",
|
||||
"@vue/composition-api": "^1.7.2",
|
||||
"@vue/shared": "^3.0.0",
|
||||
"animate.css": "^3.7.2",
|
||||
"async-validator": "^3.2.4",
|
||||
|
||||
+77
-58
@@ -49,25 +49,10 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/foodInfomation/information",
|
||||
"path": "pages/cart",
|
||||
"style": {
|
||||
"navigationBarTitleText": "彩云资讯"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/foodInfomation/foodInfomation",
|
||||
"style": {
|
||||
"navigationBarTitleText": "美食攻略",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/foodInfomation/foodInfomationDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "资讯详情",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
"navigationBarTitleText": "购物车"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -84,14 +69,6 @@
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shop/ShoppingCart/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "购物车",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shop/StoreList/index",
|
||||
"style": {
|
||||
@@ -230,12 +207,6 @@
|
||||
"navigationBarTitleText": "账单记录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/promotion/CashRecord/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提现记录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/promotion/CommissionDetails/index",
|
||||
"style": {
|
||||
@@ -522,6 +493,35 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pkg-video",
|
||||
"pages": [
|
||||
{
|
||||
"path": "views/watch",
|
||||
"style": {
|
||||
"navigationBarTitleText": "寻看点"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "views/city",
|
||||
"style": {
|
||||
"navigationBarTitleText": "选择城市"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "views/lottery",
|
||||
"style": {
|
||||
"navigationBarTitleText": "抽奖"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "views/lottery-log",
|
||||
"style": {
|
||||
"navigationBarTitleText": "抽奖记录"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pkg_common",
|
||||
"pages": [
|
||||
@@ -698,6 +698,12 @@
|
||||
{
|
||||
"root": "pkg_user",
|
||||
"pages": [
|
||||
{
|
||||
"path": "views/myFavorite",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的收藏"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "views/bankCardList",
|
||||
"style": {
|
||||
@@ -719,6 +725,12 @@
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "views/withdrawalLog",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提现记录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "views/personalData",
|
||||
"style": {
|
||||
@@ -820,24 +832,6 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "招商项目"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "views/luck/luck",
|
||||
"style": {
|
||||
"navigationBarTitleText": "幸运抽奖"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "views/luck/logs",
|
||||
"style": {
|
||||
"navigationBarTitleText": "抽奖记录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "views/luck/receive",
|
||||
"style": {
|
||||
"navigationBarTitleText": "选择收货地址"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -900,7 +894,7 @@
|
||||
"text": "地标好物"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/shop/ShoppingCart/index",
|
||||
"pagePath": "pages/cart",
|
||||
"iconPath": "static/tabbar/icon-cart.png",
|
||||
"selectedIconPath": "static/tabbar/icon-cart-hot.png",
|
||||
"text": "购物车"
|
||||
@@ -919,22 +913,47 @@
|
||||
{
|
||||
"name": "商品详情",
|
||||
"path": "pages/shop/GoodsCon/index",
|
||||
"query": "id=289"
|
||||
"query": "id=277"
|
||||
},
|
||||
{
|
||||
"name": "v9-2",
|
||||
"path": "pages/order/OrderSubmission/index",
|
||||
"name": "店铺详情",
|
||||
"path": "pagesInn/inn/innHome",
|
||||
"query": "id=15"
|
||||
},
|
||||
{
|
||||
"name": "提现记录",
|
||||
"path": "pkg_user/views/withdrawalLog",
|
||||
"query": "id=2539"
|
||||
},
|
||||
{
|
||||
"name": "DEBUG",
|
||||
"path": "pages/shop/GoodsCon/index",
|
||||
"query": "id=466"
|
||||
"name": "抽奖",
|
||||
"path": "pkg-video/views/lottery",
|
||||
"query": ""
|
||||
},
|
||||
{
|
||||
"name": "非遗",
|
||||
"path": "pages/order/OrderSubmission/index",
|
||||
"name": "寻看点",
|
||||
"path": "pkg-video/views/watch",
|
||||
"query": ""
|
||||
},
|
||||
{
|
||||
"name": "寻看点-选择城市",
|
||||
"path": "pkg-video/views/city",
|
||||
"query": ""
|
||||
},
|
||||
{
|
||||
"name": "我的收藏",
|
||||
"path": "pkg_user/views/myFavorite",
|
||||
"query": "id=2597"
|
||||
},
|
||||
{
|
||||
"name": "购物车",
|
||||
"path": "pages/cart",
|
||||
"query": ""
|
||||
},
|
||||
{
|
||||
"name": "提交订单",
|
||||
"path": "pages/order/OrderSubmission/index",
|
||||
"query": "lotteryRecordId=217"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
+309
@@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<view class="pages-cart" v-if="ready">
|
||||
<u-navbar leftIcon="trash" title="购物车" fixed @leftClick="remove"/>
|
||||
|
||||
<view class="tc" style="margin-top: 300rpx" v-if="list.length===0">
|
||||
<image style="width: 420rpx;height: 418rpx" :src="webUrl+'/20240106211138206789.png'" mode="scaleToFill"/>
|
||||
</view>
|
||||
|
||||
<view class="group-item" v-for="(item,index) in list" :key="index">
|
||||
|
||||
<view class="flex jc-between">
|
||||
<view class="flex ai-center">
|
||||
<CheckboxIcon style="margin-right: 24rpx;" :default-state="item['state']" @change="value => onChange(value, index, '')"/>
|
||||
<image class="store-cover" :src="item['merAvatar']"
|
||||
mode="scaleToFill"/>
|
||||
<view style="color:#333333;font-size: 30rpx">{{ item['merName'] }}</view>
|
||||
</view>
|
||||
<view class="flex ai-center" style="color:#E92727;font-size: 24rpx" @click="navToStore(item['merId'])">
|
||||
进店逛逛
|
||||
<image style="width: 24rpx;height: 24rpx" :src="webUrl+'/20240109234706982937.png'" mode="scaleToFill"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="goods-box">
|
||||
<view class="goods flex ai-center" v-for="(goods,gIndex) in item['carts']" :key="gIndex">
|
||||
<CheckboxIcon style="margin-right: 24rpx;" :default-state="goods['state']" :mark="[index,gIndex]"
|
||||
@change="value => onChange(value, index, gIndex)"/>
|
||||
<image class="goods-cover flex-0" :src="goods['productInfo']['attrInfo']['image']" mode="scaleToFill"
|
||||
v-if="goods['productInfo']['attrInfo']['image']"/>
|
||||
<image class="goods-cover flex-0" :src="goods['productInfo']['image']" mode="scaleToFill" v-else/>
|
||||
|
||||
<view style="width: 100%">
|
||||
<view class="one-t">{{ goods['productInfo']['storeName'] }}</view>
|
||||
<view class="sku ai-center">规格：{{ goods['productInfo']['attrInfo']['sku'] }}</view>
|
||||
<view class="flex jc-between ai-center" style="width: 100%;margin-top: 26rpx;">
|
||||
<view style="color:#E92727;font-size: 32rpx;">
|
||||
<text class="bold" style="font-size: 24rpx">￥</text>
|
||||
{{ goods['truePrice'] }}
|
||||
</view>
|
||||
<u-number-box class="num-step" v-model="goods['cartNum']" :name="goods['id']"
|
||||
:max="goods['productInfo']['attrInfo']['stock']" integer disabledInput
|
||||
iconStyle="color: #fff" @change="changeNum">
|
||||
<template v-slot:minus>
|
||||
<view class="num-btn flex jc-center ai-center">
|
||||
<u-icon name="minus" size="12" color="#FFFFFF"/>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:input>
|
||||
<view class="num-input tc">{{ goods['cartNum'] }}</view>
|
||||
</template>
|
||||
<template v-slot:plus>
|
||||
<view class="num-btn flex jc-center ai-center">
|
||||
<u-icon name="plus" size="12" color="#FFFFFF"/>
|
||||
</view>
|
||||
</template>
|
||||
</u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="footer-fixed flex jc-between ai-center">
|
||||
<view style="margin-left: 32rpx;">
|
||||
<CheckboxIcon style="margin-right: 24rpx;" :default-state="isAll" @change="value => onAllChange(value)"/>
|
||||
<text style="color:#666666;font-size: 32rpx">已选({{ selectCount }})</text>
|
||||
</view>
|
||||
<view class="flex ai-center">
|
||||
<view style="margin-right: 20rpx;color:#666666;font-size: 32rpx">合计:
|
||||
<text class="bold" style="color:#E92727">￥{{ total }}</text>
|
||||
</view>
|
||||
<view class="btn-submit bold flex jc-center ai-center" @click="submit">结算</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {changeCartNum, getCartGroup, postCartDel} from "@/api/store";
|
||||
import {VUE_APP_RESOURCES_URL} from '../config/index'
|
||||
import CheckboxIcon from "@/components/CheckboxIcon.vue";
|
||||
|
||||
const webUrl = VUE_APP_RESOURCES_URL
|
||||
|
||||
export default {
|
||||
name: 'CartIndex',
|
||||
components: {
|
||||
CheckboxIcon
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl,
|
||||
ready: false,
|
||||
isAll: false,
|
||||
selectCount: 0,
|
||||
total: 0,
|
||||
list: []
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.ready = true
|
||||
this.getCart()
|
||||
},
|
||||
methods: {
|
||||
async getCart() {
|
||||
const res = await getCartGroup()
|
||||
if (res.success) {
|
||||
this.list = res.data['valid']
|
||||
this.list.map(item => {
|
||||
item.state = false
|
||||
if (item.carts) {
|
||||
item.carts.map(child => {
|
||||
child.state = false
|
||||
})
|
||||
}
|
||||
})
|
||||
this.handleAll(true)
|
||||
}
|
||||
},
|
||||
onChange(state, index, childIndex) {
|
||||
if (childIndex === '') {
|
||||
this.list[index].state = state
|
||||
this.list[index].carts.map(good => {
|
||||
good.state = state
|
||||
})
|
||||
} else {
|
||||
this.list[index].carts[childIndex].state = state
|
||||
let count = 0
|
||||
this.list[index].carts.map(good => {
|
||||
if (good.state) {
|
||||
count++
|
||||
}
|
||||
})
|
||||
this.list[index].state = count === this.list[index].carts.length
|
||||
}
|
||||
this.$forceUpdate()
|
||||
this.calcAll()
|
||||
},
|
||||
onAllChange() {
|
||||
this.handleAll(!this.isAll)
|
||||
},
|
||||
handleAll(state) {
|
||||
this.list.map(item => {
|
||||
item.state = state
|
||||
if (item.carts) {
|
||||
item.carts.map(good => {
|
||||
good.state = state
|
||||
})
|
||||
}
|
||||
})
|
||||
this.isAll = state
|
||||
this.calcAll()
|
||||
},
|
||||
calcAll() {
|
||||
let total = 0
|
||||
let count = 0
|
||||
let goodsAll = 0
|
||||
this.list.map(item => {
|
||||
if (item.carts) {
|
||||
item.carts.map(good => {
|
||||
goodsAll++
|
||||
if (good.state) {
|
||||
total += good.cartNum * good.truePrice
|
||||
count++
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
this.total = total
|
||||
this.selectCount = count
|
||||
this.isAll = goodsAll === count
|
||||
},
|
||||
navToStore(id) {
|
||||
uni.navigateTo({
|
||||
url: '/pagesInn/inn/innHome?id=' + id
|
||||
})
|
||||
},
|
||||
handleIds() {
|
||||
const ids = []
|
||||
this.list.map(item => {
|
||||
item.carts.map(good => {
|
||||
if (good.state) {
|
||||
ids.push(good.id)
|
||||
}
|
||||
})
|
||||
})
|
||||
return ids
|
||||
},
|
||||
remove() {
|
||||
const _this = this
|
||||
const ids = _this.handleIds()
|
||||
if (ids.length === 0) return
|
||||
|
||||
uni.showModal({
|
||||
title: '确认删除已选商品?',
|
||||
content: '',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '确认',
|
||||
success: async () => {
|
||||
const res = await postCartDel(ids)
|
||||
if (res.success) await _this.getCart()
|
||||
}
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
const ids = this.handleIds()
|
||||
if (ids.length === 0) return
|
||||
|
||||
const param = ids.join(',')
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/OrderSubmission/index?id=' + param
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
view {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pages-cart {
|
||||
min-height: 100vh;
|
||||
padding-top: calc(var(--status-bar-height) + 54px);
|
||||
padding-bottom: 100rpx;
|
||||
}
|
||||
|
||||
.group-item {
|
||||
width: 710rpx;
|
||||
margin: 12rpx 20rpx;
|
||||
padding: 8rpx 8rpx 32rpx 20rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.store-cover {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 8rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
.goods {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.goods-cover {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-right: 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.one-t {
|
||||
width: 420rpx;
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
line-height: 42rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sku {
|
||||
display: inline-flex;
|
||||
height: 42rpx;
|
||||
margin-top: 12rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 22rpx;
|
||||
background: #FDF1F3;
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.num-btn {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(236, 236, 238, 1);
|
||||
border: 2px solid rgba(236, 236, 238, 1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.num-input {
|
||||
width: 64rpx;
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
height: 100rpx;
|
||||
box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.16);
|
||||
background: #FFFFFF;
|
||||
|
||||
.btn-submit {
|
||||
width: 196rpx;
|
||||
height: 100rpx;
|
||||
background: #FD5749;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<view class="pages-cart" v-if="ready">
|
||||
<u-navbar leftIcon="trash" title="购物车" fixed @leftClick="remove"/>
|
||||
|
||||
<view class="tc" style="margin-top: 300rpx" v-if="list.length===0">
|
||||
<image style="width: 420rpx;height: 418rpx" :src="webUrl+'/20240106211138206789.png'" mode="scaleToFill"/>
|
||||
</view>
|
||||
|
||||
<view class="group-item" v-for="(item,index) in list" :key="index">
|
||||
|
||||
<view class="flex jc-between">
|
||||
<view class="flex ai-center">
|
||||
<CheckboxIcon style="margin-right: 24rpx;" :default-state="item['state']" :mark="[index]" @change="onChange"/>
|
||||
<image class="store-cover" :src="item['merAvatar']"
|
||||
mode="scaleToFill"/>
|
||||
<view style="color:#333333;font-size: 30rpx">{{ item['merName'] }}</view>
|
||||
</view>
|
||||
<view class="flex ai-center" style="color:#E92727;font-size: 24rpx" @click="navToStore(item['merId'])">
|
||||
进店逛逛
|
||||
<image style="width: 24rpx;height: 24rpx" :src="webUrl+'/20240109234706982937.png'" mode="scaleToFill"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="goods-box">
|
||||
<view class="goods flex ai-center" v-for="(goods,gIndex) in item['carts']" :key="gIndex">
|
||||
<CheckboxIcon style="margin-right: 24rpx;" :default-state="goods['state']" :mark="[index,gIndex]"
|
||||
@change="onChange"/>
|
||||
<image class="goods-cover flex-0" :src="goods['productInfo']['attrInfo']['image']" mode="scaleToFill"
|
||||
v-if="goods['productInfo']['attrInfo']['image']"/>
|
||||
<image class="goods-cover flex-0" :src="goods['productInfo']['image']" mode="scaleToFill" v-else/>
|
||||
|
||||
<view style="width: 100%">
|
||||
<view class="one-t">{{ goods['productInfo']['storeName'] }}</view>
|
||||
<view class="sku ai-center">规格：{{ goods['productInfo']['attrInfo']['sku'] }}</view>
|
||||
<view class="flex jc-between ai-center" style="width: 100%;margin-top: 26rpx;">
|
||||
<view style="color:#E92727;font-size: 32rpx;">
|
||||
<text class="bold" style="font-size: 24rpx">￥</text>
|
||||
{{ goods['truePrice'] }}
|
||||
</view>
|
||||
<u-number-box class="num-step" v-model="goods['cartNum']" :name="goods['id']"
|
||||
:max="goods['productInfo']['attrInfo']['stock']" integer disabledInput
|
||||
iconStyle="color: #fff" @change="changeNum">
|
||||
<template v-slot:minus>
|
||||
<view class="num-btn flex jc-center ai-center">
|
||||
<u-icon name="minus" size="12" color="#FFFFFF"/>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:input>
|
||||
<view class="num-input tc">{{ goods['cartNum'] }}</view>
|
||||
</template>
|
||||
<template v-slot:plus>
|
||||
<view class="num-btn flex jc-center ai-center">
|
||||
<u-icon name="plus" size="12" color="#FFFFFF"/>
|
||||
</view>
|
||||
</template>
|
||||
</u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="footer-fixed flex jc-between ai-center">
|
||||
<view style="margin-left: 32rpx;">
|
||||
<CheckboxIcon style="margin-right: 24rpx;" :default-state="isAll" :mark="[-1]" @change="onChange"/>
|
||||
<text style="color:#666666;font-size: 32rpx">全选({{ selectCount }})</text>
|
||||
</view>
|
||||
<view class="flex ai-center">
|
||||
<view style="margin-right: 20rpx;color:#666666;font-size: 32rpx">合计:
|
||||
<text class="bold" style="color:#E92727">￥{{ total }}</text>
|
||||
</view>
|
||||
<view class="btn-submit bold flex jc-center ai-center" @click="submit">结算</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed, onMounted, ref} from "@vue/composition-api";
|
||||
import {onShow} from '@dcloudio/uni-app'
|
||||
import {changeCartNum, getCartGroup, postCartDel} from "@/api/store";
|
||||
import CheckboxIcon from "@/components/CheckboxIcon.vue";
|
||||
import {VUE_APP_RESOURCES_URL} from '../config/index'
|
||||
|
||||
const webUrl = VUE_APP_RESOURCES_URL
|
||||
|
||||
const ready = ref(false)
|
||||
onShow(() => {
|
||||
getCart()
|
||||
ready.value = true
|
||||
})
|
||||
|
||||
const list = ref([])
|
||||
const getCart = async () => {
|
||||
const res = await getCartGroup()
|
||||
if (res.success) {
|
||||
list.value = res.data['valid']
|
||||
handleAll(false)
|
||||
}
|
||||
}
|
||||
|
||||
const navToStore = (id) => {
|
||||
uni.navigateTo({
|
||||
url: '/pagesInn/inn/innHome?id=' + id
|
||||
})
|
||||
}
|
||||
|
||||
const total = computed(() => {
|
||||
let price = 0
|
||||
list.value.forEach(item => {
|
||||
item['carts'].forEach(goods => {
|
||||
if (goods.state) price += goods['cartNum'] * goods['truePrice']
|
||||
})
|
||||
})
|
||||
return price
|
||||
})
|
||||
const isAll = ref(false)
|
||||
const onChange = (state, mark) => {
|
||||
if (mark.length === 1) {
|
||||
if (mark[0] === -1) {
|
||||
handleAll(state)
|
||||
} else {
|
||||
list.value[mark[0]]['state'] = state
|
||||
list.value[mark[0]]['carts'] = list.value[mark[0]]['carts'].map(goods => {
|
||||
goods.state = state
|
||||
return goods
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (mark.length === 2) {
|
||||
list.value[mark[0]]['carts'][mark[1]]['state'] = state
|
||||
const length = list.value[mark[0]]['carts'].length
|
||||
let count = 0
|
||||
list.value[mark[0]]['carts'] = list.value[mark[0]]['carts'].map((goods, gIndex) => {
|
||||
if (gIndex === mark[1]) goods['state'] = state
|
||||
if (goods['state']) count++
|
||||
return goods
|
||||
})
|
||||
list.value[mark[0]]['state'] = count === length
|
||||
}
|
||||
}
|
||||
|
||||
const handleAll = (state) => {
|
||||
isAll.value = state
|
||||
list.value = list.value.map(item => {
|
||||
item.state = state
|
||||
item.carts = item.carts.map(goods => {
|
||||
goods.state = state
|
||||
return goods
|
||||
})
|
||||
return item
|
||||
})
|
||||
}
|
||||
|
||||
const changeNum = (event) => {
|
||||
changeCartNum(event.name, event.value)
|
||||
}
|
||||
|
||||
const selectCount = computed(() => {
|
||||
let count = 0
|
||||
list.value.forEach(item => {
|
||||
item['carts'].forEach(goods => {
|
||||
if (goods.state) count++
|
||||
})
|
||||
})
|
||||
return count
|
||||
})
|
||||
|
||||
const handleIds = () => {
|
||||
if (selectCount.value === 0) {
|
||||
uni.showToast({
|
||||
title: "请选择产品",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
})
|
||||
return []
|
||||
}
|
||||
|
||||
let ids = []
|
||||
list.value.forEach(item => {
|
||||
item['carts'].forEach(goods => {
|
||||
if (goods['state']) ids.push(goods['id'])
|
||||
})
|
||||
})
|
||||
return ids
|
||||
}
|
||||
|
||||
const remove = () => {
|
||||
const ids = handleIds()
|
||||
if (ids.length === 0) return
|
||||
|
||||
uni.showModal({
|
||||
title: '确认删除已选商品?',
|
||||
content: '',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '确认',
|
||||
success: async () => {
|
||||
const res = await postCartDel(ids)
|
||||
if (res.success) await getCart()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const submit = () => {
|
||||
const ids = handleIds()
|
||||
if (ids.length === 0) return
|
||||
|
||||
const param = ids.join(',')
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/OrderSubmission/index?id=' + param
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
view {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pages-cart {
|
||||
min-height: 100vh;
|
||||
padding-top: calc(var(--status-bar-height) + 54px);
|
||||
padding-bottom: 100rpx;
|
||||
}
|
||||
|
||||
.group-item {
|
||||
width: 710rpx;
|
||||
margin: 12rpx 20rpx;
|
||||
padding: 8rpx 8rpx 32rpx 20rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.store-cover {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 8rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
.goods {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.goods-cover {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-right: 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.one-t {
|
||||
width: 420rpx;
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
line-height: 42rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sku {
|
||||
display: inline-flex;
|
||||
height: 42rpx;
|
||||
margin-top: 12rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 22rpx;
|
||||
background: #FDF1F3;
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.num-btn {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(236, 236, 238, 1);
|
||||
border: 2px solid rgba(236, 236, 238, 1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.num-input {
|
||||
width: 64rpx;
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
height: 100rpx;
|
||||
box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.16);
|
||||
background: #FFFFFF;
|
||||
|
||||
.btn-submit {
|
||||
width: 196rpx;
|
||||
height: 100rpx;
|
||||
background: #FD5749;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<view class="pages-cart" v-if="ready">
|
||||
<u-navbar leftIcon="trash" title="购物车" fixed @leftClick="remove"/>
|
||||
|
||||
<view class="tc" style="margin-top: 300rpx" v-if="list.length===0">
|
||||
<image style="width: 420rpx;height: 418rpx" :src="webUrl+'/20240106211138206789.png'" mode="scaleToFill"/>
|
||||
</view>
|
||||
|
||||
<view class="group-item" v-for="(item,index) in list" :key="index">
|
||||
|
||||
<view class="flex jc-between">
|
||||
<view class="flex ai-center">
|
||||
<image class="store-cover" :src="item['merAvatar']"
|
||||
mode="scaleToFill"/>
|
||||
<view style="color:#333333;font-size: 30rpx">{{ item['merName'] }}</view>
|
||||
</view>
|
||||
<view class="flex ai-center" style="color:#E92727;font-size: 24rpx" @click="navToStore(item['merId'])">
|
||||
进店逛逛
|
||||
<image style="width: 24rpx;height: 24rpx" :src="webUrl+'/20240109234706982937.png'" mode="scaleToFill"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="goods-box">
|
||||
<view class="goods flex ai-center" v-for="(goods,gIndex) in item['carts']" :key="gIndex">
|
||||
<image class="goods-cover flex-0" :src="goods['productInfo']['attrInfo']['image']" mode="scaleToFill"
|
||||
v-if="goods['productInfo']['attrInfo']['image']"/>
|
||||
<image class="goods-cover flex-0" :src="goods['productInfo']['image']" mode="scaleToFill" v-else/>
|
||||
|
||||
<view style="width: 100%">
|
||||
<view class="one-t">{{ goods['productInfo']['storeName'] }}</view>
|
||||
<view class="sku ai-center">规格：{{ goods['productInfo']['attrInfo']['sku'] }}</view>
|
||||
<view class="flex jc-between ai-center" style="width: 100%;margin-top: 26rpx;">
|
||||
<view style="color:#E92727;font-size: 32rpx;">
|
||||
<text class="bold" style="font-size: 24rpx">￥</text>
|
||||
{{ goods['truePrice'] }}
|
||||
</view>
|
||||
<u-number-box class="num-step" v-model="goods['cartNum']" :name="goods['id']"
|
||||
:max="goods['productInfo']['attrInfo']['stock']" integer disabledInput
|
||||
iconStyle="color: #fff" @change="changeNum">
|
||||
<template v-slot:minus>
|
||||
<view class="num-btn flex jc-center ai-center">
|
||||
<u-icon name="minus" size="12" color="#FFFFFF"/>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:input>
|
||||
<view class="num-input tc">{{ goods['cartNum'] }}</view>
|
||||
</template>
|
||||
<template v-slot:plus>
|
||||
<view class="num-btn flex jc-center ai-center">
|
||||
<u-icon name="plus" size="12" color="#FFFFFF"/>
|
||||
</view>
|
||||
</template>
|
||||
</u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="footer-fixed flex jc-between ai-center">
|
||||
<view style="margin-left: 32rpx;">
|
||||
<text style="color:#666666;font-size: 32rpx">全选({{ selectCount }})</text>
|
||||
</view>
|
||||
<view class="flex ai-center">
|
||||
<view style="margin-right: 20rpx;color:#666666;font-size: 32rpx">合计:
|
||||
<text class="bold" style="color:#E92727">￥{{ total }}</text>
|
||||
</view>
|
||||
<view class="btn-submit bold flex jc-center ai-center" @click="submit">结算</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {changeCartNum, getCartGroup, postCartDel} from "@/api/store";
|
||||
import {VUE_APP_RESOURCES_URL} from '../config/index'
|
||||
|
||||
const webUrl = VUE_APP_RESOURCES_URL
|
||||
|
||||
export default {
|
||||
name: 'CartIndex',
|
||||
data() {
|
||||
return {
|
||||
webUrl,
|
||||
ready: false,
|
||||
isAll: false,
|
||||
selectCount: 0,
|
||||
total: 0,
|
||||
list: []
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.ready = true
|
||||
this.getCart()
|
||||
},
|
||||
methods: {
|
||||
async getCart() {
|
||||
const res = await getCartGroup()
|
||||
if (res.success) {
|
||||
this.list = res.data['valid']
|
||||
this.handleAll(true)
|
||||
}
|
||||
},
|
||||
onChange(state, mark) {
|
||||
|
||||
},
|
||||
handleAll(state) {
|
||||
|
||||
},
|
||||
navToStore(id) {
|
||||
uni.navigateTo({
|
||||
url: '/pagesInn/inn/innHome?id=' + id
|
||||
})
|
||||
},
|
||||
handleIds() {
|
||||
|
||||
},
|
||||
remove() {
|
||||
const _this = this
|
||||
const ids = _this.handleIds()
|
||||
if (ids.length === 0) return
|
||||
|
||||
uni.showModal({
|
||||
title: '确认删除已选商品?',
|
||||
content: '',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '确认',
|
||||
success: async () => {
|
||||
const res = await postCartDel(ids)
|
||||
if (res.success) await _this.getCart()
|
||||
}
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
const ids = this.handleIds()
|
||||
if (ids.length === 0) return
|
||||
|
||||
const param = ids.join(',')
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/OrderSubmission/index?id=' + param
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
view {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pages-cart {
|
||||
min-height: 100vh;
|
||||
padding-top: calc(var(--status-bar-height) + 54px);
|
||||
padding-bottom: 100rpx;
|
||||
}
|
||||
|
||||
.group-item {
|
||||
width: 710rpx;
|
||||
margin: 12rpx 20rpx;
|
||||
padding: 8rpx 8rpx 32rpx 20rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.store-cover {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 8rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
.goods {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.goods-cover {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-right: 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.one-t {
|
||||
width: 420rpx;
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
line-height: 42rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sku {
|
||||
display: inline-flex;
|
||||
height: 42rpx;
|
||||
margin-top: 12rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 22rpx;
|
||||
background: #FDF1F3;
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.num-btn {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(236, 236, 238, 1);
|
||||
border: 2px solid rgba(236, 236, 238, 1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.num-input {
|
||||
width: 64rpx;
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
height: 100rpx;
|
||||
box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.16);
|
||||
background: #FFFFFF;
|
||||
|
||||
.btn-submit {
|
||||
width: 196rpx;
|
||||
height: 100rpx;
|
||||
background: #FD5749;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,973 +0,0 @@
|
||||
<template>
|
||||
<view class="newsList" ref="container">
|
||||
<hx-navbar :back="false" :fixed="true" title="七彩云上" statusBarFontColor="#ffffff" color="#ffffff" :left-slot="true"
|
||||
:background-color="[13,197,197]" :right-slot="true">
|
||||
<block slot="left">
|
||||
<view class="location acea-row row-center row-middle"
|
||||
style="position: relative;height: 42rpx;margin-left: 35rpx;box-sizing: border-box;">
|
||||
<image style="width: 30rpx;height: 30rpx;" :src="webUrl+'/20210807134107296760.png'" mode=""></image>
|
||||
<view class="city-name" @click="cityNameClick">{{cityName}}</view>
|
||||
|
||||
</view>
|
||||
</block>
|
||||
</hx-navbar>
|
||||
|
||||
<view style="position: fixed;right: 0;width: 100%;z-index: 5;" :style="{top:navHeight}">
|
||||
<drop-down :showDd="showCitySelect" :list="cityList" @select="selectCity" @close="closeCitySelect"></drop-down>
|
||||
</view>
|
||||
|
||||
<view class="acea-row row-column"
|
||||
style="position: fixed;left: 0;right: 0;background-color: #0DC5C5;z-index: 4;overflow-y: hidden;"
|
||||
:style="{top:segTop+'px'}">
|
||||
|
||||
<!-- 搜索开始 -->
|
||||
<view class="searchGood" style="margin-top: 10rpx;">
|
||||
<view class="search acea-row row-between-wrapper">
|
||||
<view class="input acea-row row-between-wrapper">
|
||||
<text class="iconfont icon-sousuo2"></text>
|
||||
<input style="color: #acacac !important;" type="text" placeholder="请输入搜索关键词" confirm-type="search"
|
||||
v-model="search" @confirm="refreshData" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 搜索结束 -->
|
||||
|
||||
<!-- tab开始 -->
|
||||
<view class="top-tab acea-row row-middle" style="position: relative;">
|
||||
<view class="tab acea-row row-middle row-center" @click="changeTab(0)">
|
||||
<view :style="(activeIndex==0?'background:#F6F6F6':'')"
|
||||
class="tab-wrap acea-row row-column row-middle row-center">
|
||||
<image v-if="activeIndex==0" style="width: 36rpx;height:36rpx" :src="webUrl+'/20210824104937140590.png'"
|
||||
mode=""></image>
|
||||
<image v-else style="width: 36rpx;height:36rpx" :src="webUrl+'/20210807135928525293.png'"
|
||||
mode="scaleToFill"></image>
|
||||
<text :style="'font-size:22rpx;margin-top4rpx;color:'+(activeIndex==0?'#0DC5C5':'#ffffff')">#住在云上</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tab acea-row row-middle row-center" @click="changeTab(1)">
|
||||
<view :style="(activeIndex==1?'background:#F6F6F6':'')"
|
||||
class="tab-wrap acea-row row-column row-middle row-center">
|
||||
<image v-if="activeIndex==1" style="width: 32rpx;height:36rpx" :src="webUrl+'/20210824104954282401.png'"
|
||||
mode=""></image>
|
||||
<image v-else style="width: 36rpx;height:36rpx" :src="webUrl+'/20210807140012422075.png'"
|
||||
mode="scaleToFill"></image>
|
||||
<text :style="'font-size:22rpx;margin-top4rpx;color:'+(activeIndex==1?'#0DC5C5':'#ffffff')">#逛在云上</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tab acea-row row-middle row-center" @click="changeTab(2)">
|
||||
<view :style="(activeIndex==2?'background:#F6F6F6':'')"
|
||||
class="tab-wrap acea-row row-column row-middle row-center">
|
||||
<image v-if="activeIndex==2" style="width: 32rpx;height:36rpx" :src="webUrl+'/20210824105005945092.png'"
|
||||
mode=""></image>
|
||||
<image v-else style="width: 36rpx;height:36rpx" :src="webUrl+'/20210807140042265370.png'"
|
||||
mode="scaleToFill"></image>
|
||||
<text :style="'font-size:22rpx;margin-top4rpx;color:'+(activeIndex==2?'#0DC5C5':'#ffffff')">#吃在云上</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tab acea-row row-middle row-center" @click="changeTab(3)">
|
||||
<view :style="(activeIndex==3?'background:#F6F6F6':'')"
|
||||
class="tab-wrap acea-row row-column row-middle row-center">
|
||||
<image v-if="activeIndex==3" style="width: 36rpx;height:36rpx" :src="webUrl+'/20210824105016005512.png'"
|
||||
mode=""></image>
|
||||
<image v-else style="width: 36rpx;height:36rpx" :src="webUrl+'/20210807140136696881.png'"
|
||||
mode="scaleToFill"></image>
|
||||
<text :style="'font-size:22rpx;margin-top4rpx;color:'+(activeIndex==3?'#0DC5C5':'#ffffff')">#彩云资讯</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- tab结束 -->
|
||||
|
||||
<!-- <block v-if="activeIndex==3">
|
||||
<view class="" style="padding:30rpx 30rpx 0 30rpx;background-color: #F5F5F5;">
|
||||
<v-tabs v-model="current" :fixed="true" :tabs="tabs" bgColor="#f5f5f5" itemBorderRadius="14.5px" itemMarginRight="30rpx" activeItemBgColor="#ff0000" itemBgColor="RGB(232,232,232)" line-height="0" color="RGB(197,198,204)" activeColor="#fff" @change="changeArtileTab"></v-tabs>
|
||||
</view>
|
||||
</block> -->
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 占位 -->
|
||||
<!-- <view class="" :style="{height:activeIndex==3?'252rpx':'152rpx'}"></view> -->
|
||||
<view class="" style="height: 252rpx;"></view>
|
||||
|
||||
<!-- 住在云上开始 -->
|
||||
<block v-if="activeIndex==0">
|
||||
<view class="wrapper hot" v-if="innArray.length > 0">
|
||||
<view class="hotGoodsList acea-row">
|
||||
<view :style="{width:hotInnColumnWidth}" @click="goInnDetail(item)" class="newProductsItem"
|
||||
v-for="(item, innInfoIndex) in innArray" :key="innInfoIndex">
|
||||
<view class="img-box">
|
||||
<image style="border-radius: 8rpx;" :style="{width:hotInnColumnWidth,height:hotInnColumnWidth}"
|
||||
:src="item.cover" />
|
||||
<view class="like-btn" @click="likeInn(item)">
|
||||
<image v-if="item.zanHistory==0" style="width: 100%;height: 100%;" :src="webUrl+'/20230304134637330341.png'"
|
||||
mode=""></image>
|
||||
<image v-if="item.zanHistory>0" style="width: 100%;height: 100%;" :src="webUrl+'/20230304134642958611.png'"
|
||||
mode=""></image>
|
||||
</view>
|
||||
<view class="acea-row row-middle"
|
||||
style="flex-wrap: nowrap;position: absolute;left: 24rpx;right: 24rpx;bottom: 20rpx;z-index: 2;"
|
||||
v-if="item.cityName != undefined && item.cityName.length>0">
|
||||
<image style="width: 22rpx;height: 22rpx;" :src="webUrl+'/20210609100715629446.png'" mode=""></image>
|
||||
<text style="color: #fff;font-size: 22rpx;margin-left: 10rpx;">{{item.cityName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pro-info line2" style="min-height: 80rpx;padding: 0 10rpx;"><text>{{ item.content }}</text>
|
||||
</view>
|
||||
<!-- <view class="inn-tag-wrap acea-row row-left row-middle" style="padding:0 10rpx">
|
||||
<view class="zanmost-tag" v-if="item.zanMostTag>0">点赞最多</view>
|
||||
<view class="latest-tag" v-if="item.newTag>0">最新发布</view>
|
||||
<view class="location-tag" v-if="item.cityName != undefined && item.cityName.length>0">{{item.cityName}}</view>
|
||||
</view> -->
|
||||
<view class="inn-shop-info acea-row row-middle"
|
||||
style="flex-wrap: nowrap;margin-bottom: 20rpx;padding: 10rpx;">
|
||||
<view class="acea-row row-center row-middle" style="flex-shrink: 0;">
|
||||
<image class="inn-shop-icon" :src="item.logo" mode=""></image>
|
||||
</view>
|
||||
<view class="acea-row row-column row-between" style="flex-grow: 1;margin-left: 10rpx;">
|
||||
<view class="inn-shop-name">{{item.name}}</view>
|
||||
<view class="inn-shop-date">{{ innOpenDateString(item.createdTime,'yyyy/MM/dd') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</block>
|
||||
<!-- 住在云上结束 -->
|
||||
|
||||
<!-- 逛在云上开始 -->
|
||||
<block v-if="activeIndex==1">
|
||||
<!-- <view class="wrapper hot" v-if="innArray.length > 0" >
|
||||
<view class="hotGoodsList acea-row row-column" >
|
||||
<view style="border-radius: 8rpx;background: #FFFFFF;flex-wrap: nowrap;margin: 35rpx 35rpx 0 35rpx;padding: 16rpx;" @click="goInnDetail(item)" class="acea-row" v-for="(item, innInfoIndex) in innArray" :key="innInfoIndex">
|
||||
<view class="img-box" style="width: 164rpx;height: 164rpx;flex-shrink: 0;">
|
||||
<image style="border-radius: 4rpx 4rpx 0px 0px;width: 100%;height: 100%;" :src="item.cover" />
|
||||
</view>
|
||||
<view class="acea-row row-column row-around" style="flex-grow: 1;">
|
||||
<view class="pro-info line1" style="padding: 0 10rpx;border-radius: 4rpx;">{{ item.name }}</view>
|
||||
<view class="pro-info acea-row line2" style="padding: 0 10rpx;line-height: 28rpx;">
|
||||
<text class="" style="font-size: 24rpx;color: #a9a9a9;">{{item.content}}</text>
|
||||
</view>
|
||||
|
||||
<view class="inn-shop-info acea-row row-middle" style="flex-wrap: nowrap;padding: 10rpx;">
|
||||
<image class="" style="width: 28rpx;height: 28rpx;" :src="webUrl+'/20210402172346756674.png'" mode=""></image>
|
||||
<text class="" style="font-size: 24rpx;color: #666666;">{{item.address}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="wrapper hot" v-if="innArray.length > 0">
|
||||
<view class="hotGoodsList acea-row" style="">
|
||||
<view :style="{width:hotGoodsColumnWidth,background:'#ffffff'}" @click="goInnDetail(item)"
|
||||
class="newProductsItem" v-for="(item, innInfoIndex) in innArray" :key="innInfoIndex">
|
||||
<view class="img-box" style="position: relative;">
|
||||
<image style="border-radius: 8rpx" :style="{width:hotInnColumnWidth,height:hotInnColumnWidth}"
|
||||
:src="item.cover" />
|
||||
|
||||
|
||||
|
||||
<view class="acea-row row-column"
|
||||
style="flex-wrap: nowrap;position: absolute;left: 8rpx;right: 8rpx;bottom: 20rpx;z-index: 2;">
|
||||
<view class="acea-row row-middle"
|
||||
style="padding-left: 6rpx;padding-right: 16rpx;align-self: flex-start;min-height: 42rpx;color: #ffffff;font-size: 22rpx;background-image: url(http://admin-api.xdd618.com/file/pic/20210609100647993289.png);background-repeat: no-repeat;background-size: 100% 100%;"
|
||||
v-if="item.cityName != undefined && item.cityName.length>0">
|
||||
{{item.cityName}}
|
||||
</view>
|
||||
<view class="acea-row row-middle line2"
|
||||
style="padding: 10rpx;background: #fff;border-radius: 0px 12px 12px 12px;opacity: 0.9;color: #333333;font-size: 24rpx;">
|
||||
{{ item.content }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- <view class="pro-info line2" style="min-height: 80rpx;padding: 0 10rpx;border-radius: 4rpx;margin-top: 6rpx;">{{ item.content }}</view> -->
|
||||
|
||||
<view class="inn-shop-info acea-row row-middle" style="flex-wrap: nowrap;padding: 10rpx;">
|
||||
<view class="acea-row row-center row-middle" style="flex-shrink: 0;">
|
||||
<image class="inn-shop-icon" :src="item.logo" mode=""></image>
|
||||
</view>
|
||||
<view class="acea-row row-column row-between" style="flex-grow: 1;margin-left: 10rpx;">
|
||||
<view class="inn-shop-name">{{item.name}}</view>
|
||||
<!-- <view class="inn-shop-date">{{innOpenDateString(item.createdTime,'yyyy/MM/dd')}}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 逛在云上结束 -->
|
||||
|
||||
<!-- 吃在云上开始 -->
|
||||
<block v-if="activeIndex==2">
|
||||
<view class="wrapper hot" v-if="innArray.length > 0">
|
||||
<view class="hotGoodsList acea-row row-column">
|
||||
<view
|
||||
style="border-radius: 8rpx;background: #FFFFFF;flex-wrap: nowrap;margin: 35rpx 35rpx 0 35rpx;padding: 16rpx;"
|
||||
@click="goInnDetail(item)" class="acea-row row-column" v-for="(item, innInfoIndex) in innArray"
|
||||
:key="innInfoIndex">
|
||||
|
||||
<view class="inn-shop-info acea-row row-middle" style="flex-wrap: nowrap;padding: 10rpx;">
|
||||
<view class="acea-row row-center row-middle" style="flex-shrink: 0;">
|
||||
<image class="inn-shop-icon" :src="item.logo" mode=""></image>
|
||||
</view>
|
||||
<view class="acea-row row-column row-between" style="flex-grow: 1;margin-left: 10rpx;">
|
||||
<view class="inn-shop-name">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pro-info acea-row line2" style="padding: 0 10rpx;line-height: 28rpx;">
|
||||
<text class="" style="font-size: 24rpx;color: #a9a9a9;">{{item.content}}</text>
|
||||
</view>
|
||||
<!-- <view class="" style="height: 319rpx;overflow: hidden;margin-bottom: 28rpx;border-radius: 12rpx;">
|
||||
<img-box style="width: 100%;" :imgList='item.pics.slice(0,3)' :num='item.pics.slice(0,3).length'></img-box>
|
||||
</view> -->
|
||||
|
||||
<block v-if="item.pics && item.pics.length>1">
|
||||
<img-box style="width: 100%;" :imgList='item.pics.slice(0,3)' :num='item.pics.slice(0,3).length'
|
||||
:imgRadius='12'></img-box>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="" style="height: 319rpx;overflow: hidden;margin-bottom: 28rpx;border-radius: 12rpx;">
|
||||
<img-box style="width: 100%;" :imgList='item.pics.slice(0,3)' :num='item.pics.slice(0,3).length'
|
||||
:imgRadius='12'></img-box>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="pro-info acea-row" style="padding: 0;line-height: 28rpx;">
|
||||
<image class="" style="width: 28rpx;height: 28rpx;" :src="webUrl+'/20210402172346756674.png'" mode="">
|
||||
</image>
|
||||
<text class="" style="font-size: 24rpx;color: #666666;">{{item.address}}</text>
|
||||
</view>
|
||||
<!-- <view class="inn-tag-wrap acea-row row-left row-middle" style="">
|
||||
<view class="zanmost-tag" v-if="item.zanMostTag>0">点赞最多</view>
|
||||
<view class="latest-tag" v-if="item.newTag>0">最新发布</view>
|
||||
<view class="location-tag" v-if="item.cityName != undefined && item.cityName.length>0">{{item.cityName}}</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 吃在云上结束 -->
|
||||
|
||||
<!-- 彩云资讯开始 -->
|
||||
<block v-if="activeIndex==3">
|
||||
<view class="list" v-for="(item, articleListIndex) in articleList" :key="articleListIndex">
|
||||
<view @click="goNewsDetail(item)" class="item acea-row" style="flex-wrap: nowrap;">
|
||||
<view class="text acea-row row-column-between">
|
||||
<view class="acea-row row-column" style="position: relative;">
|
||||
<view class="name line2">{{ item.title }}</view>
|
||||
<view class="summary line2" style="width: 322rpx;">{{ item.synopsis }}</view>
|
||||
</view>
|
||||
<view class="acea-row row-between">
|
||||
<view class="see-num-box acea-row row-middle">
|
||||
<image :src="webUrl+'/20230304131559277594.png'" class="eye-icon" mode=""></image>
|
||||
<text class="see-num-text">{{item.visit||0}}</text>
|
||||
</view>
|
||||
<view class="">
|
||||
{{ shortDateString(item.addTime) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pictrue">
|
||||
<image :src="item.imageInput" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 彩云资讯结束 -->
|
||||
|
||||
<!--暂无客栈-->
|
||||
<block v-if="activeIndex!=3">
|
||||
<view class="noCommodity" v-if="innArray.length === 0 && !loading">
|
||||
<view class="noPictrue">
|
||||
<image src="@/static/images/img_nodata.png" class="image" />
|
||||
<!-- <image src="@/static/images/img_nodata.png" mode="widthFix"></image> -->
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block v-if="activeIndex==3">
|
||||
<view class="noCommodity" v-if="articleList.length === 0 && !loading">
|
||||
<view class="noPictrue">
|
||||
<image :src="webUrl+'/20210203154951097926.png'" class="image" />
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getArticleList,
|
||||
getHotelNewsCategory
|
||||
} from "@/api/public";
|
||||
import {
|
||||
getHotelList,
|
||||
getHotelCityList
|
||||
} from "@/api/inn.js";
|
||||
import {
|
||||
formatDateTime,
|
||||
isNullOrEmpty
|
||||
} from "@/utils";
|
||||
import dropDown from "@/components/drop-down/drop-down.vue";
|
||||
import config from '@/utils/mapConfig';
|
||||
import imgBox from '@/components/imageTypeSet/imagebox.vue'
|
||||
|
||||
var that;
|
||||
//获取系统状态栏高度
|
||||
// var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
||||
export default {
|
||||
name: "FoodInfomation",
|
||||
components: {
|
||||
// choseCity,
|
||||
dropDown,
|
||||
imgBox
|
||||
},
|
||||
props: {},
|
||||
data: function() {
|
||||
return {
|
||||
showCitySelect: false,
|
||||
current: 0,
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
activeIndex: 3,
|
||||
navHeight: 20 + 44 + 'px',
|
||||
segTop: 20 + 64,
|
||||
searchTop: 64 + 64 + 20,
|
||||
hotInnColumnWidth: '325rpx',
|
||||
cityName: "定位中...",
|
||||
page: 1,
|
||||
limit: 20,
|
||||
search: "",
|
||||
loadTitle: "",
|
||||
loading: false,
|
||||
loadend: false,
|
||||
imgUrls: [],
|
||||
navLsit: [],
|
||||
articleList: [],
|
||||
cityList: [], //有客栈入驻的城市列表
|
||||
innArray: [],
|
||||
active: 0,
|
||||
cid: 0,
|
||||
swiperNew: {
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true
|
||||
},
|
||||
autoplay: {
|
||||
disableOnInteraction: false,
|
||||
delay: 2000
|
||||
},
|
||||
loop: true,
|
||||
speed: 1000,
|
||||
observer: true,
|
||||
observeParents: true
|
||||
},
|
||||
tabs: [],
|
||||
newsTypeArray: [],
|
||||
curSelectCategory: ''
|
||||
};
|
||||
},
|
||||
onShow: function() {
|
||||
this.getHotelCityList();
|
||||
|
||||
//进入时如果有jumpIndex
|
||||
var initIdx = uni.getStorageSync('jumpIndex');
|
||||
if (initIdx) {
|
||||
this.activeIndex = parseInt(initIdx);
|
||||
console.log('jumpIndex:' + initIdx);
|
||||
uni.removeStorageSync('jumpIndex');
|
||||
}
|
||||
// this.getHotelList();
|
||||
this.getArticleLists();
|
||||
this.getHotelNewsCategory();
|
||||
},
|
||||
onLoad: function(e) {
|
||||
that = this;
|
||||
uni.getSystemInfo({
|
||||
success: (e) => {
|
||||
|
||||
//两列商品宽度
|
||||
that.hotInnColumnWidth = (e.screenWidth - uni.upx2px(90)) / 2 + 'px';
|
||||
|
||||
that.navHeight = e.statusBarHeight + 44 + 'px';
|
||||
that.segTop = e.statusBarHeight + 44;
|
||||
that.searchTop = e.statusBarHeight + 44 + uni.upx2px(64);
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
uni.$on('needRefresh', item => {
|
||||
console.log(item, '第一页面数据');
|
||||
this.cityName = item.cityName;
|
||||
this.refreshData();
|
||||
});
|
||||
|
||||
//this.getHotelList();
|
||||
//this.getArticleLists();
|
||||
|
||||
//获取定位地址
|
||||
this.getCurAddress();
|
||||
},
|
||||
onUnload: function() {
|
||||
uni.$off('needRefresh');
|
||||
},
|
||||
mounted: function() {
|
||||
// this.articleBanner();
|
||||
//this.articleCategory();
|
||||
|
||||
// this.$scroll(this.$refs.container, () => {
|
||||
// !this.loading && this.getArticleLists();
|
||||
// });
|
||||
|
||||
|
||||
//this.getHotelList();
|
||||
//this.getArticleLists();
|
||||
|
||||
//获取定位地址
|
||||
//this.getCurAddress();
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.refreshData();
|
||||
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.activeIndex != 3) {
|
||||
!this.loading && this.getHotelList();
|
||||
} else {
|
||||
!this.loading && this.getArticleLists();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isNullOrEmpty,
|
||||
getHotelNewsCategory() {
|
||||
var that = this;
|
||||
getHotelNewsCategory()
|
||||
.then(res => {
|
||||
if (res.data && res.data.length > 0) {
|
||||
that.newsTypeArray = res.data;
|
||||
that.tabs = [];
|
||||
that.newsTypeArray.unshift({
|
||||
'label': '全部',
|
||||
'value': ''
|
||||
});
|
||||
that.newsTypeArray.forEach((item) => {
|
||||
that.tabs.push('#' + item.label);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
|
||||
})
|
||||
},
|
||||
changeArtileTab(index) {
|
||||
console.log('当前选中索引：' + index)
|
||||
console.log("this.newsTypeArray.length: " + this.newsTypeArray.length)
|
||||
//获取分类
|
||||
if (index < this.newsTypeArray.length) {
|
||||
//获取切换分类并刷新列表
|
||||
var curCategory = this.newsTypeArray[index];
|
||||
this.curSelectCategory = curCategory.value;
|
||||
this.page = 1;
|
||||
this.loading = false;
|
||||
this.loadend = false;
|
||||
this.getArticleLists();
|
||||
}
|
||||
|
||||
},
|
||||
selectCity(city) {
|
||||
this.showCitySelect = false;
|
||||
//this.$refs.popup.close();
|
||||
// console.log("selectCity:"+this.showCitySelect);
|
||||
this.cityName = city;
|
||||
this.refreshData();
|
||||
},
|
||||
closeCitySelect() {
|
||||
this.showCitySelect = false;
|
||||
//this.$refs.popup.close();
|
||||
// console.log("closeCitySelect:"+this.showCitySelect);
|
||||
},
|
||||
getHotelCityList() {
|
||||
getHotelCityList().then((res) => {
|
||||
that.cityList = res.data;
|
||||
var allItem = {
|
||||
name: '全 国'
|
||||
}
|
||||
that.cityList.unshift(allItem);
|
||||
}).catch((err) => {
|
||||
|
||||
}).finally(() => {
|
||||
|
||||
})
|
||||
},
|
||||
// popChange(e){
|
||||
// this.showCitySelect = e.show;
|
||||
// },
|
||||
cityNameClick() {
|
||||
this.showCitySelect = true;
|
||||
},
|
||||
refreshData: function() {
|
||||
this.page = 1;
|
||||
this.loading = false;
|
||||
this.loadend = false;
|
||||
if (this.activeIndex != 3) {
|
||||
this.getHotelList();
|
||||
} else {
|
||||
this.getArticleLists();
|
||||
}
|
||||
},
|
||||
changeTab: function(index) {
|
||||
this.innArray = [];
|
||||
this.activeIndex = index;
|
||||
this.page = 1;
|
||||
this.loading = false;
|
||||
this.loadend = false;
|
||||
|
||||
//刷新数据
|
||||
if (this.activeIndex != 3) {
|
||||
this.getHotelList();
|
||||
} else {
|
||||
this.getArticleLists();
|
||||
}
|
||||
},
|
||||
goInnDetail: function(item) {
|
||||
//跳转到客栈详情
|
||||
this.$yrouter.push({
|
||||
path: "/pagesInn/inn/innHome",
|
||||
query: {
|
||||
id: item.id
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
likeInn: function(item) {
|
||||
//喜欢操作
|
||||
|
||||
},
|
||||
//获取当前定位地址
|
||||
getCurAddress() {
|
||||
|
||||
var that = this;
|
||||
//定位
|
||||
uni.showLoading({
|
||||
title: '定位中...'
|
||||
});
|
||||
|
||||
//this.getLocation();
|
||||
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: function(res) {
|
||||
let latitude = res.latitude;
|
||||
let longitude = res.longitude;
|
||||
|
||||
console.log('latitude:' + latitude + 'longitude:' + longitude)
|
||||
|
||||
// #ifdef H5
|
||||
Vue.jsonp(
|
||||
'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude + '&key=' +
|
||||
config.key, {
|
||||
//callbackName: 'QQmap',
|
||||
output: 'jsonp',
|
||||
}).then(json => {
|
||||
// Success.
|
||||
uni.hideLoading();
|
||||
that.cityName = json.result.ad_info.city;
|
||||
//定位成功刷新数据
|
||||
if (that.activeIndex != 3) {
|
||||
that.refreshData();
|
||||
}
|
||||
|
||||
}).catch(err => {
|
||||
// Failed.
|
||||
console.log('地址解析失败:' + JSON.stringify(err));
|
||||
uni.hideLoading();
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
uni.request({
|
||||
url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude +
|
||||
'&key=' + config.key,
|
||||
success: function(res) {
|
||||
// console.log('res:'+JSON.stringify(res.data));
|
||||
uni.hideLoading();
|
||||
|
||||
that.cityName = res.data.result.ad_info.city;
|
||||
|
||||
//定位成功刷新数据
|
||||
if (that.activeIndex != 3) {
|
||||
that.refreshData();
|
||||
}
|
||||
|
||||
},
|
||||
fail: function(res) {
|
||||
console.log('地址解析失败');
|
||||
uni.hideLoading();
|
||||
},
|
||||
complete: function() {
|
||||
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
fail: function(res) {
|
||||
uni.hideLoading();
|
||||
|
||||
// uni.showToast({
|
||||
// title:'城市定位失败:'+JSON.stringify(res),
|
||||
// icon:'none',
|
||||
// duration:2000
|
||||
// })
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
shortDateString(dataStr) {
|
||||
var ret = '';
|
||||
if (isNullOrEmpty(dataStr)) {
|
||||
|
||||
} else {
|
||||
var s = dataStr.toString();
|
||||
s = s.replace(/-/g, "/");
|
||||
var date = new Date(s).getTime();
|
||||
ret = formatDateTime(date, 'yyyy-MM-dd');
|
||||
}
|
||||
return ret;
|
||||
},
|
||||
innOpenDateString(str, format) {
|
||||
return formatDateTime(str, format);
|
||||
},
|
||||
goNewsDetail(item) {
|
||||
this.$yrouter.push({
|
||||
path: "/pages/foodInfomation/foodInfomationDetail",
|
||||
query: {
|
||||
id: item.id
|
||||
}
|
||||
});
|
||||
},
|
||||
getArticleLists: function() {
|
||||
let that = this;
|
||||
if (that.loading) return; //阻止下次请求（false可以进行请求）；
|
||||
if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
|
||||
that.loading = true;
|
||||
let q = {
|
||||
page: that.page,
|
||||
limit: that.limit,
|
||||
name: that.search,
|
||||
type: that.curSelectCategory
|
||||
};
|
||||
getArticleList(q).then(res => {
|
||||
that.loading = false;
|
||||
//apply();js将一个数组插入另一个数组;
|
||||
if (that.page == 1) {
|
||||
that.articleList = [];
|
||||
}
|
||||
that.articleList.push.apply(that.articleList, res.data);
|
||||
that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
|
||||
that.page = that.page + 1;
|
||||
}).catch((err) => {
|
||||
|
||||
}).finally(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
},
|
||||
getHotelList: function() {
|
||||
let that = this;
|
||||
if (that.loading) return; //阻止下次请求（false可以进行请求）；
|
||||
if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
|
||||
that.loading = true;
|
||||
var q = {
|
||||
page: that.page,
|
||||
limit: that.limit,
|
||||
type: that.activeIndex + 1,
|
||||
name: that.search
|
||||
};
|
||||
|
||||
//如果定位到了城市加入参数
|
||||
if (this.cityName.length > 0 && this.cityName != '定位中...') {
|
||||
q.cityName = this.cityName;
|
||||
//全国传空字符串
|
||||
if (this.cityName == '全 国') {
|
||||
q.cityName = '';
|
||||
}
|
||||
}
|
||||
|
||||
getHotelList(q).then(res => {
|
||||
that.loading = false;
|
||||
//apply();js将一个数组插入另一个数组;
|
||||
if (that.page == 1) {
|
||||
that.innArray = [];
|
||||
}
|
||||
that.innArray.push.apply(that.innArray, res.data);
|
||||
that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
|
||||
that.page = that.page + 1;
|
||||
}).catch((err) => {
|
||||
|
||||
}).finally(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
},
|
||||
onClick: function(name) {
|
||||
if (name === 0) this.articleHotList();
|
||||
else {
|
||||
this.cid = this.navLsit[name].id;
|
||||
this.articleList = [];
|
||||
this.page = 1;
|
||||
this.loadend = false;
|
||||
this.loading = false;
|
||||
this.getArticleLists(name);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.searchGood .search .input {
|
||||
background-color: #f6f6f6 !important;
|
||||
}
|
||||
|
||||
.searchGood .search {
|
||||
padding-left: 35rpx !important;
|
||||
padding-right: 35rpx !important;
|
||||
}
|
||||
|
||||
.pink-dot {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background: rgba(255, 86, 74, 0.4);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
bottom: 0;
|
||||
right: -12rpx;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 36rpx;
|
||||
line-height: 36rpx;
|
||||
// color: #080F1A;
|
||||
color: #FFFFFF;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.eye-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.zan-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.zan-num-text {
|
||||
color: #080F1A;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.see-num-text {
|
||||
color: #080F1A;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.newsList .list .item .text .name {
|
||||
color: #080F1A !important;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.newsList .list .item .text {
|
||||
margin-right: 10rpx;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.newsList .list .item .pictrue {
|
||||
flex-shrink: 0;
|
||||
width: 288rpx !important;
|
||||
height: 216rpx !important;
|
||||
}
|
||||
|
||||
.newsList .list .item {
|
||||
background-color: #fff;
|
||||
flex-wrap: nowrap;
|
||||
padding: 35rpx !important;
|
||||
margin: 35rpx 30rpx !important;
|
||||
border-radius: 8rpx;
|
||||
|
||||
}
|
||||
|
||||
.summary {
|
||||
color: #C2C5CC;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 14*2rpx;
|
||||
margin-top: 10rpx;
|
||||
color: rgba(252, 85, 179, 0.7);
|
||||
}
|
||||
|
||||
.title .hot-title {
|
||||
font-size: 18*2rpx;
|
||||
color: #FF7900;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
margin-left: 5*2rpx;
|
||||
margin-right: 5*2rpx;
|
||||
}
|
||||
|
||||
.hotGoodsList {
|
||||
position: relative;
|
||||
margin: 20rpx 0 35rpx 0;
|
||||
background-color: transparent;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hotGoodsList .newProductsItem {
|
||||
margin-left: 35rpx;
|
||||
margin-top: 20rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.price-tag {
|
||||
position: absolute;
|
||||
width: 39*2rpx;
|
||||
height: 19*2rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.like-btn {
|
||||
position: absolute;
|
||||
width: 24*2rpx;
|
||||
height: 24*2rpx;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.inn-tag-wrap {
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.zanmost-tag {
|
||||
padding: 2rpx 8rpx 2rpx 8rpx;
|
||||
background: #FF2D69;
|
||||
font-size: 10*2rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.latest-tag {
|
||||
padding: 2rpx 8rpx 2rpx 8rpx;
|
||||
background: #0DC5C5;
|
||||
font-size: 10*2rpx;
|
||||
color: #FFFFFF;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.location-tag {
|
||||
padding: 2rpx 8rpx 2rpx 8rpx;
|
||||
background: #EBECF0;
|
||||
font-size: 10*2rpx;
|
||||
color: #333333;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.inn-shop-icon {
|
||||
border-radius: 50%;
|
||||
width: 24*2rpx;
|
||||
height: 24*2rpx;
|
||||
}
|
||||
|
||||
.inn-shop-name {
|
||||
font-size: 28rpx;
|
||||
color: #080F1A;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.inn-shop-date {
|
||||
font-size: 18rpx;
|
||||
color: #C2C5CC;
|
||||
}
|
||||
|
||||
.location {
|
||||
padding: 4rpx 16rpx;
|
||||
background: #EBECF0;
|
||||
color: #41454D;
|
||||
border-radius: 22rpx;
|
||||
}
|
||||
|
||||
.city-name {
|
||||
color: #41454D;
|
||||
font-size: 24rpx;
|
||||
margin-left: 4rpx;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
|
||||
.btLine {
|
||||
width: 100%;
|
||||
height: 12rpx;
|
||||
margin-top: -4rpx;
|
||||
background: #FD685D;
|
||||
}
|
||||
|
||||
.pro-info {
|
||||
font-size: 14*2rpx;
|
||||
|
||||
}
|
||||
|
||||
.top-tab {
|
||||
height: 104rpx;
|
||||
margin-left: 35rpx;
|
||||
margin-right: 35rpx;
|
||||
margin-top: 20rpx;
|
||||
// background: #E9E9E9;
|
||||
// border-radius:22rpx;
|
||||
}
|
||||
|
||||
.top-tab .tab {
|
||||
position: relative;
|
||||
// padding: 0 20rpx;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.top-tab .tab .tab-title {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
line-height: 84rpx;
|
||||
}
|
||||
|
||||
.top-tab .tab .tab-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 54rpx;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.top-tab .tab .tab-wrap {
|
||||
// background: linear-gradient(180deg, #56D4D4 0%, #0DC5C5 100%);
|
||||
// background: #F6F6F6;
|
||||
// box-shadow: 0px 6rpx 16rpx #91D5D5;
|
||||
opacity: 1;
|
||||
border-radius: 12rpx;
|
||||
padding: 10rpx;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,210 +0,0 @@
|
||||
<template>
|
||||
<view class="newsDetail">
|
||||
<view class="title">{{ articleInfo.title }}</view>
|
||||
<view class="list acea-row row-middle">
|
||||
<view class="label line1" style="color: #999;">来源:{{articleInfo.author||"未知"}}</view>
|
||||
<view class="item">
|
||||
<!-- <text class="iconfont icon-shenhezhong"></text> -->
|
||||
{{ articleInfo.addTime }}
|
||||
</view>
|
||||
<view class="item acea-row row-middle">
|
||||
<image :src="webUrl+'/20230304131559277594.png'" class="eye-icon" mode=""></image>
|
||||
<text class="see-num-text">{{articleInfo.visit||0}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="conter" v-html="articleInfo.content"></view>
|
||||
</view>
|
||||
</template>
|
||||
<style>
|
||||
.conter>>>img{
|
||||
display:block;
|
||||
max-width:100% !important;
|
||||
}
|
||||
page{
|
||||
background: #fff !important;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="less">
|
||||
|
||||
|
||||
.newsDetail .list .label{
|
||||
padding: 0;
|
||||
max-width: auto !important;
|
||||
}
|
||||
|
||||
.eye-icon{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.zan-icon{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.zan-num-text{
|
||||
color: #080F1A;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.see-num-text{
|
||||
color: #080F1A;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.newsDetail .title{
|
||||
font-size: 40rpx !important;
|
||||
font-weight: bold;
|
||||
color: #080F1A !important;
|
||||
}
|
||||
|
||||
|
||||
.newsDetail .picTxt {
|
||||
width: 6.9*100rpx;
|
||||
height: 2*100rpx;
|
||||
border-radius: 0.2*100rpx;
|
||||
border: 1px solid #e1e1e1;
|
||||
position: relative;
|
||||
margin: 0.3*100rpx auto 0 auto;
|
||||
}
|
||||
.newsDetail .picTxt .pictrue {
|
||||
width: 2*100rpx;
|
||||
height: 2*100rpx;
|
||||
}
|
||||
.newsDetail .picTxt .pictrue image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.2*100rpx 0 0 0.2*100rpx;
|
||||
display: block;
|
||||
}
|
||||
.newsDetail .picTxt .text {
|
||||
width: 4.6*100rpx;
|
||||
}
|
||||
.newsDetail .picTxt .text .name {
|
||||
font-size: 0.3*100rpx;
|
||||
color: #282828;
|
||||
}
|
||||
.newsDetail .picTxt .text .money {
|
||||
font-size: 0.24*100rpx;
|
||||
margin-top: 0.4*100rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.newsDetail .picTxt .text .money .num {
|
||||
font-size: 0.36*100rpx;
|
||||
}
|
||||
.newsDetail .picTxt .text .y_money {
|
||||
font-size: 0.26*100rpx;
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.newsDetail .picTxt .label {
|
||||
position: absolute;
|
||||
background-color: #303131;
|
||||
width: 1.6*100rpx;
|
||||
height: 0.5*100rpx;
|
||||
right: -0.07*100rpx;
|
||||
border-radius: 0.25*100rpx 0 0.06*100rpx 0.25*100rpx;
|
||||
text-align: center;
|
||||
line-height: 0.5*100rpx;
|
||||
bottom: 0.24*100rpx;
|
||||
}
|
||||
.newsDetail .picTxt .label .span {
|
||||
background-image: linear-gradient(to right, #fff71e 0%, #f9b513 100%);
|
||||
background-image: -webkit-linear-gradient(to right, #fff71e 0%, #f9b513 100%);
|
||||
background-image: -moz-linear-gradient(to right, #fff71e 0%, #f9b513 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.newsDetail .picTxt .label:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 0.08*100rpx solid #303131;
|
||||
border-right: 0.08*100rpx solid transparent;
|
||||
top: -0.08*100rpx;
|
||||
right: 0;
|
||||
}
|
||||
.newsDetail .bnt {
|
||||
color: #fff;
|
||||
font-size: 0.3*100rpx;
|
||||
width: 6.9*100rpx;
|
||||
height: 0.9*100rpx;
|
||||
border-radius: 0.45*100rpx;
|
||||
margin: 0.48*100rpx auto 0 auto;
|
||||
text-align: center;
|
||||
line-height: 0.9*100rpx;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import { getArticleDetails } from "@/api/public";
|
||||
export default {
|
||||
name: "FoodInfomationDetail",
|
||||
components: {},
|
||||
props: {},
|
||||
data: function() {
|
||||
return {
|
||||
articleInfo: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$yroute(to) {
|
||||
if (to.name === "NewsDetail") this.articleDetails();
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
this.articleDetails();
|
||||
},
|
||||
methods: {
|
||||
updateTitle() {
|
||||
// document.title = this.articleInfo.title || this.$yroute.meta.title;
|
||||
},
|
||||
articleDetails: function() {
|
||||
let that = this,
|
||||
id = this.$yroute.query.id;
|
||||
getArticleDetails(id).then(res => {
|
||||
var data = res.data;
|
||||
data.content = that.formatRichText(data.content);
|
||||
that.articleInfo = data;
|
||||
that.updateTitle();
|
||||
|
||||
console.log('current path:'+that.$yroute.path);
|
||||
|
||||
//动态配置share参数
|
||||
that.$set(that, "share", {
|
||||
title:that.articleInfo.title,
|
||||
path:'/pages/foodInfomation/foodInfomationDetail?id='+that.$yroute.query.id,
|
||||
imageUrl:'',
|
||||
desc:'',
|
||||
content:''
|
||||
});
|
||||
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 处理富文本里的图片宽度自适应
|
||||
* 1.去掉img标签里的style、width、height属性
|
||||
* 2.img标签添加style属性：max-width:100%;height:auto
|
||||
* 3.修改所有style里的width属性为max-width:100%
|
||||
* 4.去掉<br/>标签
|
||||
* @param html
|
||||
* @returns {void|string|*}
|
||||
*/
|
||||
formatRichText:function(html){
|
||||
let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
|
||||
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
|
||||
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
|
||||
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
|
||||
return match;
|
||||
});
|
||||
newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
|
||||
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
|
||||
return match;
|
||||
});
|
||||
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
|
||||
newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
|
||||
return newContent;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,163 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="search-box">
|
||||
<uni-search-bar placeholder="输入搜索关键词" @confirm="search" @clear="clearName"></uni-search-bar>
|
||||
</view>
|
||||
|
||||
<view class="list" v-if="list.length">
|
||||
<custom-waterfalls-flow :value="list" imageKey="imageInput">
|
||||
<view class="item" v-for="(item,index) in list" :key="index" slot="slot{{index}}" @click="goNewsDetail(item)">
|
||||
<image class="cover" :src="item.imageInput" mode="scaleToFill"></image>
|
||||
<view class="content">
|
||||
<view class="title more-t">{{item.title}}</view>
|
||||
<view class="mark more-t">{{item.synopsis}}</view>
|
||||
<view class="footer flex jc-between ai-center">
|
||||
<view class="visit flex ai-center">
|
||||
<image class="icon" :src="webUrl+'/20220609111928828152.png'" mode="scaleToFill"></image>
|
||||
{{item.visit}}
|
||||
</view>
|
||||
<view class="time">{{item.addTime.substring(0,10)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</custom-waterfalls-flow>
|
||||
</view>
|
||||
|
||||
<view class="v4-nodata" v-else>
|
||||
<image src="@/static/images/img_nodata.png" mode="scaleToFill" />
|
||||
<view class="text">暂无数据</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getArticleList
|
||||
} from "@/api/public";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
page: 1,
|
||||
limit: 8,
|
||||
keyword: "",
|
||||
list: [],
|
||||
isWait: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.fetchList();
|
||||
},
|
||||
onReachBottom() {
|
||||
this.page++;
|
||||
this.fetchList();
|
||||
},
|
||||
methods: {
|
||||
search(e) {
|
||||
this.keyword = e.value;
|
||||
this.page = 1;
|
||||
this.list = [];
|
||||
this.fetchList();
|
||||
},
|
||||
|
||||
clearName() {
|
||||
this.keyword = "";
|
||||
this.page = 1;
|
||||
this.list = [];
|
||||
this.fetchList();
|
||||
},
|
||||
|
||||
fetchList() {
|
||||
if (this.isWait) return;
|
||||
this.isWait = true;
|
||||
|
||||
let params = {
|
||||
keyword: this.keyword,
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
};
|
||||
|
||||
getArticleList(params).then(res => {
|
||||
if (res.status === 200) {
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
res.data[i].hide = true;
|
||||
this.list.push(res.data[i])
|
||||
}
|
||||
}
|
||||
this.isWait = false;
|
||||
});
|
||||
},
|
||||
|
||||
goNewsDetail(item) {
|
||||
this.$yrouter.push({
|
||||
path: "/pages/foodInfomation/foodInfomationDetail",
|
||||
query: {
|
||||
id: item.id
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.search-box {
|
||||
padding: 0 12rpx;
|
||||
background: #fff;
|
||||
|
||||
/deep/.uni-searchbar__box {
|
||||
border-radius: 44rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 28rpx 32rpx;
|
||||
|
||||
.item {
|
||||
border-radius: 4rpx;
|
||||
background: #fff;
|
||||
|
||||
.cover {
|
||||
width: 332rpx;
|
||||
height: 200rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 12rpx 16rpx 0;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
line-height: 38rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.mark {
|
||||
margin: 14rpx 16rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 12rpx 16rpx 16rpx;
|
||||
border-top: 1rpx solid #E1E1E1;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
vertical-align: middle;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.visit {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+10
-57
@@ -60,62 +60,17 @@
|
||||
<!-- 快捷跳转块v4 -->
|
||||
<view class="fast-nav x-start">
|
||||
<view class="item y-f" v-for="(item,index) in menus" :key="index" @click="$global.commonJump(item.uniapp_url)">
|
||||
<image :src="item.pic" mode="scaleToFill"></image>
|
||||
<image :src="item.pic"
|
||||
mode="scaleToFill"></image>
|
||||
<view class="one-t">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 快捷跳转块v4end -->
|
||||
|
||||
<!-- <view style="padding-bottom:20rpx;background: #fff;">-->
|
||||
<!-- 转盘-->
|
||||
<!-- <image class="home-luck" :src="`${webUrl}/20220519145845818243.png`" mode="scaleToFill" @click="goLuck"></image>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<!-- 伴手礼精品 -->
|
||||
<!-- <view class="wrapper hot" v-if="likeInfo.length > 0">-->
|
||||
<!-- <view class="title acea-row row-between row-middle">-->
|
||||
<!-- <view class="text acea-row row-left row-middle" style="">-->
|
||||
<!-- <image style="width: 288rpx;height: 46rpx;" :src="webUrl+'/20220521111639280569.png'" mode="scaleToFill">-->
|
||||
<!-- </image>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="sub-title" style="flex-wrap: nowrap;" @click="goMoreBoutiqueGift()">-->
|
||||
<!-- <image style="width: 68rpx;height: 34rpx;" :src="webUrl+'/20210609100740164364.png'" mode="scaleToFill">-->
|
||||
<!-- </image>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<!-- <view class="hotGoodsList">-->
|
||||
<!-- <ls-swiper @clickItem="clickItem()" :list="likeInfo" :slotsMode="true" imgKey="image" :interval="3000"-->
|
||||
<!-- :duration='4000' :dots='false' :crown="true" :loop="true" :shadow='true' :autoplay='false' height='200'-->
|
||||
<!-- :previousMargin="160" :nextMargin="160" imgRadius="5">-->
|
||||
<!-- <template v-slot="{data}">-->
|
||||
<!-- <view class="acea-row row-column my-swiper-item">-->
|
||||
<!-- <view class="acea-row row-middle" style="position: relative;">-->
|
||||
<!-- <image style="width: 420rpx;height: 260rpx;" :src="data.image" lazy-load mode="scaleToFill"></image>-->
|
||||
<!-- <image-->
|
||||
<!-- style="width: 168rpx;height: 44rpx;position: absolute;top: 0;left: 0;border-top-left-radius: 12rpx;z-index: 2;"-->
|
||||
<!-- src="http://admin-api.xdd618.com/file/pic/20220519145858134058.png" mode="scaleToFill"></image>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="acea-row row-column" style="padding: 10rpx;">-->
|
||||
<!-- <view class="ac" style="color: #333333;font-size: 24rpx;margin-bottom: 8rpx;">-->
|
||||
<!-- {{data.storeName}}-->
|
||||
<!-- </view>-->
|
||||
<!-- <view v-if="data.vipPrice && data.vipPrice > 0" class="money x-bc" style="color: #FF564A;">-->
|
||||
<!-- <text style="font-size: 26rpx;">￥{{data.vipPrice}}</text>-->
|
||||
<!-- <text class="btn-pay">立即抢购</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view v-else class="money x-bc" style="color: #FF564A;">-->
|
||||
<!-- <text style="font-size: 26rpx;">￥{{data.price}}</text>-->
|
||||
<!-- <text class="btn-pay">立即抢购</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </template>-->
|
||||
<!-- </ls-swiper>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<!-- </view>-->
|
||||
<!-- 伴手礼精品end -->
|
||||
<!-- 导航v9 -->
|
||||
<!-- <u-scroll-list style="background: pink">-->
|
||||
<!-- <view>aaa</view>-->
|
||||
<!-- </u-scroll-list>-->
|
||||
<!-- 导航v9end -->
|
||||
|
||||
<!-- v4 预售专区开始 -->
|
||||
<view class="pre-sale" v-if="preSaleList.length">
|
||||
@@ -312,7 +267,6 @@ import CouponWindow from '@/components/CouponWindow';
|
||||
import CountDown from "@/components/CountDown";
|
||||
import hxNavbar from "@/components/hx-navbar/hx-navbar.vue"
|
||||
import imgBox from '@/components/imageTypeSet/imagebox.vue'
|
||||
import LsSwiper from '@/components//ls-swiper/index.vue'
|
||||
|
||||
import {getCouponReceive, noticeDetail, noticeList} from "@/api/user";
|
||||
import {getHomeData, getShareImage} from '@/api/public';
|
||||
@@ -325,7 +279,6 @@ var that;
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
LsSwiper,
|
||||
imgBox,
|
||||
PromotionGood,
|
||||
CouponWindow,
|
||||
@@ -832,7 +785,7 @@ export default {
|
||||
uni.navigateTo({url: '/pkg_product/views/festival'})
|
||||
},
|
||||
tapOld() {
|
||||
this.isOldUser =false
|
||||
this.isOldUser = false
|
||||
const {type, text, jumpTime, pageLevel, url, params, couponId} = this.oldUserPopup
|
||||
if (couponId != null) {
|
||||
getCouponReceive(couponId).then(res => {
|
||||
@@ -846,9 +799,9 @@ export default {
|
||||
}
|
||||
}).catch((err) => {
|
||||
uni.showToast({
|
||||
title: err.data.msg+'',
|
||||
title: err.data.msg + '',
|
||||
icon: 'none',
|
||||
duration:3000
|
||||
duration: 3000
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
@@ -125,7 +125,7 @@
|
||||
|
||||
<view class="noCart" v-if="orderList.length === 0 && page > 1">
|
||||
<view class="pictrue">
|
||||
<image :src="webUrl+'/20210203155245713983.png'"/>
|
||||
<image :src="webUrl+'/20240102232734472795.png'"/>
|
||||
</view>
|
||||
</view>
|
||||
<Loading :loaded="loaded" :loading="loading"></Loading>
|
||||
@@ -453,15 +453,15 @@ page {
|
||||
}
|
||||
|
||||
.noCart .pictrue {
|
||||
width: 4 * 100rpx;
|
||||
height: 3 * 100rpx;
|
||||
width: 408rpx;
|
||||
height: 414rpx;
|
||||
overflow: hidden;
|
||||
margin: 0.7 * 100rpx auto 0.5 * 100rpx auto;
|
||||
}
|
||||
|
||||
.noCart .pictrue image {
|
||||
width: 4 * 100rpx;
|
||||
height: 3 * 100rpx;
|
||||
width: 408rpx;
|
||||
height: 414rpx;
|
||||
}
|
||||
|
||||
.statusTag {
|
||||
|
||||
@@ -269,6 +269,7 @@ export default {
|
||||
contactsTel: "",
|
||||
storeSelfMention: 0,
|
||||
cartid: "",
|
||||
lotteryRecordId:'',
|
||||
payPassword: null,
|
||||
// v9-2
|
||||
couponList: {},
|
||||
@@ -298,7 +299,6 @@ export default {
|
||||
//地址切换也要重新计算一下
|
||||
that.computedPrice('onLoad chooseAddress');
|
||||
})
|
||||
that.getCartInfo();
|
||||
console.log(that.$yroute);
|
||||
if (that.$yroute.query.pinkid !== undefined) {
|
||||
that.pinkId = that.$yroute.query.pinkid;
|
||||
@@ -307,6 +307,10 @@ export default {
|
||||
that.cartid = that.$yroute.query.id;
|
||||
console.log(that.cartid)
|
||||
}
|
||||
if (that.$yroute.query.lotteryRecordId !== undefined) {
|
||||
that.lotteryRecordId = that.$yroute.query.lotteryRecordId;
|
||||
}
|
||||
that.getCartInfo();
|
||||
},
|
||||
onUnload: function () {
|
||||
console.log('关闭监听选择收货地址');
|
||||
@@ -351,8 +355,8 @@ export default {
|
||||
},
|
||||
getCartInfo() {
|
||||
var that = this;
|
||||
const cartIds = this.$yroute.query.id;
|
||||
if (!cartIds) {
|
||||
// const cartIds = this.$yroute.query.id;
|
||||
if (!that.cartid && !that.lotteryRecordId) {
|
||||
uni.showToast({
|
||||
title: "参数有误",
|
||||
icon: "none",
|
||||
@@ -360,7 +364,7 @@ export default {
|
||||
});
|
||||
return this.$yrouter.back();
|
||||
}
|
||||
postOrderConfirm(cartIds)
|
||||
postOrderConfirm(that.cartid,that.lotteryRecordId)
|
||||
.then(res => {
|
||||
that.offlinePayStatus = res.data.offline_pay_status;
|
||||
that.orderGroupInfo = res.data;
|
||||
|
||||
@@ -429,11 +429,11 @@
|
||||
<text style="text-align: center;">购物车</text>
|
||||
</view>
|
||||
|
||||
<view style="position: relative;" class="item" @click="toHome">
|
||||
|
||||
<view class="iconfont icon-shouye-xianxing"></view>
|
||||
<view style="text-align: center;">首页</view>
|
||||
|
||||
<view class="item" @click="doneFavorite">
|
||||
<!-- <view class="iconfont icon-shouye-xianxing"></view>-->
|
||||
<image style="width: 40rpx;height: 40rpx" :src="webUrl+'/20240113230535491918.png'" mode="scaleToFill" v-if="isFavorite"/>
|
||||
<image style="width: 40rpx;height: 40rpx" :src="webUrl+'/20240122001533781400.png'" mode="scaleToFill" v-else/>
|
||||
<view style="text-align: center;">收藏</view>
|
||||
</view>
|
||||
|
||||
|
||||
@@ -447,7 +447,6 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <CouponPop v-on:changeFun="changeFun" :coupon="coupon"></CouponPop>-->
|
||||
<ProductWindow v-on:changeFun="changeFun" :attr="attr" :cartNum="cart_num"/>
|
||||
<StorePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus"
|
||||
:posterData="posterData" :goodId="id"></StorePoster>
|
||||
@@ -491,7 +490,7 @@ import {getCurAddress, getLocation, getUrlParam} from "@/utils/common.js";
|
||||
import cookie from "@/utils/store/cookie";
|
||||
import {famousGoodsShareImage, secKillGoodsShareImage} from "@/api/share";
|
||||
import CouponsPopup from "@/components/CouponsPopup.vue"
|
||||
import { formatContent } from '@/utils/util.js'
|
||||
import {addProduct, checkProduct, removeProduct} from "@/api/favorite";
|
||||
|
||||
export default {
|
||||
name: "GoodsCon",
|
||||
@@ -573,6 +572,8 @@ export default {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
// v9-2
|
||||
show: false,
|
||||
uniqueId: null,
|
||||
isFavorite: false
|
||||
};
|
||||
},
|
||||
computed: mapGetters(["isLogin", "location", "userInfo"]),
|
||||
@@ -669,6 +670,13 @@ export default {
|
||||
} else {
|
||||
this.productConClass = "product-con";
|
||||
}
|
||||
},
|
||||
attr: {
|
||||
deep: true,
|
||||
handler(newVal, oldVal) {
|
||||
this.uniqueId = newVal.productSelect.unique || null
|
||||
if (this.uniqueId) this.checkFavorite()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -886,11 +894,8 @@ export default {
|
||||
toggleProductInfo() {
|
||||
this.isProductInfoExpand = !this.isProductInfoExpand;
|
||||
},
|
||||
toHome() {
|
||||
this.$yrouter.switchTab("/pages/home/index");
|
||||
},
|
||||
goShoppingCart() {
|
||||
this.$yrouter.switchTab("/pages/shop/ShoppingCart/index");
|
||||
this.$yrouter.switchTab("/pages/cart");
|
||||
},
|
||||
goCustomerList() {
|
||||
this.$yrouter.push({
|
||||
@@ -963,10 +968,6 @@ export default {
|
||||
// /\<img/gi,
|
||||
// '<img style="display:block;max-width:100%;height:auto;"'
|
||||
// );
|
||||
if (res.data.storeInfo.description) {
|
||||
console.log(res.data.storeInfo.description)
|
||||
res.data.storeInfo.description = formatContent(res.data.storeInfo.description)
|
||||
}
|
||||
that.$set(that, "storeInfo", res.data.storeInfo);
|
||||
that.isWenwan = res.data.isWenwan;
|
||||
|
||||
@@ -1300,6 +1301,19 @@ export default {
|
||||
changeCoupons() {
|
||||
this.show = !this.show
|
||||
},
|
||||
async checkFavorite() {
|
||||
const res = await checkProduct(this.id, this.uniqueId)
|
||||
if (res.success) this.isFavorite = res.data.hasFavorite
|
||||
},
|
||||
async doneFavorite() {
|
||||
if (this.isFavorite) {
|
||||
const res = await removeProduct(this.id, this.uniqueId)
|
||||
if (res.success) this.isFavorite = false
|
||||
} else {
|
||||
const res = await addProduct(this.id, this.uniqueId)
|
||||
if (res.success) this.isFavorite = true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,701 +0,0 @@
|
||||
<template>
|
||||
<view class="shoppingCart">
|
||||
<hx-navbar
|
||||
title="购物车"
|
||||
:fixed="true"
|
||||
:back="false"
|
||||
:left-slot="true"
|
||||
:right-slot="true"
|
||||
color="#333333"
|
||||
statusBarFontColor="#ffffff"
|
||||
:background-color="[255,255,255]"
|
||||
>
|
||||
<block slot="left">
|
||||
<view style="padding-left: 30rpx;" class="top-delete-btn acea-row row-middle" @click="delgoods">
|
||||
<image class="delete-icon" :src="webUrl+'/20210806133058078099.png'" mode=""></image>
|
||||
</view>
|
||||
</block>
|
||||
</hx-navbar>
|
||||
<view v-if="false" class="nav acea-row row-between-wrapper" style="border-top: 1px solid #f5f5f5">
|
||||
<view>
|
||||
<text class="num" style="color: #666666;">共{{ count }}件商品</text>
|
||||
</view>
|
||||
<view class="top-delete-btn acea-row row-middle" @click="delgoods">
|
||||
<image class="delete-icon" :src="webUrl+'/20210806133058078099.png'" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view style="border-top: 1px solid #f5f5f5" v-if="$store.getters.token||userInfo.uid">
|
||||
|
||||
<view v-if="validList.length > 0 || cartList.invalid.length > 0">
|
||||
<view class="list">
|
||||
<view
|
||||
class="item acea-row row-between-wrapper"
|
||||
v-for="(item, cartListValidIndex) in validList"
|
||||
:key="cartListValidIndex"
|
||||
>
|
||||
<view class="select-btn">
|
||||
<view class="checkbox-wrapper">
|
||||
<checkbox-group @change="switchSelect(cartListValidIndex)">
|
||||
<label class="well-check">
|
||||
<checkbox :checked="item.checked" color="#fff"
|
||||
style="border-radius: 50%;transform:scale(0.7)"></checkbox>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="picTxt acea-row row-between">
|
||||
<view class="pictrue" @click="goGoodsCon(item)">
|
||||
<image :src="item.productInfo.attrInfo.image" v-if="item.productInfo.attrInfo.image"/>
|
||||
<image :src="item.productInfo.image" v-else/>
|
||||
</view>
|
||||
<view class="text acea-row row-column-between">
|
||||
<view class="line1">{{ item.productInfo.storeName }}</view>
|
||||
<view class="acea-row row-middle row-left">
|
||||
<!-- height: 38rpx; -->
|
||||
<view
|
||||
class="infor"
|
||||
style="background-color: #FFF3F2;border-radius: 19rpx;padding: 4rpx 20rpx;"
|
||||
v-if="item.productInfo.attrInfo"
|
||||
>规格：{{ item.productInfo.attrInfo.sku }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="money" style="color: #FF564A !important;">￥{{ force2Decimal(item.truePrice) }}</view>
|
||||
</view>
|
||||
<view class="carnum acea-row row-middle row-between">
|
||||
<view
|
||||
class="reduce"
|
||||
:class="validList[cartListValidIndex].cartNum <= 1 ? 'on' : ''"
|
||||
@click.prevent="reduce(cartListValidIndex)"
|
||||
></view>
|
||||
<view class="num">{{ item.cartNum }}</view>
|
||||
<view
|
||||
class="plus"
|
||||
v-if="validList[cartListValidIndex].attrInfo"
|
||||
:class="validList[cartListValidIndex].cartNum >= validList[cartListValidIndex].attrInfo.stock ? 'on' : ''"
|
||||
@click.prevent="plus(cartListValidIndex)"
|
||||
></view>
|
||||
<view
|
||||
class="plus"
|
||||
v-else
|
||||
:class="validList[cartListValidIndex].cartNum >= validList[cartListValidIndex].stock ? 'on' : ''"
|
||||
@click.prevent="plus(cartListValidIndex)"
|
||||
></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 失效商品开始 -->
|
||||
<view class="invalidGoods" v-if="cartList.invalid.length > 0">
|
||||
<view class="goodsNav acea-row row-between-wrapper">
|
||||
<view @click="goodsOpen">
|
||||
<text
|
||||
class="iconfont"
|
||||
:class="goodsHidden === true ? 'icon-xiangyou' : 'icon-xiangxia'"
|
||||
></text>
|
||||
失效商品
|
||||
</view>
|
||||
<view class="del" @click="delInvalidGoods">
|
||||
<text class="iconfont icon-shanchu1"></text>
|
||||
清空
|
||||
</view>
|
||||
</view>
|
||||
<view class="goodsList" :hidden="goodsHidden">
|
||||
<view
|
||||
v-for="(item, cartListinvalidIndex) in cartList.invalid"
|
||||
:key="cartListinvalidIndex"
|
||||
>
|
||||
<view
|
||||
@click="goGoodsCon(item)"
|
||||
class="item acea-row row-between-wrapper"
|
||||
v-if="item.productInfo"
|
||||
>
|
||||
<view class="invalid acea-row row-center-wrapper">失效</view>
|
||||
<view class="pictrue">
|
||||
<image :src="item.productInfo.attrInfo.image" v-if="item.productInfo.attrInfo"/>
|
||||
<image :src="item.productInfo.image" v-else/>
|
||||
</view>
|
||||
<view class="text acea-row row-column-between">
|
||||
<view class="line1">{{ item.productInfo.storeName }}</view>
|
||||
<view
|
||||
class="infor line1"
|
||||
v-if="item.productInfo.attrInfo"
|
||||
>属性：{{ item.productInfo.attrInfo.sku }}
|
||||
</view>
|
||||
<view class="acea-row row-between-wrapper">
|
||||
<view class="end">该商品已下架</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 失效商品结束 -->
|
||||
</view>
|
||||
<!--购物车暂无商品-->
|
||||
<view class="noCart" v-if="cartList.valid.length === 0 && cartList.invalid.length === 0">
|
||||
<view class="pictrue">
|
||||
<image :src="webUrl+'/20210203153734554332.png'"/>
|
||||
</view>
|
||||
<Recommend></Recommend>
|
||||
</view>
|
||||
<view style="height:210rpx"></view>
|
||||
<view class="footer" v-if="cartList.valid.length > 0">
|
||||
<view class="footer-content acea-row row-between-wrapper">
|
||||
<view class="acea-row row-middle row-between" style="flex: 1;flex-wrap: nowrap;">
|
||||
<view class="select-btn">
|
||||
<view class="checkbox-wrapper">
|
||||
<!-- <label class="well-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
name
|
||||
value
|
||||
:checked="isAllSelect && cartCount > 0"
|
||||
@click="allChecked"
|
||||
/>
|
||||
<i class="icon"></i>
|
||||
<text class="checkAll">全选 ({{ cartCount }})</text>
|
||||
</label>-->
|
||||
|
||||
<checkbox-group @change="allChecked">
|
||||
<label class="well-check">
|
||||
<checkbox style="transform:scale(0.7)" value="allSelect" :checked="isAllSelect && cartCount > 0"
|
||||
color="#fff"></checkbox>
|
||||
<text class="checkAll" style="color: #666666;">全选 ({{ cartCount }})</text>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="acea-row row-middle" style="margin-left: 20rpx">
|
||||
<text style="color: #000000;font-size: 28rpx;font-weight: bold;">合计:</text>
|
||||
<text style="color: #FF564A;font-size: 24rpx;">￥</text>
|
||||
<text class="" style="font-size: 32rpx;color: #FF564A;">{{ force2Decimal(countmoney) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="money acea-row row-middle" v-if="footerswitch === false"> -->
|
||||
<view class="money acea-row row-center row-middle" style="background: #FF564A;
|
||||
height: 100%;
|
||||
width: 198rpx;
|
||||
text-align: center;
|
||||
margin-right: -30rpx;flex-shrink: 0;margin-left: 10rpx;">
|
||||
<!-- <view class="vline"></view> -->
|
||||
<view class="placeOrder" @click="placeOrder">结算</view>
|
||||
</view>
|
||||
<!-- <view class="button acea-row row-middle" style="position: relative;" v-else>
|
||||
<view class="vline"></view>
|
||||
<view class="bnt cart-color" @click="collectAll">收藏</view>
|
||||
<view class="bnt" @click="delgoods">删除</view>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import Recommend from "@/components/Recommend";
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
import {changeCartNum, getCartCount, getCartList, postCartDel} from "@/api/store";
|
||||
import {postCollectAll} from "@/api/user";
|
||||
import {add, mul} from "@/utils/bc";
|
||||
import cookie from "@/utils/store/cookie";
|
||||
|
||||
const CHECKED_IDS = "cart_checked";
|
||||
var that;
|
||||
export default {
|
||||
name: "ShoppingCart",
|
||||
components: {
|
||||
Recommend
|
||||
},
|
||||
props: {},
|
||||
data: function () {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
cartList: {
|
||||
invalid: [],
|
||||
valid: []
|
||||
},
|
||||
bgImgHeight: '20px',
|
||||
validList: [],
|
||||
isAllSelect: false,
|
||||
cartCount: 0,
|
||||
countmoney: 0,
|
||||
goodsHidden: true,
|
||||
footerswitch: false,
|
||||
count: 0,
|
||||
checkedIds: [],
|
||||
loaded: false
|
||||
};
|
||||
},
|
||||
computed: mapGetters(["userInfo", "token"]),
|
||||
|
||||
// watch: {
|
||||
// $yroute(n) {
|
||||
// if (n.name === "ShoppingCart") {
|
||||
// this.carnum();
|
||||
// this.countMoney();
|
||||
// this.getCartList();
|
||||
// this.gainCount();
|
||||
// this.goodsHidden = true;
|
||||
// this.footerswitch = false;
|
||||
// }
|
||||
// },
|
||||
// cartList(list) {
|
||||
// this.validList = list.valid;
|
||||
// }
|
||||
// },
|
||||
watch: {
|
||||
userInfo(user) {
|
||||
if (user.uid) {
|
||||
this.carnum();
|
||||
this.countMoney();
|
||||
this.getCartList();
|
||||
this.gainCount();
|
||||
}
|
||||
},
|
||||
token(token) {
|
||||
if (this.userInfo.uid) {
|
||||
this.carnum();
|
||||
this.countMoney();
|
||||
this.getCartList();
|
||||
this.gainCount();
|
||||
}
|
||||
},
|
||||
cartList(list) {
|
||||
this.validList = list.valid;
|
||||
}
|
||||
},
|
||||
onShow: function () {
|
||||
this.carnum();
|
||||
this.countMoney();
|
||||
this.getCartList();
|
||||
this.gainCount();
|
||||
},
|
||||
onLoad: function () {
|
||||
that = this;
|
||||
uni.getSystemInfo({
|
||||
success: (e) => {
|
||||
// this.compareVersion(e.SDKVersion, '2.5.0')
|
||||
let statusBar = 0;
|
||||
let customBar = 0;
|
||||
|
||||
// #ifdef MP
|
||||
statusBar = e.statusBarHeight
|
||||
customBar = e.statusBarHeight + 45
|
||||
if (e.platform === 'android') {
|
||||
//this.$store.commit('SET_SYSTEM_IOSANDROID', false)
|
||||
customBar = e.statusBarHeight + 50
|
||||
}
|
||||
// #endif
|
||||
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
statusBar = e.statusBarHeight
|
||||
// @ts-ignore
|
||||
//uni.getMenuButtonBoundingClientRect();
|
||||
const custom = uni.getMenuButtonBoundingClientRect()
|
||||
customBar = custom.bottom + custom.top - e.statusBarHeight
|
||||
// #endif
|
||||
|
||||
|
||||
// #ifdef MP-ALIPAY
|
||||
statusBar = e.statusBarHeight
|
||||
customBar = e.statusBarHeight + e.titleBarHeight
|
||||
// #endif
|
||||
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
console.log('app-plus', e)
|
||||
statusBar = e.statusBarHeight
|
||||
customBar = e.statusBarHeight + 45
|
||||
// #endif
|
||||
|
||||
|
||||
// #ifdef H5
|
||||
statusBar = 0
|
||||
customBar = e.statusBarHeight + 45
|
||||
// #endif
|
||||
|
||||
// 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
|
||||
// this.$store.commit('SET_STATUS_BAR', statusBar)
|
||||
// this.$store.commit('SET_CUSTOM_BAR', customBar)
|
||||
// this.$store.commit('SET_SYSTEM_INFO', e)
|
||||
// //两列商品宽度
|
||||
// that.hotGoodsColumnWidth = (e.screenWidth - uni.upx2px(90))/2+'px';
|
||||
|
||||
//状态栏图片高度
|
||||
that.bgImgHeight = statusBar + 'px';
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
force2Decimal(v) {
|
||||
return this.$force2Decimal(v);
|
||||
},
|
||||
goGoodsCon(item) {
|
||||
this.$yrouter.push({
|
||||
path: "/pages/shop/GoodsCon/index",
|
||||
query: {
|
||||
id: item.productId
|
||||
}
|
||||
});
|
||||
},
|
||||
getCartList: function () {
|
||||
let that = this;
|
||||
getCartList().then(res => {
|
||||
that.cartList = res.data;
|
||||
let checkedIds = cookie.get(CHECKED_IDS) || [];
|
||||
if (!Array.isArray(checkedIds)) checkedIds = [];
|
||||
this.cartList.valid.forEach(cart => {
|
||||
if (checkedIds.indexOf(cart.id) !== -1) cart.checked = true;
|
||||
});
|
||||
if (checkedIds.length) {
|
||||
that.checkedIds = checkedIds;
|
||||
that.isAllSelect = checkedIds.length === this.cartList.valid.length;
|
||||
that.carnum();
|
||||
that.countMoney();
|
||||
}
|
||||
this.loaded = true;
|
||||
});
|
||||
},
|
||||
//删除商品；
|
||||
delgoods: function () {
|
||||
|
||||
let that = this,
|
||||
id = [],
|
||||
valid = [],
|
||||
list = that.cartList.valid;
|
||||
list.forEach(function (val) {
|
||||
if (val.checked === true) {
|
||||
id.push(val.id);
|
||||
}
|
||||
});
|
||||
if (id.length === 0) {
|
||||
uni.showToast({
|
||||
title: "请选择产品",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showModal({
|
||||
title: '确认删除已选商品?',
|
||||
content: '',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '确认',
|
||||
success: res => {
|
||||
uni.showLoading();
|
||||
postCartDel(id).then(function () {
|
||||
list.forEach(function (val, i) {
|
||||
if (val.checked === false || val.checked === undefined)
|
||||
valid.push(list[i]);
|
||||
});
|
||||
that.$set(that.cartList, "valid", valid);
|
||||
that.carnum();
|
||||
that.countMoney();
|
||||
that.gainCount();
|
||||
that.getCartList();
|
||||
}).finally(() => {
|
||||
uni.hideLoading();
|
||||
});
|
||||
|
||||
},
|
||||
fail: () => {
|
||||
},
|
||||
complete: () => {
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
// //获取数量
|
||||
gainCount: function () {
|
||||
let that = this;
|
||||
getCartCount().then(res => {
|
||||
that.count = res.data.count;
|
||||
});
|
||||
},
|
||||
//清除失效产品；
|
||||
delInvalidGoods: function () {
|
||||
let that = this,
|
||||
id = [],
|
||||
list = that.cartList.invalid;
|
||||
list.forEach(function (val) {
|
||||
id.push(val.id);
|
||||
});
|
||||
postCartDel(id).then(function () {
|
||||
list.splice(0, list.length);
|
||||
that.gainCount();
|
||||
that.getCartList();
|
||||
});
|
||||
},
|
||||
//批量收藏;
|
||||
collectAll: function () {
|
||||
let that = this,
|
||||
data = {
|
||||
id: [],
|
||||
category: ""
|
||||
},
|
||||
list = that.cartList.valid;
|
||||
list.forEach(function (val) {
|
||||
if (val.checked === true) {
|
||||
data.id.push(val.product_id);
|
||||
data.category = val.type;
|
||||
}
|
||||
});
|
||||
if (data.id.length === 0) {
|
||||
uni.showToast({
|
||||
title: "请选择产品",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
postCollectAll(data).then(function () {
|
||||
uni.showToast({
|
||||
title: "收藏成功!",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
});
|
||||
},
|
||||
//立即下单；
|
||||
placeOrder: function () {
|
||||
let that = this,
|
||||
list = that.cartList.valid,
|
||||
id = [];
|
||||
list.forEach(function (val) {
|
||||
if (val.checked === true) {
|
||||
id.push(val.id);
|
||||
}
|
||||
});
|
||||
if (id.length === 0) {
|
||||
uni.showToast({
|
||||
title: "请选择产品",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$yrouter.push({
|
||||
path: "/pages/order/OrderSubmission/index",
|
||||
query: {
|
||||
id: id.join(",")
|
||||
}
|
||||
});
|
||||
},
|
||||
manage: function () {
|
||||
let that = this;
|
||||
that.footerswitch = !that.footerswitch;
|
||||
},
|
||||
goodsOpen: function () {
|
||||
let that = this;
|
||||
that.goodsHidden = !that.goodsHidden;
|
||||
},
|
||||
//加
|
||||
plus: function (index) {
|
||||
let that = this;
|
||||
let list = that.cartList.valid[index];
|
||||
if (list.cartNum + 1 > list.trueStock) {
|
||||
uni.showToast({
|
||||
title: '该商品库存不足，无法继续增加',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
list.cartNum++;
|
||||
if (list.attrInfo) {
|
||||
if (list.cartNum >= list.attrInfo.stock) {
|
||||
that.$set(list, "cart_num", list.attrInfo.stock);
|
||||
}
|
||||
} else {
|
||||
if (list.cartNum >= list.stock) {
|
||||
that.$set(list, "cart_num", list.stock);
|
||||
}
|
||||
}
|
||||
that.carnum();
|
||||
that.countMoney();
|
||||
that.syncCartNum(list);
|
||||
},
|
||||
//减
|
||||
reduce: function (index) {
|
||||
let that = this;
|
||||
let list = that.cartList.valid[index];
|
||||
if (list.cartNum <= 1) {
|
||||
uni.showToast({
|
||||
title: "不能再少了!",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
list.cartNum--;
|
||||
if (list.cartNum < 1) {
|
||||
that.$set(list, "cart_num", 1);
|
||||
}
|
||||
that.carnum();
|
||||
that.countMoney();
|
||||
that.syncCartNum(list);
|
||||
},
|
||||
syncCartNum(cart) {
|
||||
if (!cart.sync) {
|
||||
changeCartNum(cart.id, Math.max(cart.cartNum, 1) || 1)
|
||||
.then(res => {
|
||||
this.getCartList();
|
||||
this.gainCount();
|
||||
})
|
||||
.catch(error => {
|
||||
this.gainCount();
|
||||
uni.showToast({
|
||||
title: error.response.data.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
//单选
|
||||
switchSelect: function (index) {
|
||||
let that = this,
|
||||
cart = that.cartList.valid[index],
|
||||
i = this.checkedIds.indexOf(cart.id);
|
||||
cart.checked = !cart.checked;
|
||||
|
||||
if (i !== -1) this.checkedIds.splice(i, 1);
|
||||
if (cart.checked) {
|
||||
this.checkedIds.push(cart.id);
|
||||
}
|
||||
let len = that.cartList.valid.length;
|
||||
let selectnum = [];
|
||||
for (let i = 0; i < len; i++) {
|
||||
if (that.cartList.valid[i].checked === true) {
|
||||
selectnum.push(true);
|
||||
}
|
||||
}
|
||||
that.isAllSelect = selectnum.length === len;
|
||||
that.$set(that, "cartList", that.cartList);
|
||||
that.$set(that, "isAllSelect", that.isAllSelect);
|
||||
cookie.set(CHECKED_IDS, that.checkedIds);
|
||||
that.carnum();
|
||||
that.gainCount();
|
||||
that.countMoney();
|
||||
},
|
||||
//全选
|
||||
allChecked: function (e) {
|
||||
console.log(e);
|
||||
let that = this;
|
||||
let selectAllStatus = e.mp.detail.value[0] == "allSelect" ? true : false;
|
||||
console.log(selectAllStatus);
|
||||
// let selectAllStatus = that.isAllSelect;
|
||||
let checkedIds = [];
|
||||
// for (let i = 0; i < array.length; i++) {
|
||||
// array[i].checked = selectAllStatus;
|
||||
// checked.push()
|
||||
// }
|
||||
that.cartList.valid.forEach(cart => {
|
||||
cart.checked = selectAllStatus;
|
||||
if (selectAllStatus) {
|
||||
checkedIds.push(cart.id);
|
||||
}
|
||||
});
|
||||
let cartList = {
|
||||
...that.cartList
|
||||
};
|
||||
that.cartList = [];
|
||||
that.cartList = cartList;
|
||||
console.log(this.cartList);
|
||||
this.$set(this, "cartList", this.cartList);
|
||||
this.$set(this, "isAllSelect", selectAllStatus);
|
||||
this.checkedIds = checkedIds;
|
||||
cookie.set(CHECKED_IDS, checkedIds);
|
||||
that.carnum();
|
||||
that.countMoney();
|
||||
this.$forceUpdate();
|
||||
},
|
||||
//数量
|
||||
carnum: function () {
|
||||
let that = this;
|
||||
var carnum = 0;
|
||||
var array = that.cartList.valid;
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
if (array[i].checked === true) {
|
||||
carnum += parseInt(array[i].cartNum);
|
||||
}
|
||||
}
|
||||
that.$set(that, "cartCount", carnum);
|
||||
},
|
||||
//总共价钱；
|
||||
countMoney: function () {
|
||||
let that = this;
|
||||
let carmoney = 0;
|
||||
let array = that.cartList.valid;
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
if (array[i].checked === true) {
|
||||
carmoney = add(carmoney, mul(array[i].cartNum, array[i].truePrice));
|
||||
}
|
||||
}
|
||||
that.countmoney = carmoney;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.plus {
|
||||
background-image: url("~@/static/images/num_plus_icon.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border: none !important;
|
||||
width: 38rpx !important;
|
||||
height: 38rpx !important;
|
||||
}
|
||||
|
||||
.reduce {
|
||||
background-image: url("~@/static/images/num_minus_icon.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border: none !important;
|
||||
width: 38rpx !important;
|
||||
height: 38rpx !important;
|
||||
}
|
||||
|
||||
.shoppingCart .list .item .picTxt .text .money {
|
||||
color: #feb655 !important;
|
||||
}
|
||||
|
||||
.vline {
|
||||
width: 0px;
|
||||
height: 36rpx;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.6);
|
||||
margin: 26rpx 30rpx 26rpx 0;
|
||||
|
||||
}
|
||||
|
||||
.top-delete-btn {
|
||||
padding: 10rpx;
|
||||
//background:rgba(255,187,225,0.4);
|
||||
//border-radius:12rpx;
|
||||
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
.shoppingCart .footer-content {
|
||||
background: #fff !important;
|
||||
border-radius: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.shoppingCart .footer {
|
||||
height: auto !important;
|
||||
}
|
||||
</style>
|
||||
@@ -45,7 +45,10 @@ export default {
|
||||
noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
|
||||
auto:true,
|
||||
empty:{
|
||||
tip: '暂无消息' // 提示
|
||||
tip: '', // 提示
|
||||
icon:this.$VUE_APP_RESOURCES_URL+'/20240102232728574017.png',
|
||||
width:500,
|
||||
height:500
|
||||
// btnText:'点击刷新'
|
||||
}
|
||||
},
|
||||
|
||||
+115
-103
@@ -16,76 +16,78 @@
|
||||
|
||||
<view class="header acea-row row-column"
|
||||
style="flex-wrap: nowrap;background: #fff !important;margin: 0 30rpx;border-radius: 16rpx;box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.1);">
|
||||
<view v-if="userInfo.hotel != null && userInfo.hotel.checkState=='C1'"
|
||||
class="innTag acea-row row-middle row-center align-left" @click="innTagClick">
|
||||
<image style="width: 36rpx;height: 36rpx;" :src="webUrl+'/20230304133702462853.png'" mode=""></image>
|
||||
<view class="innTag acea-row row-middle row-center align-left" @click="innTagClick" v-if="userInfo.hotel != null && userInfo.hotel.checkState=='C1'">
|
||||
<image style="width: 36rpx;height: 36rpx;" :src="webUrl+'/20240107224552660125.png'" mode=""></image>
|
||||
<text style="font-size: 24rpx;color: #ffffff;">店铺主页</text>
|
||||
</view>
|
||||
<view class="acea-row row-between-wrapper"
|
||||
style="margin-top: 40rpx;background: #0DC5C5 !important;border-top-left-radius: 16rpx;border-top-right-radius: 16rpx;padding: 30rpx;">
|
||||
<view class="picTxt acea-row" style="flex-wrap: nowrap;flex: 1;">
|
||||
<view class="pictrue">
|
||||
<image :src="userInfo.avatar"/>
|
||||
</view>
|
||||
<view class="text acea-row row-column-between">
|
||||
<view class="acea-row row-middle">
|
||||
<view class="name line1"
|
||||
style="color: #000000 !important;font-size: 28rpx !important;font-weight: 500;">
|
||||
{{ userInfo.nickname }}
|
||||
</view>
|
||||
<view class="member acea-row row-middle" v-if="userInfo.vip">
|
||||
<image :src="userInfo.vipIcon"/>
|
||||
<text>{{ userInfo.vipName }}</text>
|
||||
</view>
|
||||
<!-- background: #0DC5C5 !important;border-top-left-radius: 16rpx;border-top-right-radius: 16rpx;-->
|
||||
<view class="center-box" :style="{'backgroundImage':`url(${webUrl}/20240111201405837746.png)`}">
|
||||
<view class="flex jc-between"
|
||||
style="padding: 30rpx;">
|
||||
<view class="picTxt acea-row" style="flex-wrap: nowrap;flex: 1;">
|
||||
<view class="pictrue">
|
||||
<image :src="userInfo.avatar"/>
|
||||
</view>
|
||||
|
||||
<view class="acea-row row-middle" style="margin-top: 8rpx;">
|
||||
<view class="vip-box acea-row row-center row-middle">
|
||||
|
||||
<text class="vip-title">{{ userInfo.levelName }}</text>
|
||||
|
||||
<view class="text acea-row row-column-between">
|
||||
<view class="acea-row row-middle">
|
||||
<view class="name line1"
|
||||
style="color: #000000 !important;font-size: 28rpx !important;font-weight: 500;">
|
||||
{{ userInfo.nickname }}
|
||||
</view>
|
||||
<view class="member acea-row row-middle" v-if="userInfo.vip">
|
||||
<image :src="userInfo.vipIcon"/>
|
||||
<text>{{ userInfo.vipName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="userLevelInfo && userLevelInfo.idcardOne && userLevelInfo.checkState!=3"
|
||||
class="protocol-state-box">
|
||||
{{ protocolCheckState(userLevelInfo.checkState) }}
|
||||
|
||||
<view class="acea-row row-middle" style="margin-top: 8rpx;">
|
||||
<view class="vip-box btn-change acea-row row-center row-middle">
|
||||
|
||||
<text class="vip-title">{{ userInfo.levelName }}</text>
|
||||
|
||||
</view>
|
||||
<view v-if="userLevelInfo && userLevelInfo.idcardOne && userLevelInfo.checkState!=3"
|
||||
class="protocol-state-box">
|
||||
{{ protocolCheckState(userLevelInfo.checkState) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="acea-row row-column row-middle" style="flex-shrink: 0;">
|
||||
<view class="promotion-code-box acea-row row-center row-middle" @click="goPromotionPoster()">
|
||||
<image style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20210819110607117638.png'" mode=""></image>
|
||||
<view class="promotion-code-box flex jc-center ai-center" @click="goPromotionPoster()">
|
||||
<image style="width: 24rpx;height: 24rpx;" :src="webUrl+'/20240111201400020095.png'" mode=""></image>
|
||||
会员码
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="acea-row row-middle row-around"
|
||||
style="padding:0 30rpx 30rpx 30rpx;margin-bottom: 20rpx;background: #0DC5C5 !important;border-bottom-left-radius: 16rpx;border-bottom-right-radius: 16rpx">
|
||||
<view class="acea-row row-middle" @click="goBindParent()">
|
||||
<image style="width: 48rpx;height: 48rpx;margin-right: 10rpx;" :src="webUrl+'/20210515195227226132.png'"
|
||||
mode=""></image>
|
||||
<text style="font-size: 24rpx;color: #fff;">扫一扫</text>
|
||||
</view>
|
||||
<view class="vline"></view>
|
||||
<view class="acea-row row-middle" @click="goLikeList()">
|
||||
<image style="width: 48rpx;height: 48rpx;margin-right: 10rpx;" :src="webUrl+'/20230304134637330341.png'"
|
||||
mode=""></image>
|
||||
<text style="font-size: 24rpx;color: #fff;">收藏</text>
|
||||
</view>
|
||||
<view class="vline"></view>
|
||||
<view class="acea-row row-middle" style="position: relative;" @click="goMessageData()">
|
||||
<image style="width: 48rpx;height: 48rpx;margin-right: 10rpx;" :src="webUrl+'/20230304135730954990.png'"
|
||||
mode=""></image>
|
||||
<text style="font-size: 24rpx;color: #fff;">消息</text>
|
||||
<view v-if="unreadMsgList.length>0" class="unread-dot"></view>
|
||||
</view>
|
||||
<view class="vline"></view>
|
||||
<view class="acea-row row-middle" @click="goPersonalData()">
|
||||
<image style="width: 48rpx;height: 48rpx;margin-right: 10rpx;" :src="webUrl+'/20230304203605140668.png'"
|
||||
mode=""></image>
|
||||
<text style="font-size: 24rpx;color: #fff;">设置</text>
|
||||
<view class="acea-row row-middle row-around" style="margin-bottom: 20rpx;
|
||||
padding: 0 30rpx 30rpx 30rpx;">
|
||||
<view class="acea-row row-middle" @click="goBindParent()">
|
||||
<image style="width: 48rpx;height: 48rpx;margin-right: 10rpx;" :src="webUrl+'/20240107224558355949.png'"
|
||||
mode=""></image>
|
||||
<text style="font-size: 24rpx;color: #fff;">扫一扫</text>
|
||||
</view>
|
||||
<view class="vline"></view>
|
||||
<view class="acea-row row-middle" @click="goLikeList()">
|
||||
<image style="width: 48rpx;height: 48rpx;margin-right: 10rpx;" :src="webUrl+'/20240107224606011625.png'"
|
||||
mode=""></image>
|
||||
<text style="font-size: 24rpx;color: #fff;">收藏</text>
|
||||
</view>
|
||||
<view class="vline"></view>
|
||||
<view class="acea-row row-middle" style="position: relative;" @click="goMessageData()">
|
||||
<image style="width: 48rpx;height: 48rpx;margin-right: 10rpx;" :src="webUrl+'/20240107224620893707.png'"
|
||||
mode=""></image>
|
||||
<text style="font-size: 24rpx;color: #fff;">消息</text>
|
||||
<view v-if="unreadMsgList.length>0" class="unread-dot"></view>
|
||||
</view>
|
||||
<view class="vline"></view>
|
||||
<view class="acea-row row-middle" @click="goPersonalData()">
|
||||
<image style="width: 48rpx;height: 48rpx;margin-right: 10rpx;" :src="webUrl+'/20240107224612250643.png'"
|
||||
mode=""></image>
|
||||
<text style="font-size: 24rpx;color: #fff;">设置</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="acea-row row-column" style="border-bottom-left-radius: 16rpx;border-bottom-right-radius: 16rpx;">
|
||||
@@ -94,12 +96,12 @@
|
||||
<text style="font-size: 26rpx;color: #333333;font-weight: 400;">我的账户</text>
|
||||
</view>
|
||||
|
||||
<view class="nav acea-row row-column" style="padding: 25rpx;">
|
||||
<view class="nav acea-row row-column" style="padding:24rpx 12rpx">
|
||||
<view class="acea-row row-middle row-between"
|
||||
style="padding-bottom: 30rpx;margin-bottom: 20rpx;border-bottom: 1px solid #f6f6f6;">
|
||||
<view @click="goUserAccount()" class="acea-row row-middle" style="flex-grow: 1;">
|
||||
<view class="acea-row row-middle" style="margin-right: 20rpx;">
|
||||
<image style="width: 40rpx;height: 40rpx;" :src="webUrl+'/20210807160248159814.png'" mode=""></image>
|
||||
<image style="width: 56rpx;height: 56rpx" :src="webUrl+'/20240107224629408613.png'" mode=""></image>
|
||||
</view>
|
||||
<view class="acea-row row-column">
|
||||
<text style="color: #999999;font-size: 20rpx;font-weight: 400;">余额</text>
|
||||
@@ -110,7 +112,7 @@
|
||||
</view>
|
||||
|
||||
<view class="acea-row row-middle" style="color: #fff;font-size: 24rpx;flex-shrink: 0;">
|
||||
<view @click="goWithdrawl()" class="withdrawBtn" style="margin-right: 10rpx;">提现</view>
|
||||
<view @click="goWithdrawl()" class="withdrawBtn btn-change" style="margin-right: 10rpx;">提现</view>
|
||||
<view @click="goAccountDetail()" class="accountDetailBtn">账户明细</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -119,7 +121,7 @@
|
||||
<view class="acea-row row-middle">
|
||||
|
||||
<view class="acea-row row-middle" style="margin-right: 20rpx;">
|
||||
<image style="width: 40rpx;height: 40rpx;" :src="webUrl+'/20210807160409159991.png'" mode=""></image>
|
||||
<image style="width: 56rpx;height: 56rpx;" :src="webUrl+'/20240107224636733995.png'" mode=""></image>
|
||||
</view>
|
||||
<view class="acea-row row-column">
|
||||
<text style="color: #999999;font-size: 20rpx;font-weight: 400;">恭喜你成为了{{ userInfo.levelName }}
|
||||
@@ -153,7 +155,7 @@
|
||||
<view class="orderState acea-row row-middle">
|
||||
<view @click="goMyOrder(1)" class="item">
|
||||
<view class="pictrue">
|
||||
<image :src="webUrl+'/20230526120059732570.png'"/>
|
||||
<image style="width:52rpx;height: 52rpx" :src="webUrl+'/20240107224703391856.png'"/>
|
||||
<text
|
||||
class="order-status-num"
|
||||
v-if="orderStatusNum.unpaidCount > 0"
|
||||
@@ -164,7 +166,7 @@
|
||||
</view>
|
||||
<view @click="goMyOrder(2)" class="item">
|
||||
<view class="pictrue">
|
||||
<image :src="webUrl+'/20230526120053924703.png'"/>
|
||||
<image style="width:52rpx;height: 52rpx" :src="webUrl+'/20240107224656826240.png'"/>
|
||||
<text
|
||||
class="order-status-num"
|
||||
v-if="orderStatusNum.unshippedCount > 0"
|
||||
@@ -175,7 +177,7 @@
|
||||
</view>
|
||||
<view @click="goMyOrder(3)" class="item">
|
||||
<view class="pictrue">
|
||||
<image :src="webUrl+'/20230526120107983364.png'"/>
|
||||
<image style="width:52rpx;height: 52rpx" :src="webUrl+'/20240107224650489311.png'"/>
|
||||
<text
|
||||
class="order-status-num"
|
||||
v-if="orderStatusNum.receivedCount > 0"
|
||||
@@ -186,7 +188,7 @@
|
||||
</view>
|
||||
<view @click="goMyOrder(4)" class="item">
|
||||
<view class="pictrue">
|
||||
<image :src="webUrl+'/20230526114414134581.png'"/>
|
||||
<image style="width:52rpx;height: 52rpx" :src="webUrl+'/20240109234147411394.png'"/>
|
||||
<text
|
||||
class="order-status-num"
|
||||
v-if="orderStatusNum.evaluatedCount > 0"
|
||||
@@ -197,7 +199,7 @@
|
||||
</view>
|
||||
<view @click="goReturnList()" class="item">
|
||||
<view class="pictrue">
|
||||
<image :src="webUrl+'/20230304203355905710.png'"/>
|
||||
<image style="width:52rpx;height: 52rpx" :src="webUrl+'/20240107224643038018.png'"/>
|
||||
<text
|
||||
class="order-status-num"
|
||||
v-if="orderStatusNum.refundCount > 0"
|
||||
@@ -250,25 +252,25 @@
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</view>
|
||||
|
||||
<view v-if="userInfo.hotel==null || userInfo.hotel.checkState!='C1'" class="item" @click="goInnApply()">
|
||||
<view class="pictrue">
|
||||
<image :src="webUrl+'/20221010170138874734.png'"/>
|
||||
</view>
|
||||
<view class="cell acea-row row-between row-middle" style="flex-wrap: nowrap;">
|
||||
<view class="" style="flex-shrink: 0;margin-right: 10rpx;">申请我的店铺</view>
|
||||
<view v-if="userInfo.hotel!=null" class="acea-row row-column row-right" style="text-align: right;">
|
||||
<view class="" style="font-size: 24rpx;color: #0DC5C5;">
|
||||
{{ checkStateStr(userInfo.hotel.checkState) }}
|
||||
</view>
|
||||
<!-- <view v-if="userInfo.hotel==null || userInfo.hotel.checkState!='C1'" class="item" @click="goInnApply()">-->
|
||||
<!-- <view class="pictrue">-->
|
||||
<!-- <image :src="webUrl+'/20221010170138874734.png'"/>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="cell acea-row row-between row-middle" style="flex-wrap: nowrap;">-->
|
||||
<!-- <view class="" style="flex-shrink: 0;margin-right: 10rpx;">申请我的店铺</view>-->
|
||||
<!-- <view v-if="userInfo.hotel!=null" class="acea-row row-column row-right" style="text-align: right;">-->
|
||||
<!-- <view class="" style="font-size: 24rpx;color: #0DC5C5;">-->
|
||||
<!-- {{ checkStateStr(userInfo.hotel.checkState) }}-->
|
||||
<!-- </view>-->
|
||||
|
||||
<block v-if="userInfo.hotel.checkState=='C2' && userInfo.hotel.checkMsg.length>0">
|
||||
<text style="font-size: 24rpx;color: #aaa;">驳回原因:{{ userInfo.hotel.checkMsg }}</text>
|
||||
</block>
|
||||
</view>
|
||||
<!-- <block v-if="userInfo.hotel.checkState=='C2' && userInfo.hotel.checkMsg.length>0">-->
|
||||
<!-- <text style="font-size: 24rpx;color: #aaa;">驳回原因:{{ userInfo.hotel.checkMsg }}</text>-->
|
||||
<!-- </block>-->
|
||||
<!-- </view>-->
|
||||
|
||||
</view>
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</view>
|
||||
<!-- </view>-->
|
||||
<!-- <text class="iconfont icon-jiantou"></text>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<view v-if="userInfo.hotel != null && userInfo.hotel.checkState=='C1'" class="item"
|
||||
@click="goInnInfoEdit()">
|
||||
@@ -310,6 +312,7 @@
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters, mapMutations} from "vuex";
|
||||
import {
|
||||
@@ -655,8 +658,11 @@ export default {
|
||||
this.$yrouter.push("/pkg_user/views/personalData");
|
||||
},
|
||||
goLikeList() {
|
||||
uni.navigateTo({
|
||||
url:'/pkg_user/views/myFavorite'
|
||||
})
|
||||
//跳转到我的喜欢列表
|
||||
this.$yrouter.push("/pages/user/UserFavorite/UserFavorite");
|
||||
// this.$yrouter.push("/pages/user/UserFavorite/UserFavorite");
|
||||
},
|
||||
getPhoneNumber: function (e) {
|
||||
let thit = this;
|
||||
@@ -857,10 +863,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
page {
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.user .header .picTxt .pictrue {
|
||||
width: 76rpx !important;
|
||||
height: 76rpx !important;
|
||||
@@ -875,7 +877,7 @@ page {
|
||||
width: 196rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 0px 32rpx 32rpx 0px;
|
||||
background: #0DC5C5;
|
||||
background: #C51919;
|
||||
}
|
||||
|
||||
.order-status-num {
|
||||
@@ -916,17 +918,23 @@ page {
|
||||
}
|
||||
|
||||
.promotion-code-box {
|
||||
position: relative;
|
||||
padding: 8rpx 8rpx 16rpx 8rpx;
|
||||
box-sizing: border-box;
|
||||
width: 120rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #9C1C1A;
|
||||
color: #FFFFFF;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.user .header .picTxt .text {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.btn-change {
|
||||
background: linear-gradient(180deg, #F8F3B4 0%, #F2CB6F 100%);
|
||||
}
|
||||
|
||||
.vip-box {
|
||||
background: linear-gradient(to right, #FFECC2, #E8CE87);
|
||||
border-radius: 8rpx;
|
||||
padding: 4rpx 8rpx;
|
||||
margin-right: 20rpx;
|
||||
@@ -990,11 +998,6 @@ page {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
// background-color: #FFF;
|
||||
margin: 0 30rpx;
|
||||
@@ -1057,8 +1060,7 @@ page {
|
||||
}
|
||||
|
||||
.withdrawBtn {
|
||||
background: #593D13;
|
||||
color: #fff;
|
||||
color: #482D00;
|
||||
font-size: 24rpx;
|
||||
width: 132rpx;
|
||||
height: 48rpx;
|
||||
@@ -1068,7 +1070,7 @@ page {
|
||||
}
|
||||
|
||||
.accountDetailBtn {
|
||||
background: #FF564A;
|
||||
background: #C51718;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
width: 132rpx;
|
||||
@@ -1079,7 +1081,7 @@ page {
|
||||
}
|
||||
|
||||
.benifitIntroBtn {
|
||||
background: #0DC5C5;
|
||||
background: #C51718;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
width: 132rpx;
|
||||
@@ -1089,4 +1091,14 @@ page {
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.center-box {
|
||||
width: 632rpx;
|
||||
height: 218rpx;
|
||||
margin-top: 40rpx;
|
||||
background-size: 632rpx 218rpx;
|
||||
background-repeat: no-repeat;
|
||||
//background: #0DC5C5 !important;
|
||||
//border-bottom-left-radius: 16rpx;
|
||||
//border-bottom-right-radius: 16rpx
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -50,9 +50,9 @@
|
||||
</view>
|
||||
</view>
|
||||
<Loading :loaded="loadend" :loading="loading"></Loading>
|
||||
<view class="noCommodity" v-if="addressList.length < 1 && page > 1">
|
||||
<view class="noCommodity flex jc-center" v-if="addressList.length < 1 && page > 1">
|
||||
<view class="noPictrue">
|
||||
<image :src="webUrl+'/20210203154438492268.png'" class="image"/>
|
||||
<image :src="webUrl+'/20240102232705995178.png'" class="image"/>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height:100rpx;"></view>
|
||||
|
||||
@@ -1,107 +0,0 @@
|
||||
<template>
|
||||
<view ref="container">
|
||||
<div class="coupon-list" v-if="couponsList.length > 0">
|
||||
<div
|
||||
class="item acea-row row-center-wrapper"
|
||||
v-for="(item, index) in couponsList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="money" :class="item.isUse ? 'moneyGray' : ''">
|
||||
<div>
|
||||
￥
|
||||
<span class="num">{{ item.couponPrice }}</span>
|
||||
</div>
|
||||
<div class="pic-num">满{{ item.useMinPrice }}元可用</div>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="condition line1">
|
||||
<span class="line-title bg-color-check" v-if="item.ctype === 0">通用劵</span>
|
||||
<span class="line-title bg-color-check" v-else-if="item.ctype === 1">商品券</span>
|
||||
<span class="line-title bg-color-check" v-else>未知</span>
|
||||
<span>{{ item.cname }}</span>
|
||||
</div>
|
||||
<div class="data acea-row row-between-wrapper">
|
||||
<div v-if="item.endTime !== 0">{{ item.startTime }}-{{ item.endTime }}</div>
|
||||
<div v-else>不限时</div>
|
||||
<div class="bnt gray" v-if="item.isUse === true">已领取</div>
|
||||
<div class="bnt gray" v-else-if="item.isUse === 2">已领完</div>
|
||||
<div class="bnt bg-color-red" v-else @click="getCoupon(item.id, index)">立即领取</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Loading :loaded="loadend" :loading="loading"></Loading>
|
||||
<!--暂无优惠券-->
|
||||
<view class="noCommodity" v-if="couponsList.length === 0 && page > 1">
|
||||
<view class="noPictrue">
|
||||
<image src="http://admin-api.xdd618.com/file/pic/20210203154207179472.png" class="image" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { getCoupon, getCouponReceive } from "@/api/user";
|
||||
import Loading from "@/components/Loading";
|
||||
import DataFormatT from "@/components/DataFormatT";
|
||||
export default {
|
||||
name: "getCoupon",
|
||||
components: {
|
||||
Loading,
|
||||
DataFormatT
|
||||
},
|
||||
props: {},
|
||||
data: function() {
|
||||
return {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
couponsList: [],
|
||||
loading: false,
|
||||
loadend: false
|
||||
};
|
||||
},
|
||||
mounted: function() {
|
||||
this.getUseCoupons();
|
||||
},
|
||||
onReachBottom() {
|
||||
!this.loading && this.getUseCoupons();
|
||||
},
|
||||
methods: {
|
||||
getCoupon: function(id, index) {
|
||||
let that = this;
|
||||
let list = that.couponsList;
|
||||
getCouponReceive(id)
|
||||
.then(function(res) {
|
||||
list[index].isUse = true;
|
||||
uni.showToast({
|
||||
title: "领取成功",
|
||||
icon: "success",
|
||||
duration: 2000
|
||||
});
|
||||
})
|
||||
.catch(function(err) {
|
||||
uni.showToast({
|
||||
title:
|
||||
err.msg || err.response.data.msg || err.response.data.message,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
});
|
||||
},
|
||||
getUseCoupons: function() {
|
||||
let that = this;
|
||||
if (that.loading) return; //阻止下次请求（false可以进行请求）；
|
||||
if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
|
||||
that.loading = true;
|
||||
let q = { page: that.page, limit: that.limit };
|
||||
getCoupon(q).then(res => {
|
||||
that.loading = false;
|
||||
//apply();js将一个数组插入另一个数组;
|
||||
that.couponsList.push.apply(that.couponsList, res.data);
|
||||
that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
|
||||
that.page = that.page + 1;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<view ref="container">
|
||||
<div class="coupon-list" v-if="couponsList.length > 0">
|
||||
<div
|
||||
class="item acea-row row-center-wrapper"
|
||||
v-for="(item, index) in couponsList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="money" :class="item._type === 0 ? 'moneyGray' : ''">
|
||||
<div>
|
||||
￥<span class="num">{{ item.couponPrice }}</span>
|
||||
</div>
|
||||
<div class="pic-num">满{{ item.useMinPrice }}元可用</div>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="condition line1">
|
||||
{{ item.couponTitle }}
|
||||
</div>
|
||||
<div class="data acea-row row-between-wrapper">
|
||||
<div v-if="item.endTime === 0">不限时</div>
|
||||
<div v-else>{{ item.createTime }}-{{ item.endTime }}</div>
|
||||
<div class="bnt gray" v-if="item._type === 0">{{ item._msg }}</div>
|
||||
<div class="bnt bg-color-red" v-else>{{ item._msg }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--暂无优惠券-->
|
||||
<view
|
||||
class="noCommodity"
|
||||
v-if="couponsList.length === 0 && loading === true"
|
||||
>
|
||||
<view class="noPictrue">
|
||||
<image src="http://admin-api.xdd618.com/file/pic/20210203154207179472.png" class="image"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {getCouponsUser} from "@/api/user";
|
||||
import DataFormatT from "@/components/DataFormatT";
|
||||
|
||||
const NAME = "UserCoupon";
|
||||
|
||||
export default {
|
||||
name: "UserCoupon",
|
||||
components: {
|
||||
DataFormatT
|
||||
},
|
||||
props: {},
|
||||
data: function () {
|
||||
return {
|
||||
couponsList: [],
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$yroute: function (n) {
|
||||
var that = this;
|
||||
if (n.name === NAME) {
|
||||
that.getUseCoupons();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.getUseCoupons();
|
||||
},
|
||||
methods: {
|
||||
getUseCoupons: function () {
|
||||
let that = this,
|
||||
type = 0;
|
||||
getCouponsUser(type).then(res => {
|
||||
that.couponsList = res.data;
|
||||
that.loading = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,162 +0,0 @@
|
||||
<template>
|
||||
<view class="commission-details" ref="container">
|
||||
<view class="promoterHeader bg-color-red">
|
||||
<view class="headerCon acea-row row-between-wrapper">
|
||||
<view>
|
||||
<view class="name">提现记录</view>
|
||||
<view class="money">
|
||||
￥
|
||||
<text class="num">{{ force2Decimal(commission) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="iconfont icon-jinbi1"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sign-record" ref="content">
|
||||
<view class="list">
|
||||
<view class="item">
|
||||
<view class="listn" v-for="(item, infoIndex) in info" :key="infoIndex">
|
||||
<view class="itemn acea-row row-column row-center">
|
||||
<view class="acea-row row-middle row-between">
|
||||
<view class="txt">提现金额:<text class="font-color-red">{{ force2Decimal(item.extractPrice) }}</text></view>
|
||||
<view class="txt">手续费:<text class="font-color-red">{{ force2Decimal(item.extractSxf) }}</text></view>
|
||||
</view>
|
||||
<view class="txt" v-if="item.status==-1">失败原因:{{item.failMsg}}</view>
|
||||
<view class="acea-row row-middle row-between row-center">
|
||||
<view class="txt">{{item.createTime}}</view>
|
||||
<view class="txt font-color-green">{{item.statusText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="sign-record" ref="content">
|
||||
<view class="list">
|
||||
<view class="item" v-for="(item, infoIndex) in info" :key="infoIndex">
|
||||
<view class="data">{{ item.time }}</view>
|
||||
<view class="listn" v-for="(val, indexn) in item.list" :key="indexn">
|
||||
<view class="itemn acea-row row-between-wrapper">
|
||||
<view>
|
||||
<view class="name line1">{{ val.title }}</view>
|
||||
<view>{{ val.addTime }}</view>
|
||||
</view>
|
||||
<view class="num" v-if="val.pm == 1">+{{ force2Decimal(val.number) }}</view>
|
||||
<view class="num font-color-red" v-if="val.pm == 0">-{{ force2Decimal(val.number) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<Loading :loaded="loaded" :loading="loading"></Loading>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { getCommissionInfo, getSpreadInfo,getWithdrawalRecordList } from "@/api/user";
|
||||
import Loading from "@/components/Loading";
|
||||
import { formatDateTime,isNullOrEmpty} from "@/utils";
|
||||
|
||||
export default {
|
||||
name: "CashRecord",
|
||||
components: {
|
||||
Loading
|
||||
},
|
||||
props: {},
|
||||
data: function() {
|
||||
return {
|
||||
info: [],
|
||||
commission: 0,
|
||||
where: {
|
||||
page: 1,
|
||||
limit: 10
|
||||
},
|
||||
types: 4,
|
||||
loaded: false,
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
mounted: function() {
|
||||
this.getCommission();
|
||||
this.getIndex();
|
||||
},
|
||||
onReachBottom() {
|
||||
this.loading === false && this.getIndex();
|
||||
},
|
||||
methods: {
|
||||
fitDateString(str,format){
|
||||
return formatDateTime(str,format);
|
||||
},
|
||||
force2Decimal(v){
|
||||
return this.$force2Decimal(v);
|
||||
},
|
||||
getIndex: function() {
|
||||
let that = this;
|
||||
if (that.loading == true || that.loaded == true) return;
|
||||
that.loading = true;
|
||||
|
||||
getWithdrawalRecordList(that.where).then(
|
||||
//getCommissionInfo(that.where, that.types).then(
|
||||
res => {
|
||||
that.loading = false;
|
||||
that.loaded = res.data.length < that.where.limit;
|
||||
that.where.page = that.where.page + 1;
|
||||
that.info.push.apply(that.info, res.data.map((item)=>{
|
||||
switch (item.status){
|
||||
case -1:
|
||||
item.statusText = "提现未通过";
|
||||
break;
|
||||
case 0:
|
||||
item.statusText = "提现审核中";
|
||||
break;
|
||||
case 1:
|
||||
item.statusText = "提现已完成";
|
||||
break;
|
||||
case 2:
|
||||
item.statusText = "提现待打款";
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return item;
|
||||
}));
|
||||
},
|
||||
err => {
|
||||
uni.showToast({
|
||||
title: err.msg || err.response.data.msg|| err.response.data.message,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
);
|
||||
},
|
||||
getCommission: function() {
|
||||
let that = this;
|
||||
getSpreadInfo().then(
|
||||
res => {
|
||||
that.commission = res.data.commissionCount;
|
||||
},
|
||||
err => {
|
||||
uni.showToast({
|
||||
title: err.msg || err.response.data.msg|| err.response.data.message,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.txt{
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.sign-record .list .item .listn .itemn{
|
||||
height: auto;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -129,7 +129,7 @@ export default {
|
||||
this.$yrouter.push("/pages/user/promotion/Poster/index");
|
||||
},
|
||||
goCashRecord() {
|
||||
this.$yrouter.push("/pages/user/promotion/CashRecord/index");
|
||||
this.$yrouter.push('/pkg_user/views/withdrawalLog');
|
||||
},
|
||||
goPromoterList() {
|
||||
this.$yrouter.push("/pages/user/promotion/PromoterList/index");
|
||||
|
||||
+46
-13
@@ -42,16 +42,29 @@
|
||||
inn.guaranteeValue
|
||||
}}元
|
||||
</view>
|
||||
<view class="zan-box flex flex-0 ai-end" @click="zanInn">
|
||||
<template v-if="isLike">
|
||||
<image :src="webUrl+'/20230828095210280991.png'"/>
|
||||
<text style="font-size: 28rpx;color: #FF564A;">{{ inn.zan }}</text>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image :src="webUrl+'/20230828095217616640.png'"/>
|
||||
<text style="font-size: 28rpx;color: #333333;">{{ inn.zan }}</text>
|
||||
</template>
|
||||
|
||||
<view class="flex ai-center">
|
||||
<view class="zan-box flex flex-0 ai-end" @click="zanInn">
|
||||
<template v-if="isLike">
|
||||
<image :src="webUrl+'/20230828095210280991.png'"/>
|
||||
<text style="font-size: 28rpx;color: #FF564A;">{{ inn.zan }}</text>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image :src="webUrl+'/20230828095217616640.png'"/>
|
||||
<text style="font-size: 28rpx;color: #333333;">{{ inn.zan }}</text>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<view class="flex flex-0 ai-end">
|
||||
<image style="width: 32rpx;height: 32rpx;margin-left: 10rpx;" :src="webUrl+'/20240113230535491918.png'"
|
||||
mode="scaleToFill" @click="doneFavorite" v-if="isFavorite"/>
|
||||
<image style="width: 32rpx;height: 32rpx;margin-left: 10rpx;" :src="webUrl+'/20240122093206161576.png'"
|
||||
mode="scaleToFill" @click="doneFavorite" v-else/>
|
||||
<text style="font-size: 28rpx;color: #333333;">{{ favoriteCount }}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -221,13 +234,12 @@ import {
|
||||
import {formatDateTime} from "@/utils";
|
||||
import {getUrlParam} from "@/utils/common.js";
|
||||
import imgBox from '@/components/imageTypeSet/imagebox.vue'
|
||||
import dragButton from "@/components/drag-button/drag-button.vue";
|
||||
import cookie from "@/utils/store/cookie";
|
||||
import {addStore, removeStore} from "@/api/favorite";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
imgBox,
|
||||
dragButton
|
||||
imgBox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -249,7 +261,9 @@ export default {
|
||||
posterUrl: "", // 分享海报
|
||||
id: null,
|
||||
partnerId: null,
|
||||
isLike: false //点赞
|
||||
isLike: false, //点赞
|
||||
isFavorite: false,
|
||||
favoriteCount: 0
|
||||
}
|
||||
},
|
||||
//必须在页面加 onPageScroll(e){} ，才能滑动显示背景
|
||||
@@ -537,6 +551,8 @@ export default {
|
||||
getHotelDetail(that.id).then((res) => {
|
||||
that.inn = res.data;
|
||||
that.isLike = res.data.zanVo !== null;
|
||||
that.isFavorite = res.data.hasFavorite
|
||||
that.favoriteCount = res.data.favoriteCount
|
||||
}).catch((err) => {
|
||||
|
||||
}).finally(() => {
|
||||
@@ -546,6 +562,8 @@ export default {
|
||||
getHomeHotelDetail(that.id).then((res) => {
|
||||
that.inn = res.data;
|
||||
that.isLike = res.data.zanVo !== null;
|
||||
that.isFavorite = res.data.hasFavorite
|
||||
that.favoriteCount = res.data.favoriteCount
|
||||
}).catch((err) => {
|
||||
|
||||
}).finally(() => {
|
||||
@@ -643,6 +661,21 @@ export default {
|
||||
} else {
|
||||
this.$dialog.error('电话为空');
|
||||
}
|
||||
},
|
||||
async doneFavorite() {
|
||||
if (this.isFavorite) {
|
||||
const res = await removeStore(this.id)
|
||||
if (res.success) {
|
||||
this.isFavorite = false
|
||||
this.favoriteCount = res.data.favoriteCount
|
||||
}
|
||||
} else {
|
||||
const res = await addStore(this.id)
|
||||
if (res.success) {
|
||||
this.isFavorite = true
|
||||
this.favoriteCount = res.data.favoriteCount
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<view style="min-height:100vh;background: #FFFFFF" v-if="ready">
|
||||
<view style="padding: 20rpx 32rpx">
|
||||
<u-input v-model="keyword" :customStyle="{'border':'none','background': '#F6F6F6'}"
|
||||
placeholder="输入城市名、拼音或字母查询" shape="circle" @confirm="onSearch" @change="onChange">
|
||||
<template v-slot:suffix>
|
||||
<u-icon name="search" color="#FD5749" size="32rpx" @click="onSearch"/>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
|
||||
<view style="margin: 32rpx" v-if="searchList.length">
|
||||
<view class="flex flex-wrap">
|
||||
<view class="n-tag jc-center ai-center" v-for="(item,index) in searchList" :key="index"
|
||||
@click="navToWatch(item['name'])">{{ item['name'] }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template v-else>
|
||||
<view style="margin: 32rpx" v-if="cityName">
|
||||
<view style="margin-bottom: 16rpx">当前定位</view>
|
||||
<view class="n-tag jc-center ai-center" @click="navToWatch(cityName)">
|
||||
<u-icon name="map" color="#333333" size="36rpx"/>
|
||||
{{ cityName }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="margin: 32rpx" v-if="watchCity.length">
|
||||
<view style="margin-bottom: 16rpx">历史访问</view>
|
||||
<view class="flex flex-wrap">
|
||||
<view class="n-tag jc-center ai-center" v-for="(item,index) in watchCity" :key="index"
|
||||
@click="navToWatch(item)">{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-index-list :index-list="indexList" inactiveColor="#666666" activeColor="#FD5749">
|
||||
<template v-for="(item, index) in itemArr">
|
||||
<u-index-item>
|
||||
<u-index-anchor :text="indexList[index].toUpperCase()" color="#333333" size="32rpx" bgColor="#FFFFFF"/>
|
||||
<view class="list-cell" v-for="(cell, cIndex) in item" :key="cIndex" @click="navToWatch(cell['name'])">
|
||||
{{ cell['name'] }}
|
||||
</view>
|
||||
</u-index-item>
|
||||
</template>
|
||||
</u-index-list>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref} from '@vue/composition-api'
|
||||
import {getCurAddress, getLocation} from "@/utils/common";
|
||||
import {getVideoCity} from "@/api/video";
|
||||
|
||||
const watchCity = ref(uni.getStorageSync('watchCity') || [])
|
||||
|
||||
onMounted(() => {
|
||||
getMapData()
|
||||
fetchList()
|
||||
})
|
||||
|
||||
const ready = ref(false)
|
||||
const cityName = ref('')
|
||||
const keyword = ref('')
|
||||
|
||||
const onSearch = () => {
|
||||
const name = keyword.value.trim()
|
||||
if (name.length > 0) {
|
||||
navToWatch(name)
|
||||
}
|
||||
}
|
||||
|
||||
const raw = ref()
|
||||
const searchList = ref([])
|
||||
const onChange = (value) => {
|
||||
searchList.value = []
|
||||
if (value.trim().length === 0) return
|
||||
searchList.value = raw.value.filter(city => {
|
||||
if (city['name'].indexOf(value) > -1) return city
|
||||
})
|
||||
}
|
||||
|
||||
const handleHistory = (name) => {
|
||||
for (let i = 0; i < watchCity.value.length; i++) {
|
||||
if (name === watchCity.value[i]) return
|
||||
}
|
||||
if (watchCity.value.length === 4) {
|
||||
watchCity.value.pop()
|
||||
}
|
||||
watchCity.value.unshift(name)
|
||||
uni.setStorageSync('watchCity', watchCity.value)
|
||||
}
|
||||
|
||||
const getMapData = async () => {
|
||||
const map = await getLocation();
|
||||
if (map.length > 1) {
|
||||
const {latitude, longitude} = map[1];
|
||||
const address = await getCurAddress(latitude, longitude);
|
||||
cityName.value = address[1].data.result['ad_info']['city']
|
||||
}
|
||||
}
|
||||
|
||||
const indexList = ref(["A", "B", "C"])
|
||||
const itemArr = ref([
|
||||
['列表A1', '列表A2', '列表A3'],
|
||||
['列表B1', '列表B2', '列表B3'],
|
||||
['列表C1', '列表C2', '列表C3']
|
||||
])
|
||||
|
||||
const fetchList = async () => {
|
||||
const res = await getVideoCity()
|
||||
if (res.success) {
|
||||
raw.value = res.data
|
||||
const groupedByName = res.data.reduce((accumulator, current) => {
|
||||
const groupKey = current['firstLetter'].toUpperCase()
|
||||
if (!accumulator[groupKey]) {
|
||||
accumulator[groupKey] = []
|
||||
}
|
||||
accumulator[groupKey].push(current)
|
||||
return accumulator
|
||||
}, {})
|
||||
|
||||
indexList.value = Object.keys(groupedByName)
|
||||
itemArr.value = Object.values(groupedByName)
|
||||
}
|
||||
ready.value = true
|
||||
}
|
||||
|
||||
const navToWatch = (name) => {
|
||||
handleHistory(name)
|
||||
uni.redirectTo({url: '/pkg-video/views/watch?name=' + name})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
/deep/ .u-index-item {
|
||||
.u-border-bottom {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.list-cell {
|
||||
margin: 0 30rpx;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1rpx solid #DCDCDC;
|
||||
color: #333333;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.n-tag {
|
||||
display: inline-flex;
|
||||
height: 60rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 0 32rpx 16rpx 0;
|
||||
padding: 0 20rpx;
|
||||
border: 2px solid #B5B5B5;
|
||||
border-radius: 8rpx;
|
||||
color: #333333;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<view class="pkg-lottery-log" v-if="ready">
|
||||
<image style="width: 734rpx;height: 1418rpx" :src="webUrl+'/20240125215943273915.png'" mode="scaleToFill"/>
|
||||
|
||||
<view class="th flex">
|
||||
<view>日期</view>
|
||||
<view style="margin-left: 168rpx;">抽奖结果</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="list-box" scroll-y @scrolltolower="onBottom">
|
||||
<view class="item flex jc-between ai-center" v-for="(item,index) in list" :key="index">
|
||||
<view class="flex ai-center">
|
||||
<view style="width: 288rpx;color:#BD2323;font-size: 28rpx">{{ item['drawTime'] }}</view>
|
||||
<view class="more-t">{{ item['prizeName'] }}</view>
|
||||
</view>
|
||||
|
||||
<image class="flex-0" style="width: 111rpx;height: 64rpx" :src="webUrl+'/20240124232010456109.png'"
|
||||
mode="scaleToFill" v-if="item['isHit']===1 && item['status']===1" @click="takeItem(item)"/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from '@vue/composition-api'
|
||||
import {onShow} from '@dcloudio/uni-app'
|
||||
import {VUE_APP_RESOURCES_URL as webUrl} from '../../config/index'
|
||||
import {getLogs, takePrize} from "@/api/lottery";
|
||||
|
||||
const ready = ref(false)
|
||||
|
||||
onShow(() => {
|
||||
list.value = []
|
||||
fetchList()
|
||||
})
|
||||
|
||||
const page = ref(1)
|
||||
const list = ref([])
|
||||
const fetchList = async () => {
|
||||
const res = await getLogs(page.value, 20)
|
||||
if (res.success) {
|
||||
res.data['records']?.forEach(item => list.value.push(item))
|
||||
ready.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const onBottom = () => {
|
||||
page.value++
|
||||
fetchList()
|
||||
}
|
||||
|
||||
const takeItem = async (item) => {
|
||||
if (item['prizeType'] === 1 && item['status'] === 1) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/OrderSubmission/index?lotteryRecordId=' + item['id']
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const res = await takePrize(item.id)
|
||||
if (res.success) {
|
||||
item['status'] = 2
|
||||
uni.showModal({
|
||||
title: '领取成功',
|
||||
content: '您的奖品已经领取成功，请前往我的订单查看奖品发货信息',
|
||||
cancelText: '下次再说',
|
||||
confirmText: '查看订单',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/MyOrder/index'
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.pkg-lottery-log {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 32rpx 8rpx 24rpx;
|
||||
background-color: #BD2323
|
||||
}
|
||||
|
||||
.th {
|
||||
position: absolute;
|
||||
left: 160rpx;
|
||||
top: 136rpx;
|
||||
}
|
||||
|
||||
.list-box {
|
||||
position: absolute;
|
||||
left: 42rpx;
|
||||
top: 200rpx;
|
||||
width: 672rpx;
|
||||
height: 1150rpx;
|
||||
|
||||
.item {
|
||||
width: 672rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 16rpx 6rpx 16rpx 32rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #FFFBEE;
|
||||
|
||||
.more-t {
|
||||
width: 204rpx;
|
||||
color: #333333;
|
||||
font-size: 32rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,341 @@
|
||||
<template>
|
||||
<view class="pkg-video-lottery" v-if="ready">
|
||||
<image style="width: 100vw;height: auto" :src="lotteryDetail.diceConfig['diceBackgroundImage']" mode="widthFix"/>
|
||||
<image class="btn-rules" :src="webUrl+'/20240124205433052863.png'" mode="scaleToFill" @click="openRulesModel"/>
|
||||
<image class="btn-log" :src="webUrl+'/20240124205425974838.png'" mode="scaleToFill" @click="navToLog"/>
|
||||
|
||||
<view class="dialog-mask" v-if="showDialog">
|
||||
<view class="dialog-rules flex jc-center" :style="{'backgroundImage':`url(${webUrl}/20240124210831292142.png)`}"
|
||||
v-if="showRules">
|
||||
<rich-text style="width: 546rpx;height:590rpx;overflow: scroll;" :nodes="lotteryDetail.diceConfig['ruleText']"/>
|
||||
<image class="btn-know" :src="webUrl+'/20240124210742446577.png'" mode="scaleToFill" @click="closeRulesModel"/>
|
||||
</view>
|
||||
|
||||
<view class="dialog-result" :style="{'backgroundImage':`url(${webUrl}/20240124210703446407.png)`}"
|
||||
v-if="showResult">
|
||||
<view class="btn-close" @click="onlyClose"/>
|
||||
<view class="img-box flex flex-col ai-center" v-if="diceResult['prizeImage']">
|
||||
<image style="width: 240rpx;height: 240rpx" :src="diceResult['prizeImage']" mode="scaleToFill"/>
|
||||
<image style="width: 80rpx;height: 80rpx;margin-top: 40rpx;" :src="diceResult['diceImage']"
|
||||
mode="scaleToFill"/>
|
||||
<view class="one-t bold" style="width:300rpx;margin-top: 40rpx;color:#F7E7B2">
|
||||
获得{{ diceResult['prizeName'] }}一份
|
||||
</view>
|
||||
</view>
|
||||
<image class="btn-result" style="width: 240rpx;height: 68rpx" :src="webUrl+'/20240125205521152611.png'"
|
||||
mode="scaleToFill" @click="closeResultModel"/>
|
||||
</view>
|
||||
|
||||
<view class="dialog-take flex jc-center" :style="{'backgroundImage':`url(${webUrl}/20240124210904824337.png)`}"
|
||||
v-if="showTake">
|
||||
<view class="btn-box flex">
|
||||
<image style="width: 220rpx;height: 66rpx" :src="webUrl+'/20240124210952306625.png'" mode="scaleToFill"
|
||||
@click="navToCoupons"/>
|
||||
<image style="width: 220rpx;height: 66rpx;margin-left: 16rpx;" :src="webUrl+'/20240124210928974187.png'"
|
||||
mode="scaleToFill" @click="closeTakeModel"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="dice-box">
|
||||
<image style="width: 200rpx;height: 200rpx" :src="diceImg" mode="scaleToFill"/>
|
||||
</view>
|
||||
<view class="btn-submit" @click="onSubmit"/>
|
||||
<view class="today-limit">{{ lotteryDetail.todayLimit }}</view>
|
||||
|
||||
<scroll-view class="prize-list flex" scroll-x="true" enable-flex="true">
|
||||
<view class="item flex flex-0 jc-center ai-center"
|
||||
:style="{'backgroundImage':`url(${webUrl}/20240122212856857899.png)`}"
|
||||
v-for="(item,index) in lotteryDetail.prizeList" :key="index">
|
||||
<image style="width: 120rpx;height: 120rpx" :src="item['prizeImage']" mode="scaleToFill"/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="hit-box flex" @click="navToCoupons">
|
||||
<view class="img-first flex jc-center ai-center"
|
||||
:style="{'backgroundImage':`url(${webUrl}/20240122212841745175.png)`}"
|
||||
v-if="lotteryDetail.todayHitPrizeList.length">
|
||||
<image style="width: 128rpx;height: 128rpx" :src="lotteryDetail.todayHitPrizeList['0']['prizeImage']"
|
||||
mode="scaleToFill"/>
|
||||
</view>
|
||||
<image style="width:242rpx;height: 184rpx" :src="webUrl+'/20240122212850627682.png'" mode="scaleToFill"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref} from '@vue/composition-api'
|
||||
import {VUE_APP_RESOURCES_URL as webUrl} from '../../config/index'
|
||||
import {getDetail, getPrize, takePrize} from "@/api/lottery";
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
const showDialog = ref(false)
|
||||
const showRules = ref(false)
|
||||
const showResult = ref(false)
|
||||
const showTake = ref(false)
|
||||
|
||||
const ready = ref(false)
|
||||
const lotteryDetail = ref({
|
||||
diceConfig: {},
|
||||
prizeList: [],
|
||||
todayHitPrizeList: [],
|
||||
todayLimit: 0
|
||||
})
|
||||
|
||||
const navToLog = () => {
|
||||
uni.navigateTo({url: './lottery-log'})
|
||||
}
|
||||
|
||||
|
||||
const openRulesModel = () => {
|
||||
showDialog.value = true
|
||||
showRules.value = true
|
||||
}
|
||||
const closeRulesModel = () => {
|
||||
showDialog.value = false
|
||||
showRules.value = false
|
||||
}
|
||||
|
||||
const init = async () => {
|
||||
const res = await getDetail()
|
||||
if (res.success) {
|
||||
lotteryDetail.value = res.data
|
||||
diceImg.value = lotteryDetail.value.diceConfig['diceDefaultImage']
|
||||
ready.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const diceIndex = ref(0)
|
||||
const diceImg = ref('')
|
||||
const onSubmit = async () => {
|
||||
const res = await getPrize()
|
||||
if (res.success) diceResult.value = res.data
|
||||
|
||||
diceIndex.value = lotteryDetail.value.diceConfig['diceValues'].findIndex(item => item['diceValue'] === diceResult.value.diceValue)
|
||||
diceImg.value = lotteryDetail.value.diceConfig['diceValues'][diceIndex.value]['diceValueGif']
|
||||
setTimeout(() => {
|
||||
diceImg.value = lotteryDetail.value.diceConfig['diceValues'][diceIndex.value]['diceValueImage']
|
||||
setTimeout(() => {
|
||||
init()
|
||||
showDialog.value = true
|
||||
showResult.value = true
|
||||
}, 1000)
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
const diceResult = ref({
|
||||
prizeName: '',
|
||||
prizeImage: '',
|
||||
diceImage: '',
|
||||
diceValue: 0
|
||||
})
|
||||
|
||||
const navToCoupons = () => {
|
||||
uni.navigateTo({url: '/pkg_user/views/myCoupons'})
|
||||
}
|
||||
|
||||
const onlyClose = () => {
|
||||
showResult.value = false
|
||||
showDialog.value = false
|
||||
}
|
||||
|
||||
const closeResultModel = async () => {
|
||||
if (diceResult.value['prizeType'] === 4) {
|
||||
showResult.value = false
|
||||
showDialog.value = false
|
||||
return
|
||||
}
|
||||
if (diceResult.value['prizeType'] === 1) {
|
||||
showResult.value = false
|
||||
showDialog.value = false
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/OrderSubmission/index?lotteryRecordId=' + diceResult.value['id']
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const res = await takePrize(diceResult.value.id)
|
||||
if (res.success) {
|
||||
showResult.value = false
|
||||
showTake.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const closeTakeModel = () => {
|
||||
showTake.value = false
|
||||
showDialog.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
image {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.pkg-video-lottery {
|
||||
position: relative;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.btn-rules {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 168rpx;
|
||||
width: 74rpx;
|
||||
height: 170rpx
|
||||
}
|
||||
|
||||
.btn-log {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 342rpx;
|
||||
width: 72rpx;
|
||||
height: 216rpx;
|
||||
}
|
||||
|
||||
.dialog-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(51, 51, 51, .6);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.dialog-rules {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 606rpx;
|
||||
height: 760rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 40rpx 40rpx 120rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 606rpx 724rpx;
|
||||
z-index: 20;
|
||||
|
||||
.btn-know {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 292rpx;
|
||||
height: 98rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-result {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 476rpx;
|
||||
height: 856rpx;
|
||||
box-sizing: border-box;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 476rpx 856rpx;
|
||||
z-index: 20;
|
||||
|
||||
.btn-close {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 345rpx;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.btn-result {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, 45%);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-take {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 520rpx;
|
||||
height: 428rpx;
|
||||
box-sizing: border-box;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 520rpx 428rpx;
|
||||
z-index: 20;
|
||||
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 26rpx;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.dice-box {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 450rpx;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 694rpx;
|
||||
transform: translate(-50%, 0);
|
||||
width: 280rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.today-limit {
|
||||
position: absolute;
|
||||
left: 48.5%;
|
||||
top: 788rpx;
|
||||
transform: translate(-50%, 0);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.prize-list {
|
||||
position: absolute;
|
||||
left: 124rpx;
|
||||
top: 888rpx;
|
||||
width: 576rpx;
|
||||
height: 164rpx;
|
||||
|
||||
.item {
|
||||
width: 164rpx;
|
||||
height: 164rpx;
|
||||
background-size: 164rpx 164rpx;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.hit-box {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 1176rpx;
|
||||
transform: translate(-50%, 0);
|
||||
height: 184rpx;
|
||||
|
||||
.img-first {
|
||||
width: 175rpx;
|
||||
height: 185rpx;
|
||||
margin-right: 24rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 175rpx 185rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<view class="pkg-video-watch" v-if="ready">
|
||||
|
||||
<cover-view class="fixed-header flex ai-start">
|
||||
<cover-view class="bold">推荐</cover-view>
|
||||
<cover-view class="flex ai-center" style="margin-left: 100rpx" @click="navToCity">
|
||||
<cover-view>{{ cityName }}</cover-view>
|
||||
<cover-image style="width: 48rpx;height: 48rpx" :src="webUrl+'/20240113230523321737.png'" mode="scaleToFill"/>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
|
||||
<swiper style="height:100%" vertical @change="onChange">
|
||||
<swiper-item v-for="(item,index) in list" :key="index">
|
||||
<view class="item">
|
||||
<video :id="`video-${index}`" :src="item['video']" loop :controls="false" :show-center-play-btn="false"/>
|
||||
|
||||
<view class="btn-play flex jc-center ai-center" @click="controlVideo">
|
||||
<image style="width:57rpx;height:65rpx" :src="webUrl+'/20240123093125710999.png'" mode="scaleToFill"
|
||||
v-if="showPlay"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fixed-footer flex jc-between ai-end"
|
||||
:style="{'bottom':systemInfo['safeAreaInsets']['bottom']+'px'}" v-if="!showDialog">
|
||||
<view class="flex ai-center">
|
||||
<cover-image style="width: 80rpx;height: 80rpx;border-radius: 50%;z-index: 10" :src="item['hotelLogo']"
|
||||
@click="navToStore(item['hotelId'])"/>
|
||||
<cover-view class="more-t">{{ item['hotelName'] }}</cover-view>
|
||||
</view>
|
||||
|
||||
<cover-view class="flex ai-center">
|
||||
<cover-view class="flex flex-col ai-center" style="width:78rpx;margin-right: 16rpx;"
|
||||
@click="changeLike(item)">
|
||||
<cover-image style="width: 60rpx;height: 60rpx" :src="webUrl+'/20240113230547221591.png'"
|
||||
v-if="item['hasLike']"/>
|
||||
<cover-image style="width: 60rpx;height: 60rpx" :src="webUrl+'/20240113230552152511.png'" v-else/>
|
||||
<cover-view class="one-t tc">{{ item['likeCount'] }}</cover-view>
|
||||
</cover-view>
|
||||
<cover-view class="flex flex-col ai-center" style="width:78rpx;margin-right: 16rpx;"
|
||||
@click="changeFav(item)">
|
||||
<cover-image style="width: 60rpx;height: 60rpx" :src="webUrl+'/20240113230535491918.png'"
|
||||
v-if="item['hasFavorite']"/>
|
||||
<cover-image style="width: 60rpx;height: 60rpx" :src="webUrl+'/20240113230541207016.png'" v-else/>
|
||||
<cover-view class="one-t tc">{{ item['favoriteCount'] }}</cover-view>
|
||||
</cover-view>
|
||||
<cover-view class="flex flex-col ai-center" style="width:78rpx" @click="showDialog=true">
|
||||
<cover-image style="width: 60rpx;height: 60rpx" :src="webUrl+'/20240113230529202260.png'"/>
|
||||
<cover-view class="one-t tc">{{ item['replyCount'] }}</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<u-popup :show="showDialog" :round="10" mode="bottom" overlay overlayOpacity="0"
|
||||
closeOnClickOverlay
|
||||
@close="dialogClose" @open="dialogOpen">
|
||||
<view style="z-index: 100">
|
||||
<cover-view class="tc" style="padding: 20rpx 0 40rpx;font-size: 28rpx">{{
|
||||
list[current]['replyCount']
|
||||
}}条评论
|
||||
</cover-view>
|
||||
<scroll-view style="max-height: 740rpx" scroll-y @scrolltolower="fetchReply">
|
||||
<view class="flex" style="margin: 0 30rpx 30rpx" v-for="(item,index) in replyList" :key="index">
|
||||
<cover-image class="flex-0" style="width: 64rpx;height: 64rpx;margin-right: 18rpx;border-radius: 50%"
|
||||
:src="item['userAvatar']"/>
|
||||
<cover-view>
|
||||
<cover-view style="color:#999999;font-size: 28rpx">{{ item['userNickname'] }}</cover-view>
|
||||
<cover-view class="more-t" style="font-size: 32rpx;line-height: 48rpx">{{ item['comment'] }}</cover-view>
|
||||
<cover-view style="color:#999999;font-size: 28rpx">{{ item['time'] }}</cover-view>
|
||||
</cover-view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="flex jc-between ai-center" style="padding: 20rpx;border-top:2rpx solid #DCDCDC;">
|
||||
<u-input :customStyle="{'border':'none','background': '#F6F6F6'}" v-model="comment"
|
||||
placeholder="请输入评论..." maxlength="200" shape="circle"/>
|
||||
<cover-view class="btn-submit flex jc-center ai-center" @click="onSubmit">发布</cover-view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from '@vue/composition-api'
|
||||
import {onLoad, onShow} from '@dcloudio/uni-app'
|
||||
import {VUE_APP_RESOURCES_URL as webUrl} from '../../config/index'
|
||||
import {getReplyList, likeVideo, randomList, removeFavoriteVideo, removeLikeVideo, submitReply} from "@/api/video";
|
||||
import {addVideo} from "@/api/favorite";
|
||||
import {getCurAddress, getLocation} from "@/utils/common";
|
||||
|
||||
const systemInfo = ref()
|
||||
|
||||
onLoad((options) => {
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
systemInfo.value = res
|
||||
}
|
||||
})
|
||||
|
||||
videoId.value = options.videoId || ''
|
||||
const name = options.name
|
||||
if (name) {
|
||||
cityName.value = name
|
||||
fetchList()
|
||||
} else {
|
||||
getMapData()
|
||||
}
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
ready.value = false
|
||||
setTimeout(() => {
|
||||
if (cityName.value) fetchList()
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
const ready = ref(false)
|
||||
const cityName = ref('')
|
||||
const videoId = ref('')
|
||||
|
||||
const navToCity = () => {
|
||||
uni.redirectTo({url: '/pkg-video/views/city'})
|
||||
}
|
||||
|
||||
const navToHome = () => {
|
||||
uni.switchTab({url: '/pages/home/index'})
|
||||
}
|
||||
|
||||
const navToStore = (id) => {
|
||||
console.log(typeof id, id)
|
||||
uni.navigateTo({url: '/pagesInn/inn/innHome?id=' + id})
|
||||
}
|
||||
|
||||
const getMapData = async () => {
|
||||
const map = await getLocation();
|
||||
if (map.length > 1) {
|
||||
const {latitude, longitude} = map[1];
|
||||
const address = await getCurAddress(latitude, longitude);
|
||||
cityName.value = address[1].data.result['ad_info']['city']
|
||||
}
|
||||
|
||||
await fetchList()
|
||||
}
|
||||
|
||||
const list = ref([])
|
||||
const fetchList = async () => {
|
||||
let param
|
||||
if (videoId.value) {
|
||||
param = {
|
||||
videoId: videoId.value,
|
||||
limit: 2
|
||||
}
|
||||
} else {
|
||||
param = {
|
||||
cityName: cityName.value,
|
||||
limit: 2
|
||||
}
|
||||
}
|
||||
const res = await randomList(param)
|
||||
if (res.success) {
|
||||
res.data?.forEach(item => list.value.push(item))
|
||||
if (!ready.value && list.value.length === 0) {
|
||||
uni.showModal({
|
||||
title: '',
|
||||
content: '当前城市还没有视频，可以先看看其他城市的喔~',
|
||||
cancelText: '返回',
|
||||
cancelColor: '#3A87FC',
|
||||
confirmText: '选择城市',
|
||||
confirmColor: '#3A87FC',
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
navToCity()
|
||||
} else if (res.cancel) {
|
||||
navToHome()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
ready.value = true
|
||||
if (list.value.length > 0) handleVideoPlay()
|
||||
}
|
||||
}
|
||||
|
||||
const changeLike = async (item) => {
|
||||
const videoId = item['id']
|
||||
if (item['hasLike']) {
|
||||
const res = await removeLikeVideo(videoId)
|
||||
if (res.success) {
|
||||
item['hasLike'] = false
|
||||
item['likeCount'] = res.data['likeCount']
|
||||
}
|
||||
} else {
|
||||
const res = await likeVideo(videoId)
|
||||
if (res.success) {
|
||||
item['hasLike'] = true
|
||||
item['likeCount'] = res.data['likeCount']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const changeFav = async (item) => {
|
||||
const videoId = item['id']
|
||||
if (item['hasFavorite']) {
|
||||
const res = await removeFavoriteVideo(videoId)
|
||||
if (res.success) {
|
||||
item['hasFavorite'] = false
|
||||
item['favoriteCount'] = res.data['favoriteCount']
|
||||
}
|
||||
} else {
|
||||
const res = await addVideo(videoId)
|
||||
if (res.success) {
|
||||
item['hasFavorite'] = true
|
||||
item['favoriteCount'] = res.data['favoriteCount']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const current = ref(0)
|
||||
const onChange = (event) => {
|
||||
current.value = event.detail.current
|
||||
if (current.value + 2 >= list.value.length) fetchList()
|
||||
handleVideoPlay()
|
||||
}
|
||||
|
||||
const showPlay = ref(false)
|
||||
const currentContext = ref()
|
||||
const handleVideoPlay = () => {
|
||||
for (let i = 0; i < list.value.length; i++) {
|
||||
let id = `video-${i}`
|
||||
let videoContext = uni.createVideoContext(id)
|
||||
videoContext.pause()
|
||||
if (current.value === i) videoContext.play()
|
||||
}
|
||||
}
|
||||
const controlVideo = () => {
|
||||
let id = `video-${current.value}`
|
||||
currentContext.value = uni.createVideoContext(id)
|
||||
if (showPlay.value) {
|
||||
currentContext.value.play()
|
||||
} else {
|
||||
currentContext.value.pause()
|
||||
}
|
||||
showPlay.value = !showPlay.value
|
||||
}
|
||||
|
||||
const showDialog = ref(false)
|
||||
const dialogClose = () => {
|
||||
showDialog.value = false
|
||||
}
|
||||
const dialogOpen = () => {
|
||||
comment.value = ''
|
||||
page.value = 1
|
||||
replyList.value = []
|
||||
fetchReply()
|
||||
}
|
||||
const comment = ref('')
|
||||
const page = ref(1)
|
||||
|
||||
const replyList = ref([])
|
||||
const fetchReply = async () => {
|
||||
const id = list.value[current.value]['id']
|
||||
const res = await getReplyList(id, page.value)
|
||||
if (res.success && res.data['records']?.length > 0) {
|
||||
res.data['records']?.forEach(item => {
|
||||
item.time = uni.$u.timeFrom(Date.parse(item.createTime))
|
||||
replyList.value.push(item)
|
||||
})
|
||||
page.value++
|
||||
}
|
||||
}
|
||||
|
||||
const onSubmit = async () => {
|
||||
if (comment.value.trim().length === 0) return
|
||||
const videoId = list.value[current.value]['id']
|
||||
const res = await submitReply(videoId, comment.value)
|
||||
if (res.success) {
|
||||
uni.showToast({
|
||||
title: '评论已发布',
|
||||
icon: 'none',
|
||||
success() {
|
||||
list.value[current.value]['replyCount']++
|
||||
showDialog.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.pkg-video-watch {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #000000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fixed-header {
|
||||
position: absolute;
|
||||
left: 200rpx;
|
||||
top: 32rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 44rpx;
|
||||
z-index: 10;
|
||||
|
||||
.bold {
|
||||
border-bottom: 10rpx solid #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.fixed-footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 32rpx;
|
||||
z-index: 10;
|
||||
|
||||
.more-t {
|
||||
width: 216rpx;
|
||||
margin-left: 10rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 36rpx;
|
||||
line-height: 52rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.one-t {
|
||||
width: 100%;
|
||||
margin-top: 8rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
width: 120rpx;
|
||||
height: 64rpx;
|
||||
margin-left: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #FD5749;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.btn-play {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
width: 100vw;
|
||||
height: 50vh;
|
||||
}
|
||||
</style>
|
||||
@@ -80,7 +80,10 @@ export default {
|
||||
noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
|
||||
auto: true,
|
||||
empty: {
|
||||
tip: '暂无商品' // 提示
|
||||
tip: '', // 提示
|
||||
icon:this.$VUE_APP_RESOURCES_URL+'/20240102232724024787.png',
|
||||
width:381,
|
||||
height:348
|
||||
}
|
||||
},
|
||||
downOption: {
|
||||
|
||||
@@ -56,9 +56,9 @@
|
||||
</scroll-view>
|
||||
|
||||
<view class="tc" v-else>
|
||||
<image class="img-nodata" :src="webUrl+'/20230912145123537792.png'" mode="scaleToFill"
|
||||
<image class="img-nodata" :src="webUrl+'/20240106205121705480.png'" mode="scaleToFill"
|
||||
v-if="tabIndex===0"/>
|
||||
<image class="img-nodata" :src="webUrl+'/20230912145113749133.png'" mode="scaleToFill" v-else/>
|
||||
<image class="img-nodata" :src="webUrl+'/20240106205115520933.png'" mode="scaleToFill" v-else/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "landMark",
|
||||
data() {
|
||||
return {
|
||||
keyword: ""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="pkg-product-land-mark">
|
||||
<view class="top-box">
|
||||
<view class="view-box">
|
||||
<view class="search-box flex ai-center">
|
||||
<input type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#999"
|
||||
@confirm="search()"/>
|
||||
</view>
|
||||
<view></view>
|
||||
</view>
|
||||
|
||||
<view class="nav"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.pkg-product-land-mark {
|
||||
background: #F7F3ED;
|
||||
|
||||
.top-box {
|
||||
padding: 20rpx 0;
|
||||
background: #E12641;
|
||||
|
||||
.view-box {
|
||||
margin: 0 32rpx;
|
||||
padding: 20rpx 34rpx 34rpx;
|
||||
border-radius: 40rpx;
|
||||
background: #F7F3ED;
|
||||
|
||||
.search-box {
|
||||
height: 64rpx;
|
||||
padding: 0 32rpx;
|
||||
border: 2rpx solid #E12641;
|
||||
border-radius: 32rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
input {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,246 +0,0 @@
|
||||
<script setup>
|
||||
import {getSeason, getSeasonPoster} from "@/api/product";
|
||||
import cookie from "@/utils/store/cookie";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
id: null,
|
||||
partnerId: null,
|
||||
info: null,
|
||||
current: 0,
|
||||
showShare: false,
|
||||
posterUrl: "", // 分享海报
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.id) {
|
||||
this.id = options.id || null;
|
||||
this.partnerId = options.partnerId || null;
|
||||
} else {
|
||||
let obj = uni.getEnterOptionsSync();
|
||||
if (options.scene || obj.query.scene) {
|
||||
let query = options ? decodeURIComponent(options.scene) : decodeURIComponent(obj.query.scene);
|
||||
this.id = getUrlParam(query, "id") || null;
|
||||
this.partnerId = getUrlParam(query, "partnerId") || null;
|
||||
}
|
||||
}
|
||||
if (this.partnerId) cookie.set("spread", this.partnerId);
|
||||
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
getSeason(this.id).then(({data}) => {
|
||||
if (data.sliderImages) data.swiper = data.sliderImages.split(",");
|
||||
this.info = data;
|
||||
});
|
||||
|
||||
getSeasonPoster(this.id).then(({data}) => this.posterUrl = data);
|
||||
},
|
||||
tapLeft() {
|
||||
if (this.current === 0) return;
|
||||
this.current--;
|
||||
},
|
||||
tapRight() {
|
||||
if (this.current + 1 === this.info.swiper.length) return;
|
||||
this.current++;
|
||||
},
|
||||
|
||||
downloadImage() {
|
||||
let that = this;
|
||||
const randomID = () => Math.random().toString(36).substring(2);
|
||||
|
||||
uni.downloadFile({
|
||||
url: this.posterUrl, //网络图片的地址
|
||||
filePath: wx.env.USER_DATA_PATH + "/share_" + randomID() + ".png", //指定的本地文件路径
|
||||
success: downRes => {
|
||||
console.log(typeof downRes, downRes, "down")
|
||||
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: downRes.filePath, //临时文件地址
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: "保存成功",
|
||||
icon: "success",
|
||||
success() {
|
||||
that.showShare = false;
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: function (err) {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: function (err) {
|
||||
uni.showToast({
|
||||
title: err.errMsg,
|
||||
icon: "error"
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="product-season">
|
||||
<template v-if="info">
|
||||
<view class="scroll-item section">
|
||||
<image class="section" :src="info.topImage" mode="scaleToFill"/>
|
||||
<view class="share-label flex jc-center ai-center" @click="showShare=true" v-if="posterUrl.length>0">
|
||||
<image class="icon-share" :src="webUrl+'/20230911105727684131.png'" mode="scaleToFill"/>
|
||||
分享好友
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-popup :show="showShare" mode="center" bgColor="transparent">
|
||||
<view class="box-share">
|
||||
<view class="box-img">
|
||||
<image class="icon" :src="webUrl+'/20230608112219219303.png'" @click="showShare=false"/>
|
||||
<image class="main-img" :src="posterUrl"/>
|
||||
</view>
|
||||
<image class="btn" :src="webUrl+'/20230608112210135038.png'" @click="saveImg"/>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<view class="scroll-item section">
|
||||
<u-swiper :autoplay="false" :current="current" :list="info.swiper" height="100vh" indicator
|
||||
imgMode="scaleToFill"></u-swiper>
|
||||
<image class="icon-direction icon-left" :src="webUrl+'/20230911105736198247.png'" mode="scaleToFill"
|
||||
@click="tapLeft"/>
|
||||
<image class="icon-direction icon-right" :src="webUrl+'/20230911105742958676.png'" mode="scaleToFill"
|
||||
@click="tapRight"/>
|
||||
</view>
|
||||
|
||||
<view class="scroll-item">
|
||||
<scroll-view scroll-y class="product-list" :style="{backgroundImage:'url(' + info.productImage + ')'}">
|
||||
<view class="item" v-for="(item,index) in info.products" :key="index">
|
||||
<image class="item-img" :src="item.image" mode="widthFix"/>
|
||||
<view class="content">
|
||||
<view class="name bold one-t">{{ item.storeName }}</view>
|
||||
<view class="flex jc-between ai-end">
|
||||
<view class="price">活动价:￥
|
||||
<text class="bold">{{ item.price }}</text>
|
||||
</view>
|
||||
<image class="btn-done" :src="webUrl+'/20230911105720914329.png'" mode="scaleToFill"
|
||||
@click="$global.navToGoods(item.id)"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/css/store.less";
|
||||
|
||||
.product-season {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden scroll;
|
||||
scroll-snap-type: y mandatory;
|
||||
|
||||
image {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.scroll-item {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.section {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.share-label {
|
||||
position: absolute;
|
||||
top: 674rpx;
|
||||
right: 32rpx;
|
||||
width: 200rpx;
|
||||
height: 56rpx;
|
||||
background: rgba(255, 255, 255, 0.39);
|
||||
border-radius: 8rpx;
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
|
||||
.icon-share {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-direction {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 40rpx;
|
||||
height: 74rpx;
|
||||
}
|
||||
|
||||
.icon-left {
|
||||
left: 32rpx;
|
||||
}
|
||||
|
||||
.icon-right {
|
||||
right: 32rpx;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
padding: 200rpx 32rpx 0;
|
||||
background-size: 100vw auto;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
width: 686rpx;
|
||||
margin-bottom: 46rpx;
|
||||
border-radius: 40rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.item-img {
|
||||
width: 686rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 32rpx 40rpx;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
|
||||
color: #FFFFFF;
|
||||
line-height: 64rpx;
|
||||
|
||||
|
||||
.name {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 32rpx;
|
||||
|
||||
text {
|
||||
font-size: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-done {
|
||||
width: 220rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -65,7 +65,10 @@ export default {
|
||||
noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
|
||||
auto: true,
|
||||
empty: {
|
||||
tip: '暂无银行卡' // 提示
|
||||
tip: '', // 提示
|
||||
icon:this.$VUE_APP_RESOURCES_URL+'/20240102232713117485.png',
|
||||
width:458,
|
||||
height:356
|
||||
// btnText:'点击刷新'
|
||||
}
|
||||
},
|
||||
|
||||
@@ -0,0 +1,551 @@
|
||||
<template>
|
||||
<view v-if="ready">
|
||||
|
||||
<view class="my-tabs flex jc-between">
|
||||
<view class="tab-item flex jc-center ai-center"
|
||||
:class="{'active':tabsIndex===index,'has-vertical':tabsVertical===index}" v-for="(item,index) in tabs"
|
||||
:key="index" @click="changeTabs(index)">
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="manage flex jc-end ai-center" @click="changeManage">
|
||||
<image :src="webUrl+'/20240107224533038041.png'" mode="scaleToFill"/>
|
||||
管理
|
||||
</view>
|
||||
<!--商品列表-->
|
||||
<scroll-view class="scroll-box" :class="{'manage-state':isManage}" scroll-y
|
||||
@scrolltolower="fetchProduct()" v-if="tabsIndex===0">
|
||||
<view class="tc" style="margin-top: 200rpx;" v-if="productList.length===0">
|
||||
<image style="width: 305rpx;height: 332rpx" :src="webUrl+'/20240102232718644743.png'" mode="scaleToFill"/>
|
||||
</view>
|
||||
|
||||
<view class="item-commodity flex ai-center" v-for="(item,index) in productList" :key="index">
|
||||
<CheckboxIcon style="margin-right: 16rpx;" :default-state="item['state']" :mark="[index]" @change="onChange"
|
||||
v-if="isManage"/>
|
||||
<image class="cover flex-0" :src="item['image']" mode="scaleToFill" @click="navToGoods(item['productId'])"/>
|
||||
|
||||
<view>
|
||||
<view class="more-t bold">{{ item['storeName'] }}</view>
|
||||
<view class="sub">规格:{{ item['sku'] }}</view>
|
||||
<view class="flex jc-between ai-end">
|
||||
<view class="price flex ai-end">
|
||||
<text style="color:#E92727">￥</text>
|
||||
<text style="color:#E92727;font-size: 32rpx;line-height: 48rpx">{{ item['price'] }}</text>
|
||||
<text style="margin-left: 10rpx;text-decoration:line-through">￥{{ item['otPrice'] }}</text>
|
||||
</view>
|
||||
<view class="cart flex jc-center ai-center">
|
||||
<image :src="webUrl+'/20240107224527293534.png'" mode="scaleToFill" @click="addCart(item)"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!--店铺列表-->
|
||||
<scroll-view class="scroll-box" :class="{'manage-state':isManage}" scroll-y @scrolltolower="fetchStore()"
|
||||
v-if="tabsIndex===1">
|
||||
<view class="tc" style="margin-top: 200rpx;" v-if="storeList.length===0">
|
||||
<image style="width: 305rpx;height: 332rpx" :src="webUrl+'/20240102232718644743.png'" mode="scaleToFill"/>
|
||||
</view>
|
||||
|
||||
<view class="item-store flex ai-start" v-for="(item,index) in storeList" :key="index">
|
||||
<view class="flex flex-0 ai-center">
|
||||
<CheckboxIcon style="margin-right: 16rpx;" :default-state="item['state']" :mark="[index]" @change="onChange"
|
||||
v-if="isManage"/>
|
||||
<image class="cover" :src="item['logo']" mode="scaleToFill"/>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<view class="flex jc-between ai-start" style="width: 594rpx">
|
||||
<view>
|
||||
<view class="one-t bold">{{ item['name'] }}</view>
|
||||
<view class="sub">{{ item['time'] === '刚刚' ? '刚刚' : item['time'] + '前收藏' }}</view>
|
||||
</view>
|
||||
<view class="btn-nav flex jc-center ai-center" :style="{'margin-right':(isManage?48:0)+'rpx'}"
|
||||
@click="navToStore(item['hotelId'])">进店逛逛
|
||||
<image style="width: 24rpx;height: 24rpx" :src="webUrl+'/20240109234706982937.png'" mode="scaleToFill"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex jc-start ai-center" style="margin-top: 16rpx;">
|
||||
<image class="img-product" :src="img" mode="scaleToFill"
|
||||
v-for="(img,i) in item['productImages']" :key="i"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!--视频列表-->
|
||||
<scroll-view class="scroll-box" :class="{'manage-state':isManage}" scroll-y
|
||||
@scrolltolower="fetchVideo()"
|
||||
v-if="tabsIndex===2">
|
||||
<view class="tc" style="margin-top: 200rpx;" v-if="videoList.length===0">
|
||||
<image style="width: 305rpx;height: 332rpx" :src="webUrl+'/20240102232718644743.png'" mode="scaleToFill"/>
|
||||
</view>
|
||||
|
||||
<view class="flex flex-wrap" style="padding:40rpx 32rpx">
|
||||
<view class="item-video" v-for="(item,index) in videoList" :key="index">
|
||||
<CheckboxIcon class="video-check" :default-state="item['state']" :mark="[index]" @change="onChange"
|
||||
v-if="isManage"/>
|
||||
|
||||
<image class="img-cover" :src="item['cover']" mode="scaleToFill" @click="navToVideo(item['videoId'])"/>
|
||||
<view class="item-mask flex jc-end ai-end">
|
||||
<image class="icon-heart" :src="webUrl+'/20240113205505660820.png'" mode="scaleToFill"/>
|
||||
<text>{{ item['favoriteCount'] }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="fixed-manage flex jc-between ai-center" v-if="isManage">
|
||||
<view style="margin-left: 30rpx;">
|
||||
<CheckboxIcon style="margin-right: 16rpx;" :default-state="isAll" :mark="[-1]" @change="onChange"/>
|
||||
<text style="color:#666666;font-size: 32rpx">全选({{ selectCount }})</text>
|
||||
</view>
|
||||
<view class="flex ai-center">
|
||||
<view class="btn flex jc-center ai-center" style="background: #D5D7D8" @click="changeManage">返回</view>
|
||||
<view class="btn flex jc-center ai-center" style="background: #FD5749" @click="remove">删除</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed, onMounted, ref} from '@vue/composition-api'
|
||||
import {VUE_APP_RESOURCES_URL as webUrl} from '../../config/index'
|
||||
import {getProductList, getStoreList, getVideoList, removeFavorite} from "@/api/favorite";
|
||||
import {postCartAdd} from "@/api/store";
|
||||
import CheckboxIcon from "@/components/CheckboxIcon.vue";
|
||||
|
||||
const ready = ref(false)
|
||||
onMounted(() => {
|
||||
ready.value = true
|
||||
fetchProduct()
|
||||
})
|
||||
|
||||
const navToGoods = (id) => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/shop/GoodsCon/index?id=" + id
|
||||
})
|
||||
}
|
||||
|
||||
// 导航
|
||||
const tabs = ref([
|
||||
{key: 0, label: '商品'},
|
||||
{key: 1, label: '店铺'},
|
||||
{key: 2, label: '视频'},
|
||||
])
|
||||
const tabsIndex = ref(0)
|
||||
const changeTabs = (index) => {
|
||||
if (isManage.value) return
|
||||
tabsIndex.value = index
|
||||
page.value = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const fetchData = () => {
|
||||
switch (tabsIndex.value) {
|
||||
case 0:
|
||||
fetchProduct()
|
||||
break
|
||||
case 1:
|
||||
fetchStore()
|
||||
break
|
||||
case 2:
|
||||
fetchVideo()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const tabsVertical = computed(() => {
|
||||
if (tabsIndex.value === 0) return 1
|
||||
if (tabsIndex.value === 1) return -1
|
||||
if (tabsIndex.value === 2) return 0
|
||||
})
|
||||
|
||||
// 管理
|
||||
const isManage = ref(false)
|
||||
const changeManage = () => {
|
||||
isManage.value = !isManage.value
|
||||
}
|
||||
const isAll = ref(false)
|
||||
|
||||
const selectCount = computed(() => {
|
||||
let count = 0, countList
|
||||
switch (tabsIndex.value) {
|
||||
case 0:
|
||||
countList = productList.value
|
||||
break
|
||||
case 1:
|
||||
countList = storeList.value
|
||||
break
|
||||
case 2:
|
||||
countList = videoList.value
|
||||
break
|
||||
}
|
||||
|
||||
countList.forEach(item => {
|
||||
if (item['state']) count++
|
||||
})
|
||||
return count
|
||||
})
|
||||
const onChange = (state, mark) => {
|
||||
if (mark[0] === -1) {
|
||||
isAll.value = state
|
||||
handleAll(state)
|
||||
return
|
||||
}
|
||||
|
||||
switch (tabsIndex.value) {
|
||||
case 0:
|
||||
productList.value[mark]['state'] = state
|
||||
break
|
||||
case 1:
|
||||
storeList.value[mark]['state'] = state
|
||||
break
|
||||
case 2:
|
||||
videoList.value[mark]['state'] = state
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const handleAll = (state) => {
|
||||
switch (tabsIndex.value) {
|
||||
case 0:
|
||||
productList.value.forEach(item => item.state = state)
|
||||
break
|
||||
case 1:
|
||||
storeList.value.forEach(item => item.state = state)
|
||||
break
|
||||
case 2:
|
||||
videoList.value.forEach(item => item.state = state)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const remove = async () => {
|
||||
uni.showModal({
|
||||
title: '确认删除已选项目?',
|
||||
content: '',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '确认',
|
||||
success: async (r) => {
|
||||
if (r.confirm) {
|
||||
let ids = []
|
||||
switch (tabsIndex.value) {
|
||||
case 0:
|
||||
productList.value.forEach(item => {
|
||||
if (item['state']) ids.push(item.id)
|
||||
})
|
||||
break
|
||||
case 1:
|
||||
storeList.value.forEach(item => {
|
||||
if (item['state']) ids.push(item.id)
|
||||
})
|
||||
break
|
||||
case 2:
|
||||
videoList.value.forEach(item => {
|
||||
if (item['state']) ids.push(item.id)
|
||||
})
|
||||
break
|
||||
}
|
||||
|
||||
const res = await removeFavorite(ids)
|
||||
if (res.success) {
|
||||
isAll.value = false
|
||||
fetchData()
|
||||
removeAfter()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const removeAfter = () => {
|
||||
switch (tabsIndex.value) {
|
||||
case 0:
|
||||
productList.value = productList.value.filter(item => !item['state'])
|
||||
break
|
||||
case 1:
|
||||
storeList.value = storeList.value.filter(item => !item['state'])
|
||||
break
|
||||
case 2:
|
||||
videoList.value = videoList.value.filter(item => !item['state'])
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 列表
|
||||
const page = ref(1)
|
||||
const productList = ref([])
|
||||
const fetchProduct = async () => {
|
||||
if (page.value === 1) {
|
||||
productList.value = []
|
||||
}
|
||||
const res = await getProductList(page.value)
|
||||
if (res.success) {
|
||||
res.data['records']?.forEach(item => {
|
||||
item.state = false
|
||||
productList.value.push(item)
|
||||
})
|
||||
page.value++
|
||||
}
|
||||
}
|
||||
|
||||
const storeList = ref([])
|
||||
const fetchStore = async () => {
|
||||
if (page.value === 1) {
|
||||
storeList.value = []
|
||||
}
|
||||
const res = await getStoreList(page.value)
|
||||
if (res.success) {
|
||||
res.data['records']?.forEach(item => {
|
||||
item.time = uni.$u.timeFrom(Date.parse(item.createTime))
|
||||
item.state = false
|
||||
storeList.value.push(item)
|
||||
})
|
||||
page.value++
|
||||
}
|
||||
}
|
||||
|
||||
const videoList = ref([])
|
||||
const fetchVideo = async () => {
|
||||
if (page.value === 1) {
|
||||
videoList.value = []
|
||||
}
|
||||
const res = await getVideoList(page.value)
|
||||
if (res.success) {
|
||||
res.data['records']?.forEach(item => {
|
||||
item.state = false
|
||||
videoList.value.push(item)
|
||||
})
|
||||
page.value++
|
||||
}
|
||||
}
|
||||
|
||||
const addCart = async (item) => {
|
||||
const param = {
|
||||
productId: item.productId,
|
||||
uniqueId: item.uniqueId,
|
||||
cartNum: 1
|
||||
}
|
||||
const res = await postCartAdd(param)
|
||||
if (res.success) {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
}).catch()
|
||||
}
|
||||
}
|
||||
|
||||
const navToStore = (id) => {
|
||||
uni.navigateTo({
|
||||
url: '/pagesInn/inn/innHome?id=' + id
|
||||
})
|
||||
}
|
||||
|
||||
const navToVideo = (videoId) => {
|
||||
if (isManage.value) return
|
||||
uni.navigateTo({
|
||||
url: '/pkg-video/views/watch?videoId=' + videoId
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.my-tabs {
|
||||
width: 686rpx;
|
||||
height: 72rpx;
|
||||
margin: 24rpx 32rpx 0;
|
||||
border-radius: 40rpx;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
|
||||
.tab-item {
|
||||
position: relative;
|
||||
width: 230rpx;
|
||||
color: #333333;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
border-radius: 40rpx;
|
||||
background: #C41617;
|
||||
color: #FFFFFF;
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.has-vertical:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 2rpx;
|
||||
height: 36rpx;
|
||||
background: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.manage {
|
||||
margin: 12rpx 32rpx 18rpx;
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-box {
|
||||
height: calc(100vh - 168rpx);
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.manage-state {
|
||||
height: calc(100vh - 268rpx);
|
||||
}
|
||||
|
||||
.item-commodity {
|
||||
padding: 24rpx 30rpx;
|
||||
|
||||
.cover {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
margin-right: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.more-t {
|
||||
color: #333333;
|
||||
font-size: 34rpx;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
.sub {
|
||||
margin-top: 10rpx;
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.cart {
|
||||
width: 84rpx;
|
||||
height: 56rpx;
|
||||
margin-top: 14rpx;
|
||||
background: #C41617;
|
||||
border-radius: 28rpx;
|
||||
|
||||
image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-store {
|
||||
padding: 34rpx 32rpx 34rpx 30rpx;
|
||||
|
||||
.cover {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 10rpx;
|
||||
border: 4rpx solid #E92727;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.one-t {
|
||||
width: 360rpx;
|
||||
color: #333333;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.sub {
|
||||
margin-top: 8rpx;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.btn-nav {
|
||||
width: 172rpx;
|
||||
height: 56rpx;
|
||||
border: 2px solid #E92727;
|
||||
border-radius: 28rpx;
|
||||
color: #E92727;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.img-product {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
margin-right: 10rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-video {
|
||||
position: relative;
|
||||
width: 218rpx;
|
||||
height: 320rpx;
|
||||
margin-right: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.video-check {
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
top: 20rpx;
|
||||
}
|
||||
|
||||
.img-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item-mask {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 218rpx;
|
||||
height: 96rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 8rpx;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
|
||||
.icon-heart {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-video:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.fixed-manage {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
height: 100rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.16);
|
||||
|
||||
.btn {
|
||||
width: 196rpx;
|
||||
height: 100rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+107
-134
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<view class="user-personalData">
|
||||
<view class="top-box" :style="{'backgroundImage':`url(${webUrl}/20220925102928757633.png)`}">
|
||||
<view class="top-box" :style="{'backgroundImage':`url(${webUrl}/20240109234153916906.png)`}">
|
||||
<view class="flex ai-center">
|
||||
<image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></image-cropper>
|
||||
<view style="position: relative" @tap="chooseImage">
|
||||
<image class="cover" :src="avatar"/>
|
||||
<image class="btn-change" :src="webUrl+'/20220925111121285647.png'"/>
|
||||
<view class="btn-change flex jc-center ai-center">更换头像</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="name">{{ userInfo.nickname }}</view>
|
||||
@@ -62,56 +62,19 @@
|
||||
|
||||
<button class="btn-save" @click="submit">保存修改</button>
|
||||
|
||||
<!-- <view class="list">-->
|
||||
<!-- <view class="item acea-row row-between-wrapper">-->
|
||||
<!-- <view>昵称</view>-->
|
||||
<!-- <view class="input">-->
|
||||
<!-- <input type="text" v-model="userInfo.nickname"/>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="item acea-row row-between-wrapper">-->
|
||||
<!-- <view>ID号</view>-->
|
||||
<!-- <view class="input acea-row row-between-wrapper">-->
|
||||
<!-- <input type="text" :value="userInfo.uid" disabled class="id"/>-->
|
||||
<!-- <text class="iconfont icon-suozi"></text>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="item acea-row row-between-wrapper" @click="bindPhone">-->
|
||||
<!-- <view>手机号</view>-->
|
||||
<!-- <view class="input acea-row row-between-wrapper">-->
|
||||
<!-- <input type="text" disabled v-if="userInfo.phone" v-model="userInfo.phone" class="id"/>-->
|
||||
<!-- <input type="text" v-else value="未绑定" disabled class="id"/>-->
|
||||
<!-- <text class="iconfont icon-jiantou"></text>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="item acea-row row-between-wrapper" @click="payPwdClick">-->
|
||||
<!-- <view>支付密码</view>-->
|
||||
<!-- <view class="input acea-row row-right">-->
|
||||
<!-- <text class="iconfont icon-jiantou"></text>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="modifyBnt bg-color-lightred" @click="submit">保存修改</view>-->
|
||||
<view
|
||||
class="logOut cart-color acea-row row-center-wrapper"
|
||||
@click="logout"
|
||||
v-if="$deviceType=='app'"
|
||||
>退出登录
|
||||
</view>
|
||||
<!-- <view-->
|
||||
<!-- class="logOut cart-color acea-row row-center-wrapper"-->
|
||||
<!-- @click="logout"-->
|
||||
<!-- v-if="$deviceType=='app'"-->
|
||||
<!-- >退出登录-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from "vuex";
|
||||
import {trim, isWeixin, chooseImage, uploadImage} from "@/utils";
|
||||
import {
|
||||
postUserEdit,
|
||||
getLogout,
|
||||
switchH5Login
|
||||
} from "@/api/user";
|
||||
import cookie from "@/utils/store/cookie";
|
||||
import store from "@//store";
|
||||
import dayjs from "dayjs";
|
||||
import {isWeixin, trim, uploadImage} from "@/utils";
|
||||
import {postUserEdit} from "@/api/user";
|
||||
import ImageCropper from "@/pkg_user/components/invinbg-image-cropper/invinbg-image-cropper.vue";
|
||||
|
||||
export default {
|
||||
@@ -173,44 +136,44 @@ export default {
|
||||
this.$yrouter.push("/pkg_user/views/bindPhone");
|
||||
}
|
||||
},
|
||||
switchAccounts: function (index) {
|
||||
let that = this;
|
||||
this.userIndex = index;
|
||||
let userInfo = this.switchUserInfo[this.userIndex];
|
||||
if (this.switchUserInfo.length <= 1) return true;
|
||||
if (userInfo === undefined) {
|
||||
uni.showToast({
|
||||
title: "切换的账号不存在",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (userInfo.user_type === "h5") {
|
||||
switchH5Login()
|
||||
.then(({data}) => {
|
||||
uni.hideLoading();
|
||||
const expires_time = dayjs(data.expires_time);
|
||||
store.commit("login", data.token, expires_time);
|
||||
that.$emit("changeswitch", false);
|
||||
location.reload();
|
||||
})
|
||||
.catch(err => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title:
|
||||
err.msg || err.response.data.msg || err.response.data.message,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
});
|
||||
} else {
|
||||
cookie.set("loginType", "wechat", 60);
|
||||
uni.hideLoading();
|
||||
this.$store.commit("logout");
|
||||
this.$emit("changeswitch", false);
|
||||
}
|
||||
},
|
||||
// switchAccounts: function (index) {
|
||||
// let that = this;
|
||||
// this.userIndex = index;
|
||||
// let userInfo = this.switchUserInfo[this.userIndex];
|
||||
// if (this.switchUserInfo.length <= 1) return true;
|
||||
// if (userInfo === undefined) {
|
||||
// uni.showToast({
|
||||
// title: "切换的账号不存在",
|
||||
// icon: "none",
|
||||
// duration: 2000
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
// if (userInfo.user_type === "h5") {
|
||||
// switchH5Login()
|
||||
// .then(({data}) => {
|
||||
// uni.hideLoading();
|
||||
// const expires_time = dayjs(data.expires_time);
|
||||
// store.commit("login", data.token, expires_time);
|
||||
// that.$emit("changeswitch", false);
|
||||
// location.reload();
|
||||
// })
|
||||
// .catch(err => {
|
||||
// uni.hideLoading();
|
||||
// uni.showToast({
|
||||
// title:
|
||||
// err.msg || err.response.data.msg || err.response.data.message,
|
||||
// icon: "none",
|
||||
// duration: 2000
|
||||
// });
|
||||
// });
|
||||
// } else {
|
||||
// cookie.set("loginType", "wechat", 60);
|
||||
// uni.hideLoading();
|
||||
// this.$store.commit("logout");
|
||||
// this.$emit("changeswitch", false);
|
||||
// }
|
||||
// },
|
||||
chooseImage() {
|
||||
uni.chooseImage({
|
||||
count: 1, //默认9
|
||||
@@ -250,36 +213,34 @@ export default {
|
||||
}
|
||||
);
|
||||
},
|
||||
logout: function () {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确认退出登录?",
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
getLogout()
|
||||
.then(res => {
|
||||
this.$store.commit("logout");
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/user/Login/index",
|
||||
query: {}
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
// console.log("用户点击取消");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// logout: function () {
|
||||
// uni.showModal({
|
||||
// title: "提示",
|
||||
// content: "确认退出登录?",
|
||||
// success: function (res) {
|
||||
// if (res.confirm) {
|
||||
// getLogout()
|
||||
// .then(res => {
|
||||
// this.$store.commit("logout");
|
||||
// this.$yrouter.replace({
|
||||
// path: "/pages/user/Login/index",
|
||||
// query: {}
|
||||
// });
|
||||
// })
|
||||
// .catch(() => {
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.user-personalData {
|
||||
min-height: 100vh;
|
||||
background: #F9F9F9;
|
||||
background: #F6F6F6;
|
||||
|
||||
view {
|
||||
box-sizing: border-box;
|
||||
@@ -287,42 +248,49 @@ export default {
|
||||
|
||||
.top-box {
|
||||
width: 100vw;
|
||||
height: 332.5rpx;
|
||||
padding: 94rpx 0 0 104rpx;
|
||||
background-size: 750rpx 332.5rpx;
|
||||
height: 396.5rpx;
|
||||
padding: 86rpx 0 0 76rpx;
|
||||
background-size: 750rpx 396.5rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
.cover {
|
||||
width: 136rpx;
|
||||
height: 136rpx;
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 42rpx;
|
||||
margin-right: 44rpx;
|
||||
}
|
||||
|
||||
.btn-change {
|
||||
position: absolute;
|
||||
top: 100rpx;
|
||||
left: 13rpx;
|
||||
left: 0;
|
||||
top: 98rpx;
|
||||
width: 110rpx;
|
||||
height: 44rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #FFFFFF;
|
||||
color: #333333;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 32rpx;
|
||||
line-height: 48rpx;
|
||||
font-size: 36rpx;
|
||||
line-height: 52rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.phone {
|
||||
margin-top: 22rpx;
|
||||
margin-top: 18rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cell-box {
|
||||
margin: 54rpx 32rpx;
|
||||
padding: 0 25rpx;
|
||||
width: 686rpx;
|
||||
height: 406rpx;
|
||||
margin: -130rpx 32rpx 0;
|
||||
padding: 0 40rpx 20rpx;
|
||||
box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 12rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
@@ -331,36 +299,41 @@ export default {
|
||||
}
|
||||
|
||||
.cell {
|
||||
padding: 32rpx 0 20rpx;
|
||||
border-bottom: 1rpx solid #E8E9E9;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #ECECEE;
|
||||
|
||||
.title {
|
||||
width: 112rpx;
|
||||
margin-right: 40rpx;
|
||||
width: 160rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #999999;
|
||||
font-size: 32rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
image {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
margin: 0 32rpx;
|
||||
background: #FE5261;
|
||||
position: fixed;
|
||||
left: 32rpx;
|
||||
bottom: 160rpx;
|
||||
width: 686rpx;
|
||||
border-radius: 40rpx;
|
||||
background: #C41617;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -144,7 +144,7 @@ export default {
|
||||
return this.$force2Decimal(sxf);
|
||||
},
|
||||
goCashRecord() {
|
||||
this.$yrouter.push("/pages/user/promotion/CashRecord/index");
|
||||
this.$yrouter.push('/pkg_user/views/withdrawalLog');
|
||||
},
|
||||
clearNoNum: function (value) {
|
||||
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<scroll-view class="scroll-body" scroll-y @scrolltolower="scrollToLower" v-if="ready">
|
||||
|
||||
<view v-for="(group,gIndex) in list" :key="gIndex">
|
||||
<view style="padding: 24rpx 32rpx 20rpx">
|
||||
<view style="color:#333333;font-size: 28rpx">{{ group.month }}</view>
|
||||
<view style="margin-top: 10rpx;color:#999999;font-size: 24rpx">提现￥{{ group.amount }}</view>
|
||||
</view>
|
||||
|
||||
<view class="logs">
|
||||
<view class="item flex jc-between" v-for="(item,index) in group['extracts']" :key="index">
|
||||
<view class="flex">
|
||||
<image style="width: 48rpx;height: 48rpx" :src="webUrl+'/20240106215333263739.png'" mode="scaleToFill"/>
|
||||
|
||||
<view style="margin-left: 10rpx;">
|
||||
<view style="color:#333333;font-size: 32rpx;">提现
|
||||
<text class="state-red"
|
||||
:class="{'state-gray':item['status']===-1,'state-green':item['status']===1}">
|
||||
({{ item['status'] === -1 ? '提现失败' : item['status'] === 1 ? '已提现' : '提现中' }})
|
||||
</text>
|
||||
</view>
|
||||
<view style="margin-top: 10rpx;color:#666666;font-size: 28rpx">2023-08-21 16:10:10</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="color:#E92727;font-size: 32rpx;">￥{{ item['extractPrice'] }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref} from '@vue/composition-api'
|
||||
import {VUE_APP_RESOURCES_URL as webUrl} from '../../config/index'
|
||||
import {payoutLog} from "@/api/user";
|
||||
|
||||
const ready = ref(false)
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
ready.value = true
|
||||
})
|
||||
const list = ref([])
|
||||
const page = ref(1)
|
||||
const fetchData = async () => {
|
||||
const res = await payoutLog(page.value)
|
||||
if (res.success) {
|
||||
let count = 0
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
count++
|
||||
list.value.push(res.data[i])
|
||||
}
|
||||
if (count < 10 && page.value === 1) scrollToLower()
|
||||
}
|
||||
}
|
||||
|
||||
const scrollToLower = () => {
|
||||
page.value++
|
||||
fetchData()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
view {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.scroll-body {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.logs {
|
||||
padding: 0 32rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.item {
|
||||
padding: 20rpx 0 26rpx;
|
||||
border-bottom: 1rpx solid #ECECEE;
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.state-red {
|
||||
color: #FD5749;
|
||||
}
|
||||
|
||||
.state-gray {
|
||||
color: #B3AFAF;
|
||||
}
|
||||
|
||||
.state-green {
|
||||
color: #2DBA7B;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+45
-4
@@ -85,6 +85,47 @@ export function formatDateTime(time, format) {
|
||||
});
|
||||
}
|
||||
|
||||
export function timeNow(updateTime) {
|
||||
if (updateTime === null) {
|
||||
return ''
|
||||
}
|
||||
let now = new Date().getTime()
|
||||
let second = Math.floor((now - updateTime) / (1000))
|
||||
let minute = Math.floor(second / 60)
|
||||
let hour = Math.floor(minute / 60)
|
||||
let day = Math.floor(hour / 24)
|
||||
let month = Math.floor(day / 31)
|
||||
let year = Math.floor(month / 12)
|
||||
|
||||
console.log(hour);
|
||||
console.log(minute);
|
||||
if (year > 0) {
|
||||
return year + '年前'
|
||||
} else if (month > 0) {
|
||||
return month + '月前'
|
||||
} else if (day > 0) {
|
||||
let ret = day + '天前'
|
||||
if (day >= 7 && day < 14) {
|
||||
ret = '1周前'
|
||||
} else if (day >= 14 && day < 21) {
|
||||
ret = '2周前'
|
||||
} else if (day >= 21 && day < 28) {
|
||||
ret = '3周前'
|
||||
} else if (day >= 28 && day < 31) {
|
||||
ret = '4周前'
|
||||
}
|
||||
return ret
|
||||
} else if (hour > 0) {
|
||||
return hour + '小时前'
|
||||
} else if (minute > 0) {
|
||||
return minute + '分钟前'
|
||||
} else if (second > 0) {
|
||||
return second + '秒前'
|
||||
} else {
|
||||
return '刚刚'
|
||||
}
|
||||
}
|
||||
|
||||
export function diffDay(start, end) {
|
||||
var dateBegin = new Date(start.replace(/-/g, "/"));
|
||||
var dateEnd = new Date(end.replace(/-/g, "/"));
|
||||
@@ -426,7 +467,7 @@ export const handleGetUserInfo = () => {
|
||||
}
|
||||
|
||||
if (url == '/pages/home/index' || url == '/pages/shop/GoodsClass/index' || url ==
|
||||
'/pages/shop/ShoppingCart/index' || url == '/pages/user/User/index') {
|
||||
'/pages/cart' || url == '/pages/user/User/index') {
|
||||
switchTab({
|
||||
path: `${url}`,
|
||||
query
|
||||
@@ -559,7 +600,7 @@ export const handleLoginStatus = (location, complete, fail, success) => {
|
||||
})
|
||||
// if (isAuth) {
|
||||
// // 有token
|
||||
// if (path == '/pages/home/index' || path == '/pages/shop/GoodsClass/index' || path == '/pages/shop/ShoppingCart/index' || path == '/pages/user/User/index') {
|
||||
// if (path == '/pages/home/index' || path == '/pages/shop/GoodsClass/index' || path == '/pages/cart' || path == '/pages/user/User/index') {
|
||||
// // switchTab({
|
||||
// // path: parseUrl(location),
|
||||
// // })
|
||||
@@ -612,7 +653,7 @@ export async function routerPermissions(url, type) {
|
||||
login(loginInfo).then(res => {
|
||||
// 登录成功，跳转到需要跳转的页面
|
||||
store.commit("updateAuthorizationPage", false);
|
||||
if (path == '/pages/shop/ShoppingCart/index' || path == '/pages/user/User/index') {
|
||||
if (path == '/pages/cart' || path == '/pages/user/User/index') {
|
||||
return
|
||||
}
|
||||
if (type == 'reLaunch') {
|
||||
@@ -646,7 +687,7 @@ export async function routerPermissions(url, type) {
|
||||
})
|
||||
} else {
|
||||
// 跳转到登录页面或者授权页面
|
||||
// path == '/pages/shop/ShoppingCart/index' ||
|
||||
// path == '/pages/cart' ||
|
||||
if ( path == '/pages/user/User/index') {
|
||||
switchTab({
|
||||
path,
|
||||
|
||||
+17
-11
@@ -1,6 +1,6 @@
|
||||
import Fly from "flyio/dist/npm/wx";
|
||||
import { handleLoginFailure } from "@/utils";
|
||||
import { VUE_APP_API_URL } from "@/config";
|
||||
import {handleLoginFailure} from "@/utils";
|
||||
import {VUE_APP_API_URL} from "@/config";
|
||||
import cookie from "@/utils/store/cookie";
|
||||
|
||||
const fly = new Fly()
|
||||
@@ -17,20 +17,20 @@ fly.interceptors.response.use(
|
||||
console.log('发送请求失败', error)
|
||||
console.log('————————')
|
||||
handleLoginFailure();
|
||||
return Promise.reject({ msg: "未登录", toLogin: true });
|
||||
return Promise.reject({msg: "未登录", toLogin: true});
|
||||
}
|
||||
if (error.status == 401) {
|
||||
console.log('————————')
|
||||
console.log('登录失效 401', error)
|
||||
console.log('————————')
|
||||
handleLoginFailure();
|
||||
return Promise.reject({ msg: "未登录", toLogin: true });
|
||||
return Promise.reject({msg: "未登录", toLogin: true});
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
const defaultOpt = { login: true };
|
||||
const defaultOpt = {login: true};
|
||||
|
||||
function baseRequest(options) {
|
||||
|
||||
@@ -45,7 +45,7 @@ function baseRequest(options) {
|
||||
}
|
||||
|
||||
// 结构请求需要的参数
|
||||
const { url, params, data, login, ...option } = options
|
||||
const {url, params, data, login, ...option} = options
|
||||
|
||||
// 发起请求
|
||||
return fly.request(url, params || data, {
|
||||
@@ -53,15 +53,21 @@ function baseRequest(options) {
|
||||
}).then(res => {
|
||||
const data = res.data || {};
|
||||
if (res.status !== 200) {
|
||||
return Promise.reject({ msg: "请求失败", res, data });
|
||||
return Promise.reject({msg: "请求失败", res, data});
|
||||
}
|
||||
if ([401, 403].indexOf(data.status) !== -1) {
|
||||
handleLoginFailure();
|
||||
return Promise.reject({ msg: res.data.msg, res, data, toLogin: true });
|
||||
return Promise.reject({msg: res.data.msg, res, data, toLogin: true});
|
||||
} else if (data.status === 200) {
|
||||
return Promise.resolve(data, res);
|
||||
} else {
|
||||
return Promise.reject({ msg: res.data.msg, res, data });
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none',
|
||||
success() {
|
||||
}
|
||||
})
|
||||
return Promise.reject({msg: res.data.msg, res, data});
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -81,7 +87,7 @@ const request = ["post", "put", "patch"].reduce((request, method) => {
|
||||
*/
|
||||
request[method] = (url, data = {}, options = {}) => {
|
||||
return baseRequest(
|
||||
Object.assign({ url, data, method }, defaultOpt, options)
|
||||
Object.assign({url, data, method}, defaultOpt, options)
|
||||
);
|
||||
};
|
||||
return request;
|
||||
@@ -97,7 +103,7 @@ const request = ["post", "put", "patch"].reduce((request, method) => {
|
||||
*/
|
||||
request[method] = (url, params = {}, options = {}) => {
|
||||
return baseRequest(
|
||||
Object.assign({ url, params, method }, defaultOpt, options)
|
||||
Object.assign({url, params, method}, defaultOpt, options)
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
@@ -1,201 +0,0 @@
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright [2021] [Li Dong Qi]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
@@ -1,138 +0,0 @@
|
||||
<br />
|
||||
|
||||
<div align="center">
|
||||
<img src="https://cdn.jsdelivr.net/gh/buuing/cdn/imgs/lucky-canvas.jpg" width="210" alt="logo" />
|
||||
<h1>lucky-canvas 抽奖插件</h1>
|
||||
<p>一个基于 JavaScript 的跨平台 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件</p>
|
||||
<p>
|
||||
<a href="https://github.com/buuing/lucky-canvas/stargazers" target="_black">
|
||||
<img src="https://img.shields.io/github/stars/buuing/lucky-canvas?color=%23ffba15&logo=github&style=flat-square" alt="stars" />
|
||||
</a>
|
||||
<a href="https://github.com/buuing/lucky-canvas/network/members" target="_black">
|
||||
<img src="https://img.shields.io/github/forks/buuing/lucky-canvas?color=%23ffba15&logo=github&style=flat-square" alt="forks" />
|
||||
</a>
|
||||
<a href="https://github.com/buuing" target="_black">
|
||||
<img src="https://img.shields.io/badge/Author-%20buuing%20-7289da.svg?&logo=github&style=flat-square" alt="author" />
|
||||
</a>
|
||||
<a href="https://github.com/buuing/lucky-canvas/blob/master/LICENSE" target="_black">
|
||||
<img src="https://img.shields.io/github/license/buuing/lucky-canvas?color=%232dce89&logo=github&style=flat-square" alt="license" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|适配框架|npm下载量|CDN使用量|
|
||||
| :-: | :-: | :-: |
|
||||
|[`JS` / `JQ` 中使用](https://100px.net/usage/js.html)|<a href="https://www.npmjs.com/package/lucky-canvas" target="_black"><img src="https://img.shields.io/npm/dm/lucky-canvas?color=%23ffba15&logo=npm&style=flat-square" alt="downloads" /></a>|<a href="https://www.jsdelivr.com/package/npm/lucky-canvas" target="_black"><img src="https://data.jsdelivr.com/v1/package/npm/lucky-canvas/badge" alt="downloads" /></a>|
|
||||
|[`Vue` 中使用](https://100px.net/usage/vue.html)|<a href="https://www.npmjs.com/package/@lucky-canvas/vue" target="_black"><img src="https://img.shields.io/npm/dm/@lucky-canvas/vue?color=%23ffba15&logo=npm&style=flat-square" alt="downloads" /></a>|<a href="https://www.jsdelivr.com/package/npm/@lucky-canvas/vue" target="_black"><img src="https://data.jsdelivr.com/v1/package/npm/@lucky-canvas/vue/badge" alt="downloads" /></a>|
|
||||
|[`React` 中使用](https://100px.net/usage/react.html)|<a href="https://www.npmjs.com/package/@lucky-canvas/react" target="_black"><img src="https://img.shields.io/npm/dm/@lucky-canvas/react?color=%23ffba15&logo=npm&style=flat-square" alt="downloads" /></a>|-|
|
||||
|[`UniApp` 中使用](https://100px.net/usage/uni.html)|<a href="https://www.npmjs.com/package/@lucky-canvas/uni" target="_black"><img src="https://img.shields.io/npm/dm/@lucky-canvas/uni?color=%23ffba15&logo=npm&style=flat-square" alt="downloads" /></a>|-|
|
||||
|[`Taro3.x` 中使用](https://100px.net/usage/taro.html)|<a href="https://www.npmjs.com/package/@lucky-canvas/taro" target="_black"><img src="https://img.shields.io/npm/dm/@lucky-canvas/taro?color=%23ffba15&logo=npm&style=flat-square" alt="downloads" /></a>|-|
|
||||
|[`微信小程序` 中使用](https://100px.net/usage/wx.html)|<a href="https://www.npmjs.com/package/@lucky-canvas/mini" target="_black"><img src="https://img.shields.io/npm/dm/@lucky-canvas/mini?color=%23ffba15&logo=npm&style=flat-square" alt="downloads" /></a>|-|
|
||||
|
||||
<br />
|
||||
|
||||
## 官方文档 & Demo演示
|
||||
|
||||
> **中文**：[https://100px.net](https://100px.net)
|
||||
|
||||
> **English**：**If anyone can help translate the document, please contact me** `ldq404@qq.com`
|
||||
|
||||
<br />
|
||||
|
||||
## 在 uni-app 中使用
|
||||
|
||||
### 1. 安装插件
|
||||
|
||||
- 你可以选择通过 `HBuilderX` 导入插件： [https://ext.dcloud.net.cn/plugin?id=3499](https://ext.dcloud.net.cn/plugin?id=3499)
|
||||
|
||||
- 也可以选择通过 `npm` / `yarn` 安装
|
||||
|
||||
```shell
|
||||
# npm 安装：
|
||||
npm install @lucky-canvas/uni
|
||||
|
||||
# yarn 安装：
|
||||
yarn add @lucky-canvas/uni
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
### 2. 引入并使用
|
||||
|
||||
```html
|
||||
<view>
|
||||
<!-- 大转盘抽奖 -->
|
||||
<LuckyWheel
|
||||
width="600rpx"
|
||||
height="600rpx"
|
||||
...你的配置
|
||||
/>
|
||||
<!-- 九宫格抽奖 -->
|
||||
<LuckyGrid
|
||||
width="600rpx"
|
||||
height="600rpx"
|
||||
...你的配置
|
||||
/>
|
||||
</view>
|
||||
```
|
||||
|
||||
```js
|
||||
// npm 下载会默认到 node_modules 里面，直接引入包名即可
|
||||
import LuckyWheel from '@lucky-canvas/uni/lucky-wheel' // 大转盘
|
||||
import LuckyGrid from '@lucky-canvas/uni/lucky-grid' // 九宫格
|
||||
|
||||
// 如果你是通过 HBuilderX 导入插件，那你需要指定一下路径
|
||||
// import LuckyWheel from '@/components/@lucky-canvas/uni/lucky-wheel' // 大转盘
|
||||
// import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid' // 九宫格
|
||||
|
||||
export default {
|
||||
// 注册组件
|
||||
components: { LuckyWheel, LuckyGrid },
|
||||
}
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
### 3. 我提供了一个最基本的 demo 供你用于尝试
|
||||
|
||||
由于 uni-app 渲染 md 的时候会出问题，所以我把 demo 代码放到了文档里
|
||||
|
||||
- [https://100px.net/document/uni-app.html](https://100px.net/document/uni-app.html)
|
||||
|
||||
<br />
|
||||
|
||||
### **4. 补充说明**
|
||||
|
||||
- [**如果用着顺手, 可以在 Github 上面点个 <img height="22" align="top" src="https://img.shields.io/github/stars/buuing/lucky-canvas" /> 支持一下(●'◡'●)**](https://github.com/buuing/lucky-canvas)
|
||||
|
||||
- 另外: 如果你修复了某些bug或兼容, 欢迎提给我, 我会把你展示到官网的贡献者列表当中
|
||||
|
||||
|
||||
<br />
|
||||
|
||||
### 5. 常见问题
|
||||
|
||||
1. 转盘层级太高了, 我的弹窗盖不住怎么办?
|
||||
|
||||
> 答: 因为小程序里canvas是原生组件顶层渲染, 我无法控制canvas的层级, 如果你想盖住它也肯简单, 你可以百度搜索`<cover>`组件
|
||||
|
||||
2. 你这些素材, 图片组件从哪下载?
|
||||
|
||||
> 答: 官网里的任何图片素材, 所使用到的图片资源均为学习交流使用, 请勿将其用于商业用途, 由此产生的任何商业纠纷我这边概不负责
|
||||
|
||||
3. xxx属性怎么使用? xxx方法怎么调用?
|
||||
|
||||
> 答: 自己去看文档, 不然难道要我把代码给你写好吗?
|
||||
|
||||
4. 这个属性的效果与官网的描述不一致?
|
||||
|
||||
> 答: 可能有bug, 你可以去github上的issues去提问 (请认真填写模板)
|
||||
|
||||
5. 为什么这个插件不支持app和其他小程序
|
||||
|
||||
> 答: 没时间, 但是希望志同道合的同学来一起参与uniapp的兼容开发
|
||||
|
||||
---
|
||||
|
||||
<font color="blue">作者留言: 为了使我自己保持心情愉悦, 低于5星的提问我用浏览器插件都屏蔽了</font>
|
||||
@@ -1,317 +0,0 @@
|
||||
<template>
|
||||
<view v-if="isShow" class="lucky-box" :style="{ width: boxWidth + 'px', height: boxHeight + 'px' }">
|
||||
<canvas
|
||||
type="2d"
|
||||
id="lucky-grid"
|
||||
canvas-id="lucky-grid"
|
||||
:style="{ width: boxWidth + 'px', height: boxHeight + 'px' }"
|
||||
></canvas>
|
||||
<image
|
||||
v-if="imgSrc"
|
||||
:src="imgSrc"
|
||||
@load="myLucky.clearCanvas()"
|
||||
:style="{ width: boxWidth + 'px', height: boxHeight + 'px' }"
|
||||
></image>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view v-if="btnShow">
|
||||
<view class="lucky-grid-btn" v-for="(btn, index) in btns" :key="index" @click="toPlay(btn, index)" :style="{
|
||||
top: btn.top + 'px',
|
||||
left: btn.left + 'px',
|
||||
width: btn.width + 'px',
|
||||
height: btn.height + 'px',
|
||||
}"></view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<view v-if="btnShow">
|
||||
<cover-view class="lucky-grid-btn" v-for="(btn, index) in btns" :key="index" @click="toPlay(btn, index)" :style="{
|
||||
top: btn.top + 'px',
|
||||
left: btn.left + 'px',
|
||||
width: btn.width + 'px',
|
||||
height: btn.height + 'px',
|
||||
}"></cover-view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 -->
|
||||
<view v-if="myLucky">
|
||||
<div class="lucky-imgs">
|
||||
<div v-for="(block, index) in blocks" :key="index">
|
||||
<div v-if="block.imgs">
|
||||
<div v-for="(img, i) in block.imgs" :key="i">
|
||||
<image :src="img.src" :data-index="index" :data-i="i" @load="e => imgBindload(e, 'blocks')"></image>
|
||||
<image :src="img.activeSrc" :data-index="index" :data-i="i" @load="e => imgBindloadActive(e, 'blocks')"></image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lucky-imgs">
|
||||
<div v-for="(prize, index) in prizes" :key="index">
|
||||
<div v-if="prize.imgs">
|
||||
<div v-for="(img, i) in prize.imgs" :key="i">
|
||||
<image :src="img.src" :data-index="index" :data-i="i" @load="e => imgBindload(e, 'prizes')"></image>
|
||||
<image :src="img.activeSrc" :data-index="index" :data-i="i" @load="e => imgBindloadActive(e, 'prizes')"></image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lucky-imgs">
|
||||
<div v-for="(btn, index) in buttons" :key="index">
|
||||
<div v-if="btn.imgs">
|
||||
<image v-for="(img, i) in btn.imgs" :key="i" :src="img.src" :data-index="index" :data-i="i" @load="e => imgBindload(e, 'buttons')"></image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lucky-imgs">
|
||||
<span v-if="button && button.imgs">
|
||||
<image v-for="(img, i) in button.imgs" :key="i" :src="img.src" :data-i="i" @load="e => imgBindloadBtn(e, 'button')"></image>
|
||||
</span>
|
||||
</div>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { changeUnits, resolveImage, getImage } from './utils.js'
|
||||
import { LuckyGrid } from '../../lucky-canvas'
|
||||
export default {
|
||||
name: 'lucky-grid',
|
||||
data () {
|
||||
return {
|
||||
imgSrc: '',
|
||||
myLucky: null,
|
||||
canvas: null,
|
||||
isShow: false,
|
||||
boxWidth: 100,
|
||||
boxHeight: 100,
|
||||
dpr: 1,
|
||||
btns: [],
|
||||
btnShow: false,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: '600rpx'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '600rpx'
|
||||
},
|
||||
cols: {
|
||||
type: [String, Number],
|
||||
default: 3,
|
||||
},
|
||||
rows: {
|
||||
type: [String, Number],
|
||||
default: 3,
|
||||
},
|
||||
blocks: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
prizes: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
buttons: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
button: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
},
|
||||
defaultConfig: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
defaultStyle: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
activeStyle: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// #ifdef APP-PLUS
|
||||
console.error('该抽奖插件的最新版暂不支持app端, 请通过npm安装旧版本【npm i uni-luck-draw@1.3.9】')
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
this.initLucky()
|
||||
// #endif
|
||||
},
|
||||
watch: {
|
||||
cols (newData) {
|
||||
this.myLucky && (this.myLucky.cols = newData)
|
||||
},
|
||||
rows (newData) {
|
||||
this.myLucky && (this.myLucky.rows = newData)
|
||||
},
|
||||
blocks (newData) {
|
||||
this.myLucky && (this.myLucky.blocks = newData)
|
||||
},
|
||||
prizes (newData) {
|
||||
this.myLucky && (this.myLucky.prizes = newData)
|
||||
},
|
||||
buttons (newData) {
|
||||
this.myLucky && (this.myLucky.buttons = newData)
|
||||
},
|
||||
button (newData) {
|
||||
this.myLucky && (this.myLucky.button = newData)
|
||||
},
|
||||
defaultStyle (newData) {
|
||||
this.myLucky && (this.myLucky.defaultStyle = newData)
|
||||
},
|
||||
defaultConfig (newData) {
|
||||
this.myLucky && (this.myLucky.defaultConfig = newData)
|
||||
},
|
||||
activeStyle (newData) {
|
||||
this.myLucky && (this.myLucky.activeStyle = newData)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async imgBindload (res, name) {
|
||||
const { index, i } = res.currentTarget.dataset
|
||||
const img = this[name][index].imgs[i]
|
||||
resolveImage(img, this.canvas)
|
||||
},
|
||||
async imgBindloadActive (res, name) {
|
||||
const { index, i } = res.currentTarget.dataset
|
||||
const img = this[name][index].imgs[i]
|
||||
resolveImage(img, this.canvas, 'activeSrc', '$activeResolve')
|
||||
},
|
||||
async imgBindloadBtn (res, name) {
|
||||
const { i } = res.currentTarget.dataset
|
||||
const img = this[name].imgs[i]
|
||||
resolveImage(img, this.canvas)
|
||||
},
|
||||
getImage () {
|
||||
return getImage.call(this, 'lucky-grid', this.canvas)
|
||||
},
|
||||
hideCanvas () {
|
||||
// #ifdef MP
|
||||
this.getImage().then(res => {
|
||||
this.imgSrc = res.tempFilePath
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
initLucky () {
|
||||
this.boxWidth = changeUnits(this.width)
|
||||
this.boxHeight = changeUnits(this.height)
|
||||
this.isShow = true
|
||||
// 某些情况下获取不到 canvas
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.draw()
|
||||
})
|
||||
})
|
||||
},
|
||||
draw () {
|
||||
const _this = this
|
||||
uni.createSelectorQuery().in(this).select('#lucky-grid').fields({
|
||||
node: true, size: true
|
||||
}).exec((res) => {
|
||||
// #ifdef H5
|
||||
res[0].node = document.querySelector('#lucky-grid canvas')
|
||||
// #endif
|
||||
if (!res[0] || !res[0].node) return console.error('lucky-canvas 获取不到 canvas 标签')
|
||||
const { node, width, height } = res[0]
|
||||
const canvas = this.canvas = node
|
||||
const ctx = this.ctx = canvas.getContext('2d')
|
||||
const dpr = this.dpr = uni.getSystemInfoSync().pixelRatio
|
||||
// #ifndef H5
|
||||
canvas.width = width * dpr
|
||||
canvas.height = height * dpr
|
||||
ctx.scale(dpr, dpr)
|
||||
// #endif
|
||||
const myLucky = this.myLucky = new LuckyGrid({
|
||||
// #ifdef H5
|
||||
flag: 'WEB',
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
flag: 'MP-WX',
|
||||
// #endif
|
||||
ctx,
|
||||
dpr,
|
||||
setTimeout,
|
||||
clearTimeout,
|
||||
setInterval,
|
||||
clearInterval,
|
||||
// #ifdef H5
|
||||
rAF: requestAnimationFrame,
|
||||
// #endif
|
||||
unitFunc: (num, unit) => changeUnits(num + unit),
|
||||
afterInit: function () {
|
||||
[..._this.$props.buttons, _this.$props.button].forEach((btn, index) => {
|
||||
if (!btn) return
|
||||
const [left, top, width, height] = this.getGeometricProperty([
|
||||
btn.x,
|
||||
btn.y,
|
||||
btn.col || 1,
|
||||
btn.row || 1
|
||||
])
|
||||
_this.btns[index] = { top, left, width, height }
|
||||
})
|
||||
_this.$forceUpdate()
|
||||
},
|
||||
afterStart: () => {
|
||||
this.imgSrc = ''
|
||||
},
|
||||
}, {
|
||||
...this.$props,
|
||||
width,
|
||||
height,
|
||||
start: (...rest) => {
|
||||
this.$emit('start', ...rest)
|
||||
},
|
||||
end: (...rest) => {
|
||||
this.$emit('end', ...rest)
|
||||
this.hideCanvas()
|
||||
},
|
||||
})
|
||||
this.btnShow = true
|
||||
})
|
||||
},
|
||||
toPlay (btn, index) {
|
||||
this.myLucky.startCallback(btn, this.$props.buttons[index])
|
||||
},
|
||||
init () {
|
||||
this.myLucky.init()
|
||||
},
|
||||
play (...rest) {
|
||||
this.myLucky.play(...rest)
|
||||
},
|
||||
stop (...rest) {
|
||||
this.myLucky.stop(...rest)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lucky-box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.lucky-box canvas {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.lucky-grid-btn {
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.lucky-imgs {
|
||||
width: 0;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -1,255 +0,0 @@
|
||||
<template>
|
||||
<view v-if="isShow" class="lucky-box" :style="{ width: boxWidth + 'px', height: boxHeight + 'px' }">
|
||||
<canvas
|
||||
type="2d"
|
||||
id="lucky-wheel"
|
||||
canvas-id="lucky-wheel"
|
||||
:style="{ width: boxWidth + 'px', height: boxHeight + 'px' }"
|
||||
></canvas>
|
||||
<image
|
||||
v-if="imgSrc"
|
||||
:src="imgSrc"
|
||||
@load="myLucky.clearCanvas()"
|
||||
:style="{ width: boxWidth + 'px', height: boxHeight + 'px' }"
|
||||
></image>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="lucky-wheel-btn" @click="toPlay" :style="{ width: btnWidth + 'px', height: btnHeight + 'px' }"></view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<cover-view class="lucky-wheel-btn" @click="toPlay" :style="{ width: btnWidth + 'px', height: btnHeight + 'px' }"></cover-view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 -->
|
||||
<view v-if="myLucky">
|
||||
<div class="lucky-imgs">
|
||||
<div v-for="(block, index) in blocks" :key="index">
|
||||
<div v-if="block.imgs">
|
||||
<image v-for="(img, i) in block.imgs" :key="i" :src="img.src" @load="e => imgBindload(e, 'blocks', index, i)"></image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lucky-imgs">
|
||||
<div v-for="(prize, index) in prizes" :key="index">
|
||||
<div v-if="prize.imgs">
|
||||
<image v-for="(img, i) in prize.imgs" :key="i" :src="img.src" @load="e => imgBindload(e, 'prizes', index, i)"></image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lucky-imgs">
|
||||
<div v-for="(btn, index) in buttons" :key="index">
|
||||
<div v-if="btn.imgs">
|
||||
<image v-for="(img, i) in btn.imgs" :key="i" :src="img.src" @load="e => imgBindload(e, 'buttons', index, i)"></image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { changeUnits, resolveImage, getImage } from './utils.js'
|
||||
import { LuckyWheel } from '../../lucky-canvas'
|
||||
export default {
|
||||
name: 'lucky-wheel',
|
||||
data () {
|
||||
return {
|
||||
imgSrc: '',
|
||||
myLucky: null,
|
||||
canvas: null,
|
||||
isShow: false,
|
||||
boxWidth: 100,
|
||||
boxHeight: 100,
|
||||
btnWidth: 0,
|
||||
btnHeight: 0,
|
||||
dpr: 1,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: '600rpx'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '600rpx'
|
||||
},
|
||||
blocks: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
prizes: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
buttons: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
defaultConfig: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
defaultStyle: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
// #ifdef APP-PLUS
|
||||
console.error('该抽奖插件的最新版暂不支持app端, 请通过npm安装旧版本【npm i uni-luck-draw@1.3.9】')
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
this.initLucky()
|
||||
// #endif
|
||||
},
|
||||
watch: {
|
||||
blocks (newData) {
|
||||
this.myLucky && (this.myLucky.blocks = newData)
|
||||
},
|
||||
prizes (newData) {
|
||||
this.myLucky && (this.myLucky.prizes = newData)
|
||||
},
|
||||
buttons (newData) {
|
||||
this.myLucky && (this.myLucky.buttons = newData)
|
||||
},
|
||||
defaultStyle (newData) {
|
||||
this.myLucky && (this.myLucky.defaultStyle = newData)
|
||||
},
|
||||
defaultConfig (newData) {
|
||||
this.myLucky && (this.myLucky.defaultConfig = newData)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async imgBindload (res, name, index, i) {
|
||||
const img = this[name][index].imgs[i]
|
||||
resolveImage(img, this.canvas)
|
||||
},
|
||||
getImage () {
|
||||
return getImage.call(this, 'lucky-wheel', this.canvas)
|
||||
},
|
||||
hideCanvas () {
|
||||
// #ifdef MP
|
||||
this.getImage().then(res => {
|
||||
this.imgSrc = res.tempFilePath
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
initLucky () {
|
||||
this.boxWidth = changeUnits(this.width)
|
||||
this.boxHeight = changeUnits(this.height)
|
||||
this.isShow = true
|
||||
// 某些情况下获取不到 canvas
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.draw()
|
||||
})
|
||||
})
|
||||
},
|
||||
draw () {
|
||||
const _this = this
|
||||
uni.createSelectorQuery().in(this).select('#lucky-wheel').fields({
|
||||
node: true, size: true
|
||||
}).exec((res) => {
|
||||
// #ifdef H5
|
||||
res[0].node = document.querySelector('#lucky-wheel canvas')
|
||||
// #endif
|
||||
if (!res[0] || !res[0].node) return console.error('lucky-canvas 获取不到 canvas 标签')
|
||||
const { node, width, height } = res[0]
|
||||
const canvas = this.canvas = node
|
||||
const ctx = this.ctx = canvas.getContext('2d')
|
||||
const dpr = this.dpr = uni.getSystemInfoSync().pixelRatio
|
||||
// #ifndef H5
|
||||
canvas.width = width * dpr
|
||||
canvas.height = height * dpr
|
||||
ctx.scale(dpr, dpr)
|
||||
// #endif
|
||||
const Radius = Math.min(width, height) / 2
|
||||
const myLucky = this.myLucky = new LuckyWheel({
|
||||
// #ifdef H5
|
||||
flag: 'WEB',
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
flag: 'MP-WX',
|
||||
// #endif
|
||||
ctx,
|
||||
dpr,
|
||||
setTimeout,
|
||||
clearTimeout,
|
||||
setInterval,
|
||||
clearInterval,
|
||||
// #ifdef H5
|
||||
rAF: requestAnimationFrame,
|
||||
// #endif
|
||||
unitFunc: (num, unit) => changeUnits(num + unit),
|
||||
beforeCreate: function () {
|
||||
ctx.translate(Radius, Radius)
|
||||
},
|
||||
beforeResize: function () {
|
||||
ctx.translate(-Radius, -Radius)
|
||||
},
|
||||
afterInit: function () {
|
||||
// 动态设置按钮
|
||||
_this.btnWidth = this.maxBtnRadius * 2
|
||||
_this.btnHeight = this.maxBtnRadius * 2
|
||||
_this.$forceUpdate()
|
||||
},
|
||||
afterStart: () => {
|
||||
this.imgSrc = ''
|
||||
},
|
||||
}, {
|
||||
...this.$props,
|
||||
width,
|
||||
height,
|
||||
start: (...rest) => {
|
||||
this.$emit('start', ...rest)
|
||||
},
|
||||
end: (...rest) => {
|
||||
this.$emit('end', ...rest)
|
||||
this.hideCanvas()
|
||||
},
|
||||
})
|
||||
})
|
||||
},
|
||||
toPlay (e) {
|
||||
this.myLucky.startCallback()
|
||||
},
|
||||
init () {
|
||||
this.myLucky.init()
|
||||
},
|
||||
play (...rest) {
|
||||
this.myLucky.play(...rest)
|
||||
},
|
||||
stop (...rest) {
|
||||
this.myLucky.stop(...rest)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lucky-box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.lucky-box canvas {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.lucky-wheel-btn {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.lucky-imgs {
|
||||
width: 0;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -1,53 +0,0 @@
|
||||
{
|
||||
"_from": "@lucky-canvas/uni",
|
||||
"_id": "@lucky-canvas/uni@0.0.10",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha512-1K7SPr0FT1PfHRYXEh9CwOA/UqayxQosOA8wkZ3w3dfpoB8dij8Y6QGPKjHOMvHRRD1qFU3AEY7XVytjuktVaw==",
|
||||
"_location": "/@lucky-canvas/uni",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "tag",
|
||||
"registry": true,
|
||||
"raw": "@lucky-canvas/uni",
|
||||
"name": "@lucky-canvas/uni",
|
||||
"escapedName": "@lucky-canvas%2funi",
|
||||
"scope": "@lucky-canvas",
|
||||
"rawSpec": "",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "latest"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"#USER",
|
||||
"/"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/@lucky-canvas/uni/-/uni-0.0.10.tgz",
|
||||
"_shasum": "c1b98bb1875049b11840b7f4aa6bfa1f0230fab2",
|
||||
"_spec": "@lucky-canvas/uni",
|
||||
"_where": "/Users/ldq/Desktop/temp/test",
|
||||
"author": {
|
||||
"name": "ldq",
|
||||
"email": "ldq404@qq.com"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"dependencies": {
|
||||
"lucky-canvas": "~1.7.19"
|
||||
},
|
||||
"deprecated": false,
|
||||
"description": "uni-app【大转盘 / 九宫格 / 老虎机】抽奖插件",
|
||||
"files": [
|
||||
"lucky-wheel.vue",
|
||||
"lucky-grid.vue",
|
||||
"slot-machine.vue",
|
||||
"utils.js",
|
||||
"demo.vue"
|
||||
],
|
||||
"keywords": [
|
||||
"uni-app抽奖"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"name": "@lucky-canvas/uni",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"version": "0.0.10"
|
||||
}
|
||||
@@ -1,214 +0,0 @@
|
||||
<template>
|
||||
<view v-if="isShow" class="lucky-box" :style="{ width: boxWidth + 'px', height: boxHeight + 'px' }">
|
||||
<canvas
|
||||
type="2d"
|
||||
id="slot-machine"
|
||||
canvas-id="slot-machine"
|
||||
:style="{ width: boxWidth + 'px', height: boxHeight + 'px' }"
|
||||
></canvas>
|
||||
<image
|
||||
v-if="imgSrc"
|
||||
:src="imgSrc"
|
||||
@load="myLucky.clearCanvas()"
|
||||
:style="{ width: boxWidth + 'px', height: boxHeight + 'px' }"
|
||||
></image>
|
||||
<!-- #ifndef H5 -->
|
||||
<view v-if="myLucky">
|
||||
<div class="lucky-imgs">
|
||||
<div v-for="(block, index) in blocks" :key="index">
|
||||
<div v-if="block.imgs">
|
||||
<image v-for="(img, i) in block.imgs" :key="i" :src="img.src" @load="e => imgBindload(e, 'blocks', index, i)"></image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lucky-imgs">
|
||||
<div v-for="(prize, index) in prizes" :key="index">
|
||||
<div v-if="prize.imgs">
|
||||
<image v-for="(img, i) in prize.imgs" :key="i" :src="img.src" @load="e => imgBindload(e, 'prizes', index, i)"></image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { changeUnits, resolveImage, getImage } from './utils.js'
|
||||
import { SlotMachine } from '../../lucky-canvas'
|
||||
export default {
|
||||
name: 'slot-machine',
|
||||
data () {
|
||||
return {
|
||||
imgSrc: '',
|
||||
myLucky: null,
|
||||
canvas: null,
|
||||
isShow: false,
|
||||
boxWidth: 100,
|
||||
boxHeight: 100,
|
||||
btnWidth: 0,
|
||||
btnHeight: 0,
|
||||
dpr: 1,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: '600rpx'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '600rpx'
|
||||
},
|
||||
blocks: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
prizes: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
slots: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
defaultConfig: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
defaultStyle: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
// #ifndef APP-PLUS
|
||||
this.initLucky()
|
||||
// #endif
|
||||
},
|
||||
watch: {
|
||||
blocks (newData) {
|
||||
this.myLucky && (this.myLucky.blocks = newData)
|
||||
},
|
||||
prizes (newData) {
|
||||
this.myLucky && (this.myLucky.prizes = newData)
|
||||
},
|
||||
slots (newData) {
|
||||
this.myLucky && (this.myLucky.slots = newData)
|
||||
},
|
||||
defaultStyle (newData) {
|
||||
this.myLucky && (this.myLucky.defaultStyle = newData)
|
||||
},
|
||||
defaultConfig (newData) {
|
||||
this.myLucky && (this.myLucky.defaultConfig = newData)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async imgBindload (res, name, index, i) {
|
||||
const img = this[name][index].imgs[i]
|
||||
resolveImage(img, this.canvas)
|
||||
},
|
||||
getImage () {
|
||||
return getImage.call(this, 'slot-machine', this.canvas)
|
||||
},
|
||||
hideCanvas () {
|
||||
// #ifdef MP
|
||||
this.getImage().then(res => {
|
||||
this.imgSrc = res.tempFilePath
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
initLucky () {
|
||||
this.boxWidth = changeUnits(this.width)
|
||||
this.boxHeight = changeUnits(this.height)
|
||||
this.isShow = true
|
||||
// 某些情况下获取不到 canvas
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.draw()
|
||||
})
|
||||
})
|
||||
},
|
||||
draw () {
|
||||
const _this = this
|
||||
uni.createSelectorQuery().in(this).select('#slot-machine').fields({
|
||||
node: true, size: true
|
||||
}).exec((res) => {
|
||||
// #ifdef H5
|
||||
res[0].node = document.querySelector('#slot-machine canvas')
|
||||
// #endif
|
||||
if (!res[0] || !res[0].node) return console.error('lucky-canvas 获取不到 canvas 标签')
|
||||
const { node, width, height } = res[0]
|
||||
const canvas = this.canvas = node
|
||||
const ctx = this.ctx = canvas.getContext('2d')
|
||||
const dpr = this.dpr = uni.getSystemInfoSync().pixelRatio
|
||||
// #ifndef H5
|
||||
canvas.width = width * dpr
|
||||
canvas.height = height * dpr
|
||||
ctx.scale(dpr, dpr)
|
||||
// #endif
|
||||
const myLucky = this.myLucky = new SlotMachine({
|
||||
// #ifdef H5
|
||||
flag: 'WEB',
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
flag: 'MP-WX',
|
||||
// #endif
|
||||
ctx,
|
||||
dpr,
|
||||
// #ifndef H5
|
||||
offscreenCanvas: uni.createOffscreenCanvas({ type: '2d' }),
|
||||
// #endif
|
||||
setTimeout,
|
||||
clearTimeout,
|
||||
setInterval,
|
||||
clearInterval,
|
||||
// #ifdef H5
|
||||
rAF: requestAnimationFrame,
|
||||
// #endif
|
||||
unitFunc: (num, unit) => changeUnits(num + unit),
|
||||
afterStart: () => {
|
||||
this.imgSrc = ''
|
||||
},
|
||||
}, {
|
||||
...this.$props,
|
||||
width,
|
||||
height,
|
||||
end: (...rest) => {
|
||||
this.$emit('end', ...rest)
|
||||
this.hideCanvas()
|
||||
},
|
||||
})
|
||||
})
|
||||
},
|
||||
init () {
|
||||
this.myLucky.init()
|
||||
},
|
||||
play (...rest) {
|
||||
this.myLucky.play(...rest)
|
||||
},
|
||||
stop (...rest) {
|
||||
this.myLucky.stop(...rest)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lucky-box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.lucky-box canvas {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.lucky-imgs {
|
||||
width: 0;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -1,82 +0,0 @@
|
||||
let windowWidth = uni.getSystemInfoSync().windowWidth
|
||||
// uni-app@2.9起, 屏幕最多适配到960, 超出则按375计算
|
||||
if (windowWidth > 960) windowWidth = 375
|
||||
|
||||
export const rpx2px = (value) => {
|
||||
if (typeof value === 'string') value = Number(value.replace(/[a-z]*/g, ''))
|
||||
return windowWidth / 750 * value
|
||||
}
|
||||
|
||||
export const changeUnits = (value) => {
|
||||
return Number(value.replace(/^(\-*[0-9.]*)([a-z%]*)$/, (value, num, unit) => {
|
||||
switch (unit) {
|
||||
case 'px':
|
||||
num *= 1
|
||||
break
|
||||
case 'rpx':
|
||||
num = rpx2px(num)
|
||||
break
|
||||
default:
|
||||
num *= 1
|
||||
break
|
||||
}
|
||||
return num
|
||||
}))
|
||||
}
|
||||
|
||||
export const resolveImage = async (img, canvas, srcName = 'src', resolveName = '$resolve') => {
|
||||
let imgObj
|
||||
// 区分 H5 和小程序
|
||||
if (window) {
|
||||
imgObj = new Image()
|
||||
} else {
|
||||
imgObj = canvas.createImage()
|
||||
}
|
||||
// 成功回调
|
||||
imgObj.onload = () => {
|
||||
img[resolveName](imgObj)
|
||||
}
|
||||
// 失败回调
|
||||
imgObj.onerror = (err) => {
|
||||
console.error(err)
|
||||
// img['$reject']()
|
||||
}
|
||||
// 设置src
|
||||
imgObj.src = img[srcName]
|
||||
}
|
||||
|
||||
// 旧版canvas引入图片的方法
|
||||
// export const resolveImage = async (res, img, imgName = 'src', resolveName = '$resolve') => {
|
||||
// const src = img[imgName]
|
||||
// const $resolve = img[resolveName]
|
||||
// // #ifdef MP
|
||||
// // 如果是base64就调用base64src()方法把图片写入本地, 然后渲染临时路径
|
||||
// if (/^data:image\/([a-z]+);base64,/.test(src)) {
|
||||
// const path = await base64src(src)
|
||||
// $resolve({ ...res.detail, path })
|
||||
// return
|
||||
// }
|
||||
// // #endif
|
||||
// // 如果是本地图片, 直接返回
|
||||
// if (src.indexOf('http') !== 0) {
|
||||
// $resolve({ ...res.detail, path:src })
|
||||
// return
|
||||
// }
|
||||
// // 如果是网络图片, 则通过getImageInfo()方法获取图片宽高
|
||||
// uni.getImageInfo({
|
||||
// src: src,
|
||||
// success: (imgObj) => $resolve(imgObj),
|
||||
// fail: () => console.error('API `uni.getImageInfo` 加载图片失败', src)
|
||||
// })
|
||||
// }
|
||||
|
||||
export function getImage(canvasId, canvas) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.canvasToTempFilePath({
|
||||
canvas,
|
||||
canvasId,
|
||||
success: res => resolve(res),
|
||||
fail: err => reject(err)
|
||||
}, this)
|
||||
})
|
||||
}
|
||||
@@ -1,201 +0,0 @@
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright [2021] [Li Dong Qi]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
@@ -1,42 +0,0 @@
|
||||
|
||||
|
||||
<div align="center">
|
||||
<img src="https://cdn.jsdelivr.net/gh/buuing/cdn/imgs/lucky-canvas.png" width="128" alt="logo" />
|
||||
<h1>lucky-canvas 抽奖插件</h1>
|
||||
<p>一个基于 JavaScript 的跨平台 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件</p>
|
||||
<p>
|
||||
<a href="https://github.com/buuing/lucky-canvas/stargazers" target="_black">
|
||||
<img src="https://img.shields.io/github/stars/buuing/lucky-canvas?color=%23ffba15&logo=github&style=flat-square" alt="stars" />
|
||||
</a>
|
||||
<a href="https://github.com/buuing/lucky-canvas/network/members" target="_black">
|
||||
<img src="https://img.shields.io/github/forks/buuing/lucky-canvas?color=%23ffba15&logo=github&style=flat-square" alt="forks" />
|
||||
</a>
|
||||
<a href="https://github.com/buuing" target="_black">
|
||||
<img src="https://img.shields.io/badge/Author-%20buuing%20-7289da.svg?&logo=github&style=flat-square" alt="author" />
|
||||
</a>
|
||||
<a href="https://github.com/buuing/lucky-canvas/blob/master/LICENSE" target="_black">
|
||||
<img src="https://img.shields.io/github/license/buuing/lucky-canvas?color=%232dce89&logo=github&style=flat-square" alt="license" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
## 官方文档 & Demo演示
|
||||
|
||||
> **中文**：[https://100px.net/usage/js.html](https://100px.net/usage/js.html)
|
||||
|
||||
> **English**：**If anyone can help translate the document, please contact me** `ldq404@qq.com`
|
||||
|
||||
|
||||
<br />
|
||||
|
||||
## 在 JS / TS 中使用
|
||||
|
||||
- [跳转官网 查看详情](https://100px.net/usage/js.html)
|
||||
|
||||
<br />
|
||||
|
||||
## 🙏🙏🙏 点个Star
|
||||
|
||||
**如果您觉得这个项目还不错, 可以在 [Github](https://github.com/buuing/lucky-canvas) 上面帮我点个`star`, 支持一下作者 ☜(ﾟヮﾟ☜)**
|
||||
@@ -1 +0,0 @@
|
||||
module.exports = require('./dist/index.umd.js')
|
||||
@@ -1,96 +0,0 @@
|
||||
{
|
||||
"_from": "lucky-canvas@~1.7.19",
|
||||
"_id": "lucky-canvas@1.7.19",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha512-Gh6JZg0mc0ej9eG/UdTxwAY/OV2LsOXOF0XOK1lgCfdhMZM3TSphFi65zGL5lTVbFn9mNhieT6X3f3NNL3ihKg==",
|
||||
"_location": "/lucky-canvas",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "range",
|
||||
"registry": true,
|
||||
"raw": "lucky-canvas@~1.7.19",
|
||||
"name": "lucky-canvas",
|
||||
"escapedName": "lucky-canvas",
|
||||
"rawSpec": "~1.7.19",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "~1.7.19"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"/@lucky-canvas/uni"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/lucky-canvas/-/lucky-canvas-1.7.19.tgz",
|
||||
"_shasum": "8983bd1739bb9b228768470508ab4e5c84b8df33",
|
||||
"_spec": "lucky-canvas@~1.7.19",
|
||||
"_where": "/Users/ldq/Desktop/temp/test/node_modules/@lucky-canvas/uni",
|
||||
"author": {
|
||||
"name": "ldq",
|
||||
"email": "ldq404@qq.com"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/LuckDraw/lucky-canvas/issues"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"dependencies": {},
|
||||
"deprecated": false,
|
||||
"description": "一个基于原生 js 的（大转盘 / 九宫格 / 老虎机）抽奖插件",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.3",
|
||||
"@babel/plugin-transform-runtime": "^7.16.4",
|
||||
"@babel/preset-env": "^7.12.1",
|
||||
"@babel/runtime": "^7.16.3",
|
||||
"@rollup/plugin-commonjs": "^16.0.0",
|
||||
"@rollup/plugin-eslint": "^8.0.1",
|
||||
"@rollup/plugin-json": "^4.1.0",
|
||||
"@rollup/plugin-node-resolve": "^10.0.0",
|
||||
"@rollup/plugin-typescript": "^6.1.0",
|
||||
"@typescript-eslint/parser": "^4.14.0",
|
||||
"babel-plugin-external-helpers": "^6.22.0",
|
||||
"babel-preset-latest": "^6.24.1",
|
||||
"core-js": "^3.19.2",
|
||||
"eslint": "^7.18.0",
|
||||
"eslint-plugin-prettier": "^3.3.1",
|
||||
"prettier": "^2.2.1",
|
||||
"rollup": "^2.33.1",
|
||||
"rollup-plugin-babel": "^4.4.0",
|
||||
"rollup-plugin-delete": "^2.0.0",
|
||||
"rollup-plugin-dts": "^3.0.2",
|
||||
"rollup-plugin-livereload": "^2.0.0",
|
||||
"rollup-plugin-serve": "^1.1.0",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"rollup-plugin-typescript2": "^0.30.0",
|
||||
"tslib": "^2.3.1",
|
||||
"typescript": "^4.0.5"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"types",
|
||||
"index.js"
|
||||
],
|
||||
"homepage": "https://100px.net",
|
||||
"jsdelivr": "dist/index.umd.js",
|
||||
"keywords": [
|
||||
"大转盘抽奖",
|
||||
"九宫格抽奖",
|
||||
"老虎机抽奖",
|
||||
"抽奖插件",
|
||||
"js抽奖",
|
||||
"移动端抽奖",
|
||||
"canvas抽奖"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"main": "dist/index.cjs.js",
|
||||
"module": "dist/index.esm.js",
|
||||
"name": "lucky-canvas",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/LuckDraw/lucky-canvas.git",
|
||||
"directory": "packages/lucky-canvas"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "rollup --config rollup.config.build.js",
|
||||
"dev": "rollup --config rollup.config.dev.js -w"
|
||||
},
|
||||
"types": "types/index.d.ts",
|
||||
"unpkg": "dist/index.umd.js",
|
||||
"version": "1.7.19"
|
||||
}
|
||||
-761
@@ -1,761 +0,0 @@
|
||||
declare type FontItemType = {
|
||||
text: string;
|
||||
top?: string | number;
|
||||
fontColor?: string;
|
||||
fontSize?: string;
|
||||
fontStyle?: string;
|
||||
fontWeight?: string;
|
||||
lineHeight?: string;
|
||||
};
|
||||
declare type FontExtendType = {
|
||||
wordWrap?: boolean;
|
||||
lengthLimit?: string | number;
|
||||
lineClamp?: number;
|
||||
};
|
||||
declare type ImgType = HTMLImageElement | HTMLCanvasElement;
|
||||
declare type ImgItemType = {
|
||||
src: string;
|
||||
top?: string | number;
|
||||
width?: string;
|
||||
height?: string;
|
||||
formatter?: (img: ImgType) => ImgType;
|
||||
$resolve?: Function;
|
||||
$reject?: Function;
|
||||
};
|
||||
declare type BorderRadiusType = string | number;
|
||||
declare type BackgroundType = string;
|
||||
declare type ShadowType = string;
|
||||
declare type ConfigType = {
|
||||
nodeType?: number;
|
||||
flag: 'WEB' | 'MP-WX' | 'UNI-H5' | 'UNI-MP' | 'TARO-H5' | 'TARO-MP';
|
||||
el?: string;
|
||||
divElement?: HTMLDivElement;
|
||||
canvasElement?: HTMLCanvasElement;
|
||||
ctx: CanvasRenderingContext2D;
|
||||
dpr: number;
|
||||
handleCssUnit?: (num: number, unit: string) => number;
|
||||
rAF?: Function;
|
||||
setTimeout: Function;
|
||||
setInterval: Function;
|
||||
clearTimeout: Function;
|
||||
clearInterval: Function;
|
||||
beforeCreate?: Function;
|
||||
beforeResize?: Function;
|
||||
afterResize?: Function;
|
||||
beforeInit?: Function;
|
||||
afterInit?: Function;
|
||||
beforeDraw?: Function;
|
||||
afterDraw?: Function;
|
||||
afterStart?: Function;
|
||||
};
|
||||
declare type RequireKey = 'width' | 'height';
|
||||
declare type UserConfigType = Partial<Omit<ConfigType, RequireKey>> & Required<Pick<ConfigType, RequireKey>>;
|
||||
declare type Tuple<T, Len extends number, Res extends T[] = []> = Res['length'] extends Len ? Res : Tuple<T, Len, [...Res, T]>;
|
||||
|
||||
interface WatchOptType {
|
||||
handler?: () => Function;
|
||||
immediate?: boolean;
|
||||
deep?: boolean;
|
||||
}
|
||||
|
||||
declare class Lucky {
|
||||
protected readonly version: string;
|
||||
protected readonly config: ConfigType;
|
||||
protected readonly ctx: CanvasRenderingContext2D;
|
||||
protected htmlFontSize: number;
|
||||
protected rAF: Function;
|
||||
protected boxWidth: number;
|
||||
protected boxHeight: number;
|
||||
protected data: {
|
||||
width: string | number;
|
||||
height: string | number;
|
||||
};
|
||||
/**
|
||||
* 公共构造器
|
||||
* @param config
|
||||
*/
|
||||
constructor(config: string | HTMLDivElement | UserConfigType, data: {
|
||||
width: string | number;
|
||||
height: string | number;
|
||||
});
|
||||
/**
|
||||
* 初始化组件大小/单位
|
||||
*/
|
||||
protected resize(): void;
|
||||
/**
|
||||
* 初始化方法
|
||||
*/
|
||||
protected initLucky(): void;
|
||||
/**
|
||||
* 鼠标点击事件
|
||||
* @param e 事件参数
|
||||
*/
|
||||
protected handleClick(e: MouseEvent): void;
|
||||
/**
|
||||
* 根标签的字体大小
|
||||
*/
|
||||
protected setHTMLFontSize(): void;
|
||||
clearCanvas(): void;
|
||||
/**
|
||||
* 设备像素比
|
||||
* window 环境下自动获取, 其余环境手动传入
|
||||
*/
|
||||
protected setDpr(): void;
|
||||
/**
|
||||
* 重置盒子和canvas的宽高
|
||||
*/
|
||||
private resetWidthAndHeight;
|
||||
/**
|
||||
* 根据 dpr 缩放 canvas 并处理位移
|
||||
*/
|
||||
protected zoomCanvas(): void;
|
||||
/**
|
||||
* 从 window 对象上获取一些方法
|
||||
*/
|
||||
private initWindowFunction;
|
||||
/**
|
||||
* 异步加载图片并返回图片的几何信息
|
||||
* @param src 图片路径
|
||||
* @param info 图片信息
|
||||
*/
|
||||
protected loadImg(src: string, info: ImgItemType, resolveName?: string): Promise<ImgType>;
|
||||
/**
|
||||
* 公共绘制图片的方法
|
||||
* @param imgObj 图片对象
|
||||
* @param rectInfo: [x轴位置, y轴位置, 渲染宽度, 渲染高度]
|
||||
*/
|
||||
protected drawImage(ctx: CanvasRenderingContext2D, imgObj: ImgType, ...rectInfo: [...Tuple<number, 4>, ...Partial<Tuple<number, 4>>]): void;
|
||||
/**
|
||||
* 获取长度
|
||||
* @param length 将要转换的长度
|
||||
* @return 返回长度
|
||||
*/
|
||||
protected getLength(length: string | number | undefined): number;
|
||||
/**
|
||||
* 转换单位
|
||||
* @param { string } value 将要转换的值
|
||||
* @param { number } denominator 分子
|
||||
* @return { number } 返回新的字符串
|
||||
*/
|
||||
protected changeUnits(value: string, denominator?: number): number;
|
||||
/**
|
||||
* 计算图片的渲染宽高
|
||||
* @param imgObj 图片标签元素
|
||||
* @param imgInfo 图片信息
|
||||
* @param maxWidth 最大宽度
|
||||
* @param maxHeight 最大高度
|
||||
* @return [渲染宽度, 渲染高度]
|
||||
*/
|
||||
protected computedWidthAndHeight(imgObj: ImgType, imgInfo: ImgItemType, maxWidth: number, maxHeight: number): [number, number];
|
||||
/**
|
||||
* 转换并获取宽度
|
||||
* @param width 将要转换的宽度
|
||||
* @param maxWidth 最大宽度
|
||||
* @return 返回相对宽度
|
||||
*/
|
||||
protected getWidth(width: string | number | undefined, maxWidth: number): number;
|
||||
/**
|
||||
* 转换并获取高度
|
||||
* @param height 将要转换的高度
|
||||
* @param maxHeight 最大高度
|
||||
* @return 返回相对高度
|
||||
*/
|
||||
protected getHeight(height: string | number | undefined, maxHeight: number): number;
|
||||
/**
|
||||
* 获取相对(居中)X坐标
|
||||
* @param width
|
||||
* @param col
|
||||
*/
|
||||
protected getOffsetX(width: number, maxWidth?: number): number;
|
||||
protected getOffscreenCanvas(width: number, height: number): {
|
||||
_offscreenCanvas: HTMLCanvasElement;
|
||||
_ctx: CanvasRenderingContext2D;
|
||||
} | void;
|
||||
/**
|
||||
* 添加一个新的响应式数据 (临时)
|
||||
* @param data 数据
|
||||
* @param key 属性
|
||||
* @param value 新值
|
||||
*/
|
||||
$set(data: object, key: string | number, value: any): void;
|
||||
/**
|
||||
* 添加一个属性计算 (临时)
|
||||
* @param data 源数据
|
||||
* @param key 属性名
|
||||
* @param callback 回调函数
|
||||
*/
|
||||
protected $computed(data: object, key: string, callback: Function): void;
|
||||
/**
|
||||
* 添加一个观察者 create user watcher
|
||||
* @param expr 表达式
|
||||
* @param handler 回调函数
|
||||
* @param watchOpt 配置参数
|
||||
* @return 卸载当前观察者的函数 (暂未返回)
|
||||
*/
|
||||
protected $watch(expr: string | Function, handler: Function | WatchOptType, watchOpt?: WatchOptType): Function;
|
||||
}
|
||||
|
||||
declare type PrizeFontType$2 = FontItemType & FontExtendType;
|
||||
declare type ButtonFontType$1 = FontItemType & {};
|
||||
declare type BlockImgType$2 = ImgItemType & {
|
||||
rotate?: boolean;
|
||||
};
|
||||
declare type PrizeImgType$2 = ImgItemType & {};
|
||||
declare type ButtonImgType$1 = ImgItemType & {};
|
||||
declare type BlockType$2 = {
|
||||
padding?: string;
|
||||
background?: BackgroundType;
|
||||
imgs?: Array<BlockImgType$2>;
|
||||
};
|
||||
declare type PrizeType$2 = {
|
||||
range?: number;
|
||||
background?: BackgroundType;
|
||||
fonts?: Array<PrizeFontType$2>;
|
||||
imgs?: Array<PrizeImgType$2>;
|
||||
};
|
||||
declare type ButtonType$1 = {
|
||||
radius?: string;
|
||||
pointer?: boolean;
|
||||
background?: BackgroundType;
|
||||
fonts?: Array<ButtonFontType$1>;
|
||||
imgs?: Array<ButtonImgType$1>;
|
||||
};
|
||||
declare type DefaultConfigType$2 = {
|
||||
gutter?: string | number;
|
||||
offsetDegree?: number;
|
||||
speed?: number;
|
||||
speedFunction?: string;
|
||||
accelerationTime?: number;
|
||||
decelerationTime?: number;
|
||||
stopRange?: number;
|
||||
};
|
||||
declare type DefaultStyleType$2 = {
|
||||
background?: BackgroundType;
|
||||
fontColor?: PrizeFontType$2['fontColor'];
|
||||
fontSize?: PrizeFontType$2['fontSize'];
|
||||
fontStyle?: PrizeFontType$2['fontStyle'];
|
||||
fontWeight?: PrizeFontType$2['fontWeight'];
|
||||
lineHeight?: PrizeFontType$2['lineHeight'];
|
||||
wordWrap?: PrizeFontType$2['wordWrap'];
|
||||
lengthLimit?: PrizeFontType$2['lengthLimit'];
|
||||
lineClamp?: PrizeFontType$2['lineClamp'];
|
||||
};
|
||||
declare type StartCallbackType$1 = (e: MouseEvent) => void;
|
||||
declare type EndCallbackType$2 = (prize: object) => void;
|
||||
interface LuckyWheelConfig {
|
||||
width: string | number;
|
||||
height: string | number;
|
||||
blocks?: Array<BlockType$2>;
|
||||
prizes?: Array<PrizeType$2>;
|
||||
buttons?: Array<ButtonType$1>;
|
||||
defaultConfig?: DefaultConfigType$2;
|
||||
defaultStyle?: DefaultStyleType$2;
|
||||
start?: StartCallbackType$1;
|
||||
end?: EndCallbackType$2;
|
||||
}
|
||||
|
||||
declare class LuckyWheel extends Lucky {
|
||||
private blocks;
|
||||
private prizes;
|
||||
private buttons;
|
||||
private defaultConfig;
|
||||
private defaultStyle;
|
||||
private _defaultConfig;
|
||||
private _defaultStyle;
|
||||
private startCallback?;
|
||||
private endCallback?;
|
||||
private Radius;
|
||||
private prizeRadius;
|
||||
private prizeDeg;
|
||||
private prizeRadian;
|
||||
private rotateDeg;
|
||||
private maxBtnRadius;
|
||||
private startTime;
|
||||
private endTime;
|
||||
private stopDeg;
|
||||
private endDeg;
|
||||
private FPS;
|
||||
/**
|
||||
* 游戏当前的阶段
|
||||
* step = 0 时, 游戏尚未开始
|
||||
* step = 1 时, 此时处于加速阶段
|
||||
* step = 2 时, 此时处于匀速阶段
|
||||
* step = 3 时, 此时处于减速阶段
|
||||
*/
|
||||
private step;
|
||||
/**
|
||||
* 中奖索引
|
||||
* prizeFlag = undefined 时, 处于开始抽奖阶段, 正常旋转
|
||||
* prizeFlag >= 0 时, 说明stop方法被调用, 并且传入了中奖索引
|
||||
* prizeFlag === -1 时, 说明stop方法被调用, 并且传入了负值, 本次抽奖无效
|
||||
*/
|
||||
private prizeFlag;
|
||||
private ImageCache;
|
||||
/**
|
||||
* 大转盘构造器
|
||||
* @param config 配置项
|
||||
* @param data 抽奖数据
|
||||
*/
|
||||
constructor(config: UserConfigType, data: LuckyWheelConfig);
|
||||
protected resize(): void;
|
||||
protected initLucky(): void;
|
||||
/**
|
||||
* 初始化数据
|
||||
* @param data
|
||||
*/
|
||||
private initData;
|
||||
/**
|
||||
* 初始化属性计算
|
||||
*/
|
||||
private initComputed;
|
||||
/**
|
||||
* 初始化观察者
|
||||
*/
|
||||
private initWatch;
|
||||
/**
|
||||
* 初始化 canvas 抽奖
|
||||
*/
|
||||
init(): Promise<void>;
|
||||
private initImageCache;
|
||||
/**
|
||||
* canvas点击事件
|
||||
* @param e 事件参数
|
||||
*/
|
||||
protected handleClick(e: MouseEvent): void;
|
||||
/**
|
||||
* 根据索引单独加载指定图片并缓存
|
||||
* @param cellName 模块名称
|
||||
* @param cellIndex 模块索引
|
||||
* @param imgName 模块对应的图片缓存
|
||||
* @param imgIndex 图片索引
|
||||
*/
|
||||
private loadAndCacheImg;
|
||||
private drawBlock;
|
||||
/**
|
||||
* 开始绘制
|
||||
*/
|
||||
protected draw(): void;
|
||||
/**
|
||||
* 刻舟求剑
|
||||
*/
|
||||
private carveOnGunwaleOfAMovingBoat;
|
||||
/**
|
||||
* 对外暴露: 开始抽奖方法
|
||||
*/
|
||||
play(): void;
|
||||
/**
|
||||
* 对外暴露: 缓慢停止方法
|
||||
* @param index 中奖索引
|
||||
*/
|
||||
stop(index?: number): void;
|
||||
/**
|
||||
* 实际开始执行方法
|
||||
* @param num 记录帧动画执行多少次
|
||||
*/
|
||||
private run;
|
||||
/**
|
||||
* 换算渲染坐标
|
||||
* @param x
|
||||
* @param y
|
||||
*/
|
||||
protected conversionAxis(x: number, y: number): [number, number];
|
||||
}
|
||||
|
||||
declare type PrizeFontType$1 = FontItemType & FontExtendType;
|
||||
declare type ButtonFontType = FontItemType & FontExtendType;
|
||||
declare type BlockImgType$1 = ImgItemType & {};
|
||||
declare type PrizeImgType$1 = ImgItemType & {
|
||||
activeSrc?: string;
|
||||
};
|
||||
declare type ButtonImgType = ImgItemType & {};
|
||||
declare type BlockType$1 = {
|
||||
borderRadius?: BorderRadiusType;
|
||||
background?: BackgroundType;
|
||||
padding?: string;
|
||||
paddingTop?: string | number;
|
||||
paddingRight?: string | number;
|
||||
paddingBottom?: string | number;
|
||||
paddingLeft?: string | number;
|
||||
imgs?: Array<BlockImgType$1>;
|
||||
};
|
||||
declare type CellType<T, U> = {
|
||||
x: number;
|
||||
y: number;
|
||||
col?: number;
|
||||
row?: number;
|
||||
borderRadius?: BorderRadiusType;
|
||||
background?: BackgroundType;
|
||||
shadow?: ShadowType;
|
||||
fonts?: Array<T>;
|
||||
imgs?: Array<U>;
|
||||
};
|
||||
declare type PrizeType$1 = CellType<PrizeFontType$1, PrizeImgType$1> & {
|
||||
range?: number;
|
||||
disabled?: boolean;
|
||||
};
|
||||
declare type ButtonType = CellType<ButtonFontType, ButtonImgType> & {
|
||||
callback?: Function;
|
||||
};
|
||||
declare type DefaultConfigType$1 = {
|
||||
gutter?: number;
|
||||
speed?: number;
|
||||
accelerationTime?: number;
|
||||
decelerationTime?: number;
|
||||
};
|
||||
declare type DefaultStyleType$1 = {
|
||||
borderRadius?: BorderRadiusType;
|
||||
background?: BackgroundType;
|
||||
shadow?: ShadowType;
|
||||
fontColor?: PrizeFontType$1['fontColor'];
|
||||
fontSize?: PrizeFontType$1['fontSize'];
|
||||
fontStyle?: PrizeFontType$1['fontStyle'];
|
||||
fontWeight?: PrizeFontType$1['fontWeight'];
|
||||
lineHeight?: PrizeFontType$1['lineHeight'];
|
||||
wordWrap?: PrizeFontType$1['wordWrap'];
|
||||
lengthLimit?: PrizeFontType$1['lengthLimit'];
|
||||
lineClamp?: PrizeFontType$1['lineClamp'];
|
||||
};
|
||||
declare type ActiveStyleType = {
|
||||
background?: BackgroundType;
|
||||
shadow?: ShadowType;
|
||||
fontColor?: PrizeFontType$1['fontColor'];
|
||||
fontSize?: PrizeFontType$1['fontSize'];
|
||||
fontStyle?: PrizeFontType$1['fontStyle'];
|
||||
fontWeight?: PrizeFontType$1['fontWeight'];
|
||||
lineHeight?: PrizeFontType$1['lineHeight'];
|
||||
};
|
||||
declare type RowsType = number;
|
||||
declare type ColsType = number;
|
||||
declare type StartCallbackType = (e: MouseEvent, button?: ButtonType) => void;
|
||||
declare type EndCallbackType$1 = (prize: object) => void;
|
||||
interface LuckyGridConfig {
|
||||
width: string | number;
|
||||
height: string | number;
|
||||
rows?: RowsType;
|
||||
cols?: ColsType;
|
||||
blocks?: Array<BlockType$1>;
|
||||
prizes?: Array<PrizeType$1>;
|
||||
buttons?: Array<ButtonType>;
|
||||
button?: ButtonType;
|
||||
defaultConfig?: DefaultConfigType$1;
|
||||
defaultStyle?: DefaultStyleType$1;
|
||||
activeStyle?: ActiveStyleType;
|
||||
start?: StartCallbackType;
|
||||
end?: EndCallbackType$1;
|
||||
}
|
||||
|
||||
declare class LuckyGrid extends Lucky {
|
||||
private rows;
|
||||
private cols;
|
||||
private blocks;
|
||||
private prizes;
|
||||
private buttons;
|
||||
private button?;
|
||||
private defaultConfig;
|
||||
private defaultStyle;
|
||||
private activeStyle;
|
||||
private _defaultConfig;
|
||||
private _defaultStyle;
|
||||
private _activeStyle;
|
||||
private startCallback?;
|
||||
private endCallback?;
|
||||
private cellWidth;
|
||||
private cellHeight;
|
||||
private startTime;
|
||||
private endTime;
|
||||
private currIndex;
|
||||
private stopIndex;
|
||||
private endIndex;
|
||||
private demo;
|
||||
private timer;
|
||||
private FPS;
|
||||
/**
|
||||
* 游戏当前的阶段
|
||||
* step = 0 时, 游戏尚未开始
|
||||
* step = 1 时, 此时处于加速阶段
|
||||
* step = 2 时, 此时处于匀速阶段
|
||||
* step = 3 时, 此时处于减速阶段
|
||||
*/
|
||||
private step;
|
||||
/**
|
||||
* 中奖索引
|
||||
* prizeFlag = undefined 时, 处于开始抽奖阶段, 正常旋转
|
||||
* prizeFlag >= 0 时, 说明stop方法被调用, 并且传入了中奖索引
|
||||
* prizeFlag === -1 时, 说明stop方法被调用, 并且传入了负值, 本次抽奖无效
|
||||
*/
|
||||
private prizeFlag;
|
||||
private cells;
|
||||
private prizeArea;
|
||||
private ImageCache;
|
||||
/**
|
||||
* 九宫格构造器
|
||||
* @param config 配置项
|
||||
* @param data 抽奖数据
|
||||
*/
|
||||
constructor(config: UserConfigType, data: LuckyGridConfig);
|
||||
protected resize(): void;
|
||||
protected initLucky(): void;
|
||||
/**
|
||||
* 初始化数据
|
||||
* @param data
|
||||
*/
|
||||
private initData;
|
||||
/**
|
||||
* 初始化属性计算
|
||||
*/
|
||||
private initComputed;
|
||||
/**
|
||||
* 初始化观察者
|
||||
*/
|
||||
private initWatch;
|
||||
/**
|
||||
* 初始化 canvas 抽奖
|
||||
*/
|
||||
init(): Promise<void>;
|
||||
private initImageCache;
|
||||
/**
|
||||
* canvas点击事件
|
||||
* @param e 事件参数
|
||||
*/
|
||||
protected handleClick(e: MouseEvent): void;
|
||||
/**
|
||||
* 根据索引单独加载指定图片并缓存
|
||||
* @param cellName 模块名称
|
||||
* @param cellIndex 模块索引
|
||||
* @param imgName 模块对应的图片缓存
|
||||
* @param imgIndex 图片索引
|
||||
*/
|
||||
private loadAndCacheImg;
|
||||
/**
|
||||
* 绘制九宫格抽奖
|
||||
*/
|
||||
protected draw(): void;
|
||||
/**
|
||||
* 处理背景色
|
||||
* @param x
|
||||
* @param y
|
||||
* @param width
|
||||
* @param height
|
||||
* @param background
|
||||
* @param isActive
|
||||
*/
|
||||
private handleBackground;
|
||||
/**
|
||||
* 刻舟求剑
|
||||
*/
|
||||
private carveOnGunwaleOfAMovingBoat;
|
||||
/**
|
||||
* 对外暴露: 开始抽奖方法
|
||||
*/
|
||||
play(): void;
|
||||
/**
|
||||
* 对外暴露: 缓慢停止方法
|
||||
* @param index 中奖索引
|
||||
*/
|
||||
stop(index?: number): void;
|
||||
/**
|
||||
* 实际开始执行方法
|
||||
* @param num 记录帧动画执行多少次
|
||||
*/
|
||||
private run;
|
||||
/**
|
||||
* 计算奖品格子的几何属性
|
||||
* @param { array } [...矩阵坐标, col, row]
|
||||
* @return { array } [...真实坐标, width, height]
|
||||
*/
|
||||
private getGeometricProperty;
|
||||
/**
|
||||
* 换算渲染坐标
|
||||
* @param x
|
||||
* @param y
|
||||
*/
|
||||
protected conversionAxis(x: number, y: number): [number, number];
|
||||
}
|
||||
|
||||
declare type PrizeFontType = FontItemType & FontExtendType;
|
||||
declare type BlockImgType = ImgItemType & {};
|
||||
declare type PrizeImgType = ImgItemType;
|
||||
declare type BlockType = {
|
||||
borderRadius?: BorderRadiusType;
|
||||
background?: BackgroundType;
|
||||
padding?: string;
|
||||
paddingTop?: string | number;
|
||||
paddingRight?: string | number;
|
||||
paddingBottom?: string | number;
|
||||
paddingLeft?: string | number;
|
||||
imgs?: Array<BlockImgType>;
|
||||
};
|
||||
declare type PrizeType = {
|
||||
borderRadius?: BorderRadiusType;
|
||||
background?: BackgroundType;
|
||||
fonts?: Array<PrizeFontType>;
|
||||
imgs?: Array<PrizeImgType>;
|
||||
};
|
||||
declare type SlotType = {
|
||||
order?: number[];
|
||||
speed?: number;
|
||||
direction?: 1 | -1;
|
||||
};
|
||||
declare type DefaultConfigType = {
|
||||
/**
|
||||
* vertical 为纵向旋转
|
||||
* horizontal 为横向旋转
|
||||
*/
|
||||
mode?: 'vertical' | 'horizontal';
|
||||
/**
|
||||
* 当排列方向 = `vertical`时
|
||||
* 1 bottom to top
|
||||
* -1 top to bottom
|
||||
* 当排列方向 = `horizontal`时
|
||||
* 1 right to left
|
||||
* -1 left to right
|
||||
*/
|
||||
direction?: 1 | -1;
|
||||
rowSpacing?: number;
|
||||
colSpacing?: number;
|
||||
speed?: number;
|
||||
accelerationTime?: number;
|
||||
decelerationTime?: number;
|
||||
};
|
||||
declare type DefaultStyleType = {
|
||||
borderRadius?: BorderRadiusType;
|
||||
background?: BackgroundType;
|
||||
fontColor?: PrizeFontType['fontColor'];
|
||||
fontSize?: PrizeFontType['fontSize'];
|
||||
fontStyle?: PrizeFontType['fontStyle'];
|
||||
fontWeight?: PrizeFontType['fontWeight'];
|
||||
lineHeight?: PrizeFontType['lineHeight'];
|
||||
wordWrap?: PrizeFontType['wordWrap'];
|
||||
lengthLimit?: PrizeFontType['lengthLimit'];
|
||||
lineClamp?: PrizeFontType['lineClamp'];
|
||||
};
|
||||
declare type EndCallbackType = (prize: PrizeType | undefined) => void;
|
||||
interface SlotMachineConfig {
|
||||
width: string | number;
|
||||
height: string | number;
|
||||
blocks?: Array<BlockType>;
|
||||
prizes?: Array<PrizeType>;
|
||||
slots?: Array<SlotType>;
|
||||
defaultConfig?: DefaultConfigType;
|
||||
defaultStyle?: DefaultStyleType;
|
||||
end?: EndCallbackType;
|
||||
}
|
||||
|
||||
declare class SlotMachine extends Lucky {
|
||||
private blocks;
|
||||
private prizes;
|
||||
private slots;
|
||||
private defaultConfig;
|
||||
private _defaultConfig;
|
||||
private defaultStyle;
|
||||
private _defaultStyle;
|
||||
private endCallback;
|
||||
private _offscreenCanvas?;
|
||||
private cellWidth;
|
||||
private cellHeight;
|
||||
private cellAndSpacing;
|
||||
private widthAndSpacing;
|
||||
private heightAndSpacing;
|
||||
private FPS;
|
||||
private scroll;
|
||||
private stopScroll;
|
||||
private endScroll;
|
||||
private startTime;
|
||||
private endTime;
|
||||
/**
|
||||
* 游戏当前的阶段
|
||||
* step = 0 时, 游戏尚未开始
|
||||
* step = 1 时, 此时处于加速阶段
|
||||
* step = 2 时, 此时处于匀速阶段
|
||||
* step = 3 时, 此时处于减速阶段
|
||||
*/
|
||||
private step;
|
||||
/**
|
||||
* 中奖索引
|
||||
* prizeFlag = undefined 时, 处于开始抽奖阶段, 正常旋转
|
||||
* prizeFlag >= 0 时, 说明stop方法被调用, 并且传入了中奖索引
|
||||
* prizeFlag === -1 时, 说明stop方法被调用, 并且传入了负值, 本次抽奖无效
|
||||
*/
|
||||
private prizeFlag;
|
||||
private prizeArea?;
|
||||
private ImageCache;
|
||||
/**
|
||||
* 老虎机构造器
|
||||
* @param config 配置项
|
||||
* @param data 抽奖数据
|
||||
*/
|
||||
constructor(config: UserConfigType, data: SlotMachineConfig);
|
||||
protected resize(): void;
|
||||
protected initLucky(): void;
|
||||
/**
|
||||
* 初始化数据
|
||||
* @param data
|
||||
*/
|
||||
private initData;
|
||||
/**
|
||||
* 初始化属性计算
|
||||
*/
|
||||
private initComputed;
|
||||
/**
|
||||
* 初始化观察者
|
||||
*/
|
||||
private initWatch;
|
||||
/**
|
||||
* 初始化 canvas 抽奖
|
||||
*/
|
||||
init(): Promise<void>;
|
||||
private initImageCache;
|
||||
/**
|
||||
* 根据索引单独加载指定图片并缓存
|
||||
* @param cellName 模块名称
|
||||
* @param cellIndex 模块索引
|
||||
* @param imgName 模块对应的图片缓存
|
||||
* @param imgIndex 图片索引
|
||||
*/
|
||||
private loadAndCacheImg;
|
||||
/**
|
||||
* 绘制离屏canvas
|
||||
*/
|
||||
protected drawOffscreenCanvas(): void;
|
||||
/**
|
||||
* 绘制背景区域
|
||||
*/
|
||||
protected drawBlocks(): SlotMachine['prizeArea'];
|
||||
/**
|
||||
* 绘制老虎机抽奖
|
||||
*/
|
||||
protected draw(): void;
|
||||
/**
|
||||
* 刻舟求剑
|
||||
*/
|
||||
private carveOnGunwaleOfAMovingBoat;
|
||||
/**
|
||||
* 对外暴露: 开始抽奖方法
|
||||
*/
|
||||
play(): void;
|
||||
stop(index: number | number[]): void;
|
||||
/**
|
||||
* 让游戏动起来
|
||||
* @param num 记录帧动画执行多少次
|
||||
*/
|
||||
private run;
|
||||
private displacement;
|
||||
private displacementWidthOrHeight;
|
||||
}
|
||||
|
||||
/**
|
||||
* 切割圆角
|
||||
* @param img 将要裁剪的图片对象
|
||||
* @param radius 裁剪的圆角半径
|
||||
* @returns 返回一个离屏 canvas 用于渲染
|
||||
*/
|
||||
declare const cutRound: (img: ImgType, radius: number) => ImgType;
|
||||
/**
|
||||
* 透明度
|
||||
* @param img 将要处理的图片对象
|
||||
* @param opacity 透明度
|
||||
* @returns 返回一个离屏 canvas 用于渲染
|
||||
*/
|
||||
declare const opacity: (img: ImgType, opacity: number) => ImgType;
|
||||
|
||||
export { LuckyGrid, LuckyWheel, SlotMachine, cutRound, opacity };
|
||||
@@ -1,117 +0,0 @@
|
||||
<template>
|
||||
<view class="logs-view">
|
||||
<view class="btn-box">
|
||||
<button type="default" plain size="mini">抽奖日期</button>
|
||||
<button type="default" plain size="mini">抽奖结果</button>
|
||||
</view>
|
||||
|
||||
<view class="list-box">
|
||||
<view class="item flex jc-between ai-center" v-for="item in list">
|
||||
<view class="flex">
|
||||
<text class="date">{{item.drawTime}}</text>
|
||||
<text class="goods one-t">{{item.prizeName}}</text>
|
||||
</view>
|
||||
|
||||
<image class="btn flex-0" :src="webUrl+'/20220611142551342281.png'" @click="goReceive(item.id)"
|
||||
v-if="item.status==1 && item.isHit==1"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getLotteryRecordsMy
|
||||
} from "@/api/luck.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
lotteryId: null,
|
||||
list: [],
|
||||
page: 1
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.lotteryId = option.id;
|
||||
},
|
||||
onShow() {
|
||||
this.list = [];
|
||||
this.fetchList();
|
||||
},
|
||||
onReachBottom() {
|
||||
this.page++;
|
||||
this.fetchList();
|
||||
},
|
||||
methods: {
|
||||
fetchList() {
|
||||
getLotteryRecordsMy(this.lotteryId, this.page).then(res => {
|
||||
for (let i = 0; i < res.data.records.length; i++) {
|
||||
this.list.push(res.data.records[i])
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
goReceive(id) {
|
||||
uni.navigateTo({
|
||||
url: "receive?id=" + id
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.logs-view {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
background: linear-gradient(180deg, #FFD884 0%, #FF5307 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
margin-top: 54rpx;
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
margin: 0 88rpx;
|
||||
border: none;
|
||||
border-radius: 30rpx;
|
||||
background: linear-gradient(180deg, #ffcd1e 0%, #ff8a18 100%);
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
height: 75vh;
|
||||
margin-top: 20rpx;
|
||||
padding: 32rpx;
|
||||
overflow-y: auto;
|
||||
|
||||
.item {
|
||||
height: 60rpx;
|
||||
margin-bottom: 16rpx;
|
||||
padding: 0 46rpx;
|
||||
border-radius: 30rpx;
|
||||
background: rgba(255, 255, 255, .4);
|
||||
font-size: 24rpx;
|
||||
|
||||
.date {
|
||||
display: inline-block;
|
||||
width: 350rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.goods {
|
||||
width: 190rpx;
|
||||
color: #FF1200;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 80rpx;
|
||||
height: 38rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,382 +0,0 @@
|
||||
<template>
|
||||
<view class="luck-view">
|
||||
<image class="bg-luck" :src="webUrl+'/20220210153759193846.png'" mode="scaleToFill"></image>
|
||||
<image class="btn-log" :src="webUrl+'/20220210142514268256.png'" mode="scaleToFill" @click="goLogs"></image>
|
||||
<image class="dialog" :src="webUrl+'/20220210142530967881.png'" mode="scaleToFill" v-if="newRecords.length>0">
|
||||
</image>
|
||||
<view class="dialog" v-if="newRecords.length>0">
|
||||
<swiper :indicator-dots="false" :autoplay="true" :interval="5000" :duration="1000" circular>
|
||||
<swiper-item v-for="item in newRecords" :key="item">
|
||||
<view class="acea-row row-middle">
|
||||
<image class="avatar" :src="item.avatar" mode="scaleToFill"></image>
|
||||
<text>恭喜{{ item.username }}获得{{ item.prizeName }}</text>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<!-- 大转盘抽奖 -->
|
||||
<view class="wheel-box" v-show="!isDialog">
|
||||
</view>
|
||||
|
||||
<image class="btn-tip" :src="webUrl+'/20220210142525648150.png'" mode="scaleToFill" v-if="lotteryInfo"></image>
|
||||
<view class="btn-tip acea-row row-center-wrapper" v-if="lotteryInfo">
|
||||
<view>剩余
|
||||
<text>{{ lotteryInfo.lotteryUserInfo.dayLimit }}</text>
|
||||
次抽奖机会
|
||||
</view>
|
||||
<!-- <view>剩余<text>{{parseInt(lotteryInfo.lotteryUserInfo.lotteryPoints/lotteryInfo.singleCost)}}</text>次抽奖机会</view> -->
|
||||
</view>
|
||||
|
||||
<view class="tip-box" v-html="lotteryInfo.description" v-if="lotteryInfo">
|
||||
<!-- <view>1.每天有1次幸运大转盘的抽奖机会</view>
|
||||
<view>2.每次抽奖需要消耗{{lotteryInfo.singleCost}}幸运币。</view>
|
||||
<view>3.抽中商品后可去个人中心页面查看订单详情。</view> -->
|
||||
</view>
|
||||
<image class="btn-role" :src="webUrl+'/20220210142520109834.png'" mode="scaleToFill"></image>
|
||||
|
||||
<cover-view class="result-mark" v-if="isDialog">
|
||||
<cover-view class="result-dialog flex flex-col ai-center">
|
||||
<cover-image class="icon-close" :src="webUrl+'/20220610111928963051.png'" mode="scaleToFill"
|
||||
@click="changeDialog(false)"/>
|
||||
<cover-view class="title">恭喜您，中奖啦！</cover-view>
|
||||
<cover-image class="cover" :src="result.imgs[0].src" mode="scaleToFill"/>
|
||||
<cover-view class="name">获得的是{{ result.fonts[0].text }}</cover-view>
|
||||
<button class="btn-fetch" type="default" @click="goReceive">去领取</button>
|
||||
<button class="btn-close" type="default" @click="changeDialog(false)">关闭</button>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {draw, getLotteryInfo, getLotteryRecordsNew} from "@/api/luck.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
blocks: [],
|
||||
buttons: [],
|
||||
prizes: [],
|
||||
defaultConfig: {
|
||||
stopRange: 0.5
|
||||
},
|
||||
lotteryId: null,
|
||||
newRecords: [],
|
||||
lotteryInfo: null,
|
||||
isDialog: false,
|
||||
result: {},
|
||||
lotteryRecordId: null, //抽奖记录ID
|
||||
hitIndex: 0,
|
||||
isWait: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getLuck();
|
||||
this.blocks = [{
|
||||
imgs: [{
|
||||
src: this.webUrl + '/20220210142536583482.png',
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}]
|
||||
}]
|
||||
this.buttons = [{
|
||||
radius: '50%',
|
||||
imgs: [{
|
||||
src: this.webUrl + '/20220210142504244580.png',
|
||||
width: '177rpx',
|
||||
top: '-65%'
|
||||
}]
|
||||
}]
|
||||
|
||||
},
|
||||
methods: {
|
||||
changeDialog(state){
|
||||
this.isDialog=state
|
||||
},
|
||||
// 初始化
|
||||
getLuck() {
|
||||
getLotteryInfo().then(({
|
||||
data
|
||||
}) => {
|
||||
this.lotteryId = data.id;
|
||||
this.lotteryInfo = data;
|
||||
|
||||
// 处理奖品数据
|
||||
let len = this.lotteryInfo.prizeList.length;
|
||||
let temp;
|
||||
for (let i = 0; i < len; i++) {
|
||||
temp = {
|
||||
imgs: [{
|
||||
src: this.lotteryInfo.prizeList[i].image,
|
||||
width: "80rpx",
|
||||
height: "80rpx",
|
||||
top: "85%"
|
||||
}],
|
||||
fonts: [{
|
||||
text: this.lotteryInfo.prizeList[i].name,
|
||||
top: '50%',
|
||||
fontSize: '28rpx'
|
||||
}]
|
||||
}
|
||||
|
||||
this.$set(this.prizes, i, temp)
|
||||
}
|
||||
|
||||
getLotteryRecordsNew(this.lotteryId).then(({
|
||||
data
|
||||
}) => this.newRecords = data);
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转奖品记录
|
||||
goLogs() {
|
||||
this.$yrouter.push('/v4/views/luck/logs?id=' + this.lotteryId);
|
||||
},
|
||||
// 点击抽奖按钮触发回调
|
||||
startCallBack() {
|
||||
let that = this;
|
||||
if (this.isWait) return;
|
||||
this.isWait = true;
|
||||
|
||||
if (this.lotteryId == null) {
|
||||
uni.showToast({
|
||||
title: "无抽奖活动",
|
||||
icon: 'none'
|
||||
})
|
||||
return;
|
||||
}
|
||||
draw(this.lotteryId).then(res => {
|
||||
if (res.success) {
|
||||
that.lotteryRecordId = res.data.id;
|
||||
let surplus = that.lotteryInfo.lotteryUserInfo.dayLimit - 1;
|
||||
if (surplus > -1) {
|
||||
that.$set(that.lotteryInfo.lotteryUserInfo, "dayLimit", surplus)
|
||||
}
|
||||
|
||||
for (let i = 0, len = that.lotteryInfo.prizeList.length; i < len; i++) {
|
||||
if (res.data.prizeId == that.lotteryInfo.prizeList[i].id) {
|
||||
that.hitIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 先开始旋转
|
||||
that.$refs.myLucky.play()
|
||||
that.isHit = res.data.isHit;
|
||||
// 使用定时器来模拟请求接口
|
||||
setTimeout(() => {
|
||||
// 调用stop停止旋转并传递中奖索引
|
||||
if (res.data.prizeId == null) that.hitIndex = -1;
|
||||
that.$refs.myLucky.stop(that.hitIndex)
|
||||
}, 3000)
|
||||
} else {
|
||||
that.isWait = false;
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
}).catch(err => {
|
||||
that.isWait = false;
|
||||
uni.showToast({
|
||||
title: err.msg,
|
||||
icon: "none",
|
||||
duration: 3000
|
||||
});
|
||||
})
|
||||
|
||||
},
|
||||
// 抽奖结束触发回调
|
||||
endCallBack(prize) {
|
||||
// 奖品详情
|
||||
console.log(prize)
|
||||
this.result = prize;
|
||||
this.isWait = false;
|
||||
|
||||
if (this.lotteryInfo.prizeList[this.hitIndex].name == "谢谢参与") {
|
||||
uni.showToast({
|
||||
title: "别灰心,好运一定会来",
|
||||
icon: "none",
|
||||
duration: 3000
|
||||
});
|
||||
return
|
||||
}
|
||||
this.isDialog = true;
|
||||
},
|
||||
|
||||
goReceive() {
|
||||
this.isDialog = false;
|
||||
uni.navigateTo({
|
||||
url: "receive?id=" + this.lotteryRecordId
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
image {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.luck-view {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg-luck {
|
||||
width: 750rpx;
|
||||
height: 1523rpx;
|
||||
}
|
||||
|
||||
.btn-log {
|
||||
width: 109rpx;
|
||||
height: 49rpx;
|
||||
position: absolute;
|
||||
top: 18rpx;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
width: 521rpx;
|
||||
height: 111rpx;
|
||||
position: absolute;
|
||||
top: 240rpx;
|
||||
left: 114.5rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
|
||||
.acea-row {
|
||||
margin-top: 27rpx;
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 20rpx;
|
||||
background: #FFBEBE;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.wheel-box {
|
||||
position: absolute;
|
||||
top: 352rpx;
|
||||
left: 65rpx;
|
||||
}
|
||||
|
||||
.btn-tip {
|
||||
width: 372rpx;
|
||||
height: 61rpx;
|
||||
position: absolute;
|
||||
top: 1014rpx;
|
||||
left: 189rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
|
||||
text {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tip-box {
|
||||
width: 670rpx;
|
||||
height: 290rpx;
|
||||
position: absolute;
|
||||
bottom: 90rpx;
|
||||
left: 40rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 46rpx 30rpx 30rpx;
|
||||
border: 4rpx solid #E69F42;
|
||||
border-radius: 32rpx;
|
||||
background: #fff;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.5;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.btn-role {
|
||||
width: 156rpx;
|
||||
height: 60rpx;
|
||||
position: absolute;
|
||||
bottom: 363rpx;
|
||||
left: 92rpx;
|
||||
}
|
||||
|
||||
.result-mark {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(51, 51, 51, 0.39);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.result-dialog {
|
||||
position: absolute;
|
||||
top: 300rpx;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 458rpx;
|
||||
height: 560rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #FFF5DB;
|
||||
|
||||
.icon-close {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 26rpx;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 40rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
line-height: 50rpx;
|
||||
color: #FF0000;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
vertical-align: middle;
|
||||
margin: 15rpx 0;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-fetch {
|
||||
width: 176rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
margin-top: 28rpx;
|
||||
border-radius: 30rpx;
|
||||
background: #FD685D;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
height: 34rpx;
|
||||
line-height: 34rpx;
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #D6BA70;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,159 +0,0 @@
|
||||
<template>
|
||||
<view class="receive-view">
|
||||
<view class="item flex ai-center" :class="{'active':selectIndex===index}" v-for="(item,index) in list"
|
||||
@click="tapItem(index)">
|
||||
<image class="select" :src="webUrl+'/20220613104953149068.png'" mode="scaleToFill" v-if="selectIndex===index" />
|
||||
|
||||
<view class="content">
|
||||
<view class="base flex ai-center">
|
||||
<view>{{item.realName}}</view>
|
||||
<view class="phone">{{item.phone}}</view>
|
||||
</view>
|
||||
|
||||
<view class="address more-t">{{item.province}}{{item.city}}{{item.district}}{{item.detail}}</view>
|
||||
</view>
|
||||
|
||||
<image class="default" :src="webUrl+'/20220613104939432841.png'" mode="scaleToFill" v-if="item.isDefault===1" />
|
||||
</view>
|
||||
|
||||
<button class="btn-receive" type="default" @click="receive">确认领取</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getAddressList
|
||||
} from "@/api/user";
|
||||
import {
|
||||
takePrize
|
||||
} from "@/api/luck";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
id: null, //领奖记录ID
|
||||
list: [], //收货地址列表
|
||||
selectIndex: 0
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id;
|
||||
this.fetchList();
|
||||
},
|
||||
methods: {
|
||||
fetchList() {
|
||||
getAddressList({
|
||||
page: 1,
|
||||
limit: 999
|
||||
}).then(res => {
|
||||
if (res.success) {
|
||||
this.list = res.data;
|
||||
if (this.list.length) {
|
||||
for (let i = 0; i < this.list.length; i++) {
|
||||
if (this.list[i].isDefault === 1) this.selectIndex = i;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
tapItem(index) {
|
||||
this.selectIndex = index;
|
||||
},
|
||||
|
||||
receive() {
|
||||
takePrize(this.id, this.list[this.selectIndex].id).then(res => {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: res.data,
|
||||
success: () => {
|
||||
if (res.success) {
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: "error",
|
||||
title: err.msg
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.receive-view {
|
||||
padding: 40rpx;
|
||||
|
||||
.active {
|
||||
box-shadow: 0px 6px 12px rgba(191, 189, 197, 0.6);
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
height: 172rpx;
|
||||
margin-bottom: 32rpx;
|
||||
padding: 24rpx 20rpx 28rpx 0;
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.content {
|
||||
margin-left: 24rpx;
|
||||
|
||||
.base {
|
||||
color: #080F1A;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
font-weight: bold;
|
||||
|
||||
.phone {
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.default {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 72rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-receive {
|
||||
position: fixed;
|
||||
bottom: 80rpx;
|
||||
left: 0;
|
||||
width: 686rpx;
|
||||
height: 80rpx;
|
||||
margin: 0 32rpx;
|
||||
border-radius: 40rpx;
|
||||
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
|
||||
background: #FF564A;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -149,9 +149,6 @@
|
||||
<view v-show="activeIndex==3" class="btLine"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <block v-if="inn.qrcode.length>0">-->
|
||||
<!-- <drag-button :isDock="true" :existTabBar="true" @btnClick="showQrcode"/>-->
|
||||
<!-- </block>-->
|
||||
<view v-if="activeIndex==0" class="pics-section" style="position: relative;">
|
||||
<view class="pics-list acea-row" v-if="inn.pics.length>0">
|
||||
<view :style="{width:picColumnWidth}" @click="showPic(index)" class="pics-item" v-for="(url, index) in inn.pics"
|
||||
@@ -249,14 +246,12 @@ import {
|
||||
import {formatDateTime} from "@/utils";
|
||||
import {getUrlParam} from "@/utils/common.js";
|
||||
import imgBox from '@/components/imageTypeSet/imagebox.vue'
|
||||
import dragButton from "@/components/drag-button/drag-button.vue";
|
||||
import cookie from "@/utils/store/cookie";
|
||||
|
||||
var that;
|
||||
export default {
|
||||
components: {
|
||||
imgBox,
|
||||
dragButton
|
||||
imgBox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user