123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508 |
- <template>
- <view class="goods">
- <view class="hint flexS">
- <image src="../../static/imgs/shop/goods_hint.png" class="hint_icon"></image>
- <text>点击图片可查看商品详情</text>
- </view>
-
- <view class="goods_box" v-for="(item, idx) in goods" :key="item.id">
- <view class="goods_info flexS">
- <image :src="item.img" class="goods_img" @click="skipDetail(item.id)"></image>
- <view class="goods_con" @click.stop="checkGoods(item, idx)">
- <view class="goods_name">{{ item.name }}</view>
- <view class="one_year" style="width: 120rpx;">3条装</view>
- <view class="goods_price flexB">
- <view class="flexS">
- <view class="big_price">
- <text>¥</text>
- <text>{{ item.price }}</text>
- </view>
- <view class="save_box">VIP可省{{ Number(item.price) - Number(item.vip_price) || 0 }}</view>
- </view>
- <view class="check_icon">
- <text class="iconfont iconxuanzhong" v-if="item.checked"></text>
- <text class="iconfont iconweixuanzhong" v-else></text>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="share_btn flexCC" @click="shareNow">立即分享</view>
- <view class="share_show" v-if="shareShow">
- <view class="share_con flexCC">
- <text class="iconfont iconguanbi" @click="shareShow = false"></text>
- <view class="canvas">
- <view class="canvas">
- <canvas canvas-id="canvas" style="width: 100%;height:100%;" id="canvas"><img :src="poster"
- class="poster_img" mode="widthFix" @click="preview" /></canvas>
- </view>
- </view>
- <view class="save_img">点击图片-长按-发送给朋友</view>
- </view>
- </view>
- <view class="qrimg">
- <tki-qrcode ref="qrcode" :val="code.val" :size="code.size" :icon="code.icon" :iconSize="code.iconsize"
- :onval="code.onval" :loadMake="code.loadMake" :showLoading="code.showLoading"
- :loadingText="code.loadingText" @result="drawPoster" />
- </view>
- </view>
- </template>
- <script>
- import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
- import {
- getSku
- } from '@/apis/shop.js';
- export default {
- data() {
- return {
- goods: '',
- store: '',
- shareShow: false,
- poster: '',
- code: {
- val: '',
- size: 200,
- icon: '',
- iconsize: 25,
- onval: true,
- loadMake: '',
- showLoading: true,
- loadingText: '二维码生成中...'
- },
- codeImg: '',
- shareGoods: {},
- canvasWidth: '',
- canvasHeight: '',
- model: '',
- qr_code: '',
- store_img: ''
- };
- },
- onLoad() {
- this.getGoods();
- uni.getSystemInfo({
- success: res => {
- this.model = res.model;
- this.canvasWidth = res.windowWidth / 375;
- this.canvasHeight = res.windowHeight;
- }
- });
- },
- onShow() {
- this.store = uni.getStorageSync('store');
- this.qr_code = uni.getStorageSync('qrCode');
- if (this.store) {
- uni.getImageInfo({
- src: this.store.img,
- success: res => {
- this.store_img = res.path
- }
- })
- }
- },
- methods: {
- preview() {
- uni.previewImage({
- current: this.poster,
- urls: [this.poster]
- });
- },
-
- skipStock() {
- uni.navigateTo({
- url: '../stock-manage/stock-manage'
- })
- },
-
- skipDetail(id) {
- uni.navigateTo({
- url: '../goods-detail/goods-detail?goods_id=' + id
- });
- },
-
- subNum(data) {
- let subNum = 0;
- data.sku.map(i => {
- subNum += i.num;
- });
- return subNum;
- },
-
- shareNow() {
- if (!this.qr_code) {
- uni.showModal({
- content: '为了方便客户加你微信咨询购买,请先上传微信二维码',
- showCancel: false,
- success: res => {
- if (res.confirm) {
- uni.navigateTo({
- url: '../add-qrcode/add-qrcode'
- });
- }
- }
- });
- return false;
- }
- let arr = [];
- let ids = [];
- let list = this.goods;
- list.map(i => {
- if (i.checked) {
- arr.push(i);
- ids.push(i.id);
- }
- });
- if (ids.length == 0) {
- uni.showModal({
- content: '请先选择商品',
- showCancel: false
- });
- return false;
- }
- let goods_id = ids.join(',');
- this.code.val =
- `${this.$config.share_url}#pages/index/index?store_id=${this.store.id}&goods_id=${goods_id}`;
- this.$refs.qrcode._makeCode();
- this.shareShow = true;
- },
- dataURLtoFile(dataurl, filename = 'file') {
- let arr = dataurl.split(',');
- let mime = arr[0].match(/:(.*?);/)[1];
- let suffix = mime.split('/')[1];
- let bstr = atob(arr[1]);
- let n = bstr.length;
- let u8arr = new Uint8Array(n);
- while (n--) {
- u8arr[n] = bstr.charCodeAt(n);
- }
- return new File([u8arr], `${filename}.${suffix}`, {
- type: mime
- });
- },
- blobToDataURI(blob, callback) {
- var reader = new FileReader();
- reader.readAsDataURL(blob);
- reader.onload = function(e) {
- callback(e.target.result);
- };
- },
-
- drawPoster(codeImg) {
- let that = this;
- let store = this.store;
- uni.getImageInfo({
- src: 'https://api.wd.cliu.cc/shop_poster.jpg',
- success: res => {
- uni.showLoading({
- title: '图片加载中...'
- });
- let shopName = store.name.length > 9 ? store.name.slice(0, 9) + '...的店铺' : store.name +
- '的店铺';
- let ctx = uni.createCanvasContext('canvas');
- let rpx = that.canvasWidth;
- ctx.drawImage(res.path, 0, 0, 270 * rpx, 480 * rpx);
- ctx.font = 'normal bold 16px pingfang';
- ctx.textAlign = 'center';
- ctx.fillText(shopName, uni.upx2px(270), uni.upx2px(390));
- ctx.drawImage(codeImg, uni.upx2px(110), uni.upx2px(420), uni.upx2px(320), uni.upx2px(
- 320));
- ctx.font = 'noraml bold 14px pingfang';
- ctx.textAlign = 'center';
- ctx.setFillStyle('#060001');
- ctx.fillText('微信-扫一扫-进店铺', uni.upx2px(270), uni.upx2px(790));
- ctx.beginPath();
- ctx.arc(uni.upx2px(100) / 2 + uni.upx2px(222), uni.upx2px(100) / 2 + uni.upx2px(240),
- uni.upx2px(100) / 2,
- 0, Math.PI * 2, false);
- ctx.clip();
- ctx.drawImage(this.store_img, uni.upx2px(222), uni.upx2px(240), uni.upx2px(100), uni
- .upx2px(
- 100));
- ctx.restore();
- setTimeout(res => {
- ctx.draw(false, () => {
- uni.canvasToTempFilePath({
- width: 270 * rpx,
- height: 480 * rpx,
- canvasId: 'canvas',
- success: res => {
- if (this.model == 'iPhone') {
- this.poster = this.dataURLtoFile(res
- .tempFilePath).name;
- } else {
- let url = res.tempFilePath.replace(
- /\. +/g, '');
- this.poster = url.replace(/[\r\n]/g,
- '');
- }
- }
- });
- });
- uni.hideLoading();
- }, 2000);
- }
- })
- },
-
- getGoods() {
- uni.showLoading({
- title: '加载中....'
- });
- getSku({
- type: 2
- })
- .then(res => {
- if (res.code == 200) {
- let list = res.data;
- list.map(i => {
- this.$set(i, 'checked', false);
- });
- this.goods = list;
- }
- uni.hideLoading();
- })
- .catch(err => {
- uni.hideLoading();
- });
- },
- checkGoods(item, idx) {
- this.goods[idx].checked = !this.goods[idx].checked;
- }
- }
- };
- </script>
- <style>
- page {
- width: 100vw;
- overflow-x: hidden;
- min-height: 100%;
- background: #f9f9fb;
- }
- </style>
- <style lang="scss" scoped>
- .goods {
- display: flex;
- flex-direction: column;
- position: relative;
- .hint {
- width: 100%;
- height: 88rpx;
- background: #fcf7c0;
- padding-left: 30rpx;
- .hint_icon {
- width: 56rpx;
- height: 56rpx;
- margin-right: 10rpx;
- }
- text {
- font-size: 32rpx;
- color: #ff6400;
- }
- }
- .stock_box {
- width: 690rpx;
- height: 160rpx;
- background: linear-gradient(267deg, #F1292C 0%, #D2118B 100%);
- border-radius: 24rpx;
- margin: 20rpx auto 0;
- padding: 0 30rpx;
- box-sizing: border-box;
- .stock_icon_box {
- width: 80rpx;
- height: 80rpx;
- background: linear-gradient(180deg, #FFA600 0%, #FCBC05 100%);
- border-radius: 8rpx;
- margin-right: 20rpx;
- .stock_icon {
- width: 56rpx;
- height: 54rpx;
- }
- }
- .stock_con {
- text,
- view {
- color: #fff;
- }
- view {
- font-size: 32rpx;
- }
- text {
- font-size: 28rpx;
- }
- }
- .arrow {
- width: 36rpx;
- height: 40rpx;
- }
- }
- .goods_box {
- margin-top: 30rpx;
- .goods_info {
- padding: 10rpx;
- width: 100%;
- min-height: 236rpx;
- background: #fff;
- .check_icon {
- .iconfont {
- font-size: 55rpx;
- margin-right: 30rpx;
- }
- .iconweixuanzhong {
- color: #999;
- }
- }
- .goods_img {
- width: 220rpx;
- height: 176rpx;
- border-radius: 24rpx;
- flex-shrink: 0;
- margin: 0 20rpx;
- }
- .goods_con {
- flex: 1;
- .goods_name {
- font-size: 30rpx;
- font-weight: 600;
- }
- .goods_price {
- .price {
- color: $base-color;
- font-weight: 600;
- font-size: 36rpx;
- }
- .vip {
- font-size: 28rpx;
- font-weight: bold;
- }
- .vip_img {
- width: 88rpx;
- height: 36rpx;
- vertical-align: -6rpx;
- margin-right: 10rpx;
- }
- }
- }
- }
- }
- .share_btn {
- width: 100%;
- height: 100rpx;
- background: $base-line-bg;
- position: fixed;
- bottom: 0;
- left: 0;
- z-index: 999;
- color: #fff;
- font-size: 32rpx;
- }
- .share_show {
- width: 100%;
- height: 100vh;
- position: fixed;
- top: 0;
- left: 0;
- background-color: rgba(0, 0, 0, 0.7);
- z-index: 9999;
- .share_con {
- width: 80%;
- margin: 0 auto;
- height: 100%;
- z-index: 999999;
- .canvas {
- width: 540rpx;
- height: 960rpx;
- position: relative;
- #canvas {
- width: 540rpx;
- height: 960rpx;
- position: absolute;
- top: 0;
- left: 0;
- }
- .poster_img {
- -webkit-touch-callout: default;
- width: 100%;
- height: 100%;
- display: block;
- }
- img[src=''],
- img:not([src]) {
- opacity: 0;
- }
- }
- .save_img {
- color: #fff;
- width: 100%;
- text-align: center;
- font-size: 40rpx;
- margin-top: 20rpx;
- }
- .iconfont {
- position: absolute;
- top: 4vh;
- right: 25rpx;
- color: #dedede;
- font-size: 60rpx;
- z-index: 999;
- }
- }
- .sub_btn {
- margin-top: 76rpx;
- }
- }
- .qrimg {
- opacity: 0;
- }
- }
- </style>
|