珠宝小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

347 lines
6.6 KiB

5 months ago
5 months ago
3 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
  1. <template>
  2. <view class="page">
  3. <navbar/>
  4. <!-- 未登录提示 -->
  5. <view class="not-login" v-if="!isLogin">
  6. <view class="tips">登录后查看您的购物车</view>
  7. <view class="login-btn" @click="$utils.toLogin">立即登录</view>
  8. </view>
  9. <view class="user" v-if="isLogin">
  10. <uv-checkbox-group
  11. shape="circle"
  12. v-model="checkboxValue">
  13. <uv-swipe-action>
  14. <view
  15. v-for="(item, index) in list"
  16. :key="item.id">
  17. <view style="margin-top: 20rpx;"></view>
  18. <uv-swipe-action-item
  19. @click="e => deleteCart(e, item)"
  20. :options="options">
  21. <view class="item">
  22. <view class="checkbox">
  23. <uv-checkbox
  24. :name="item.id"
  25. activeColor="#eb3300"
  26. size="40rpx"
  27. icon-size="35rpx"
  28. ></uv-checkbox>
  29. </view>
  30. <image
  31. class="image"
  32. :src="item.image &&
  33. item.image.split(',')[0]"
  34. mode=""></image>
  35. <view class="info">
  36. <view class="title">
  37. <view class="">
  38. {{ item.title }}
  39. </view>
  40. </view>
  41. <view class="unit">
  42. 规格{{ item.sku }}
  43. <!-- <uv-icon name="arrow-down"></uv-icon> -->
  44. </view>
  45. <view
  46. style="display: flex;
  47. justify-content: space-between;
  48. align-items: center;">
  49. <view class="price">
  50. <text>{{ item.price }}</text>
  51. </view>
  52. <view class="">
  53. <uv-number-box v-model="item.num"
  54. @change="e => valChange(item, e)"></uv-number-box>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. </uv-swipe-action-item>
  60. </view>
  61. </uv-swipe-action>
  62. </uv-checkbox-group>
  63. <uv-empty
  64. v-if="list.length == 0"
  65. text="空空如也"
  66. textSize="30rpx"
  67. iconSize="200rpx"
  68. icon="list"></uv-empty>
  69. <view class="action">
  70. <view class="icon">
  71. <image src="/static/image/cart/1.png" mode=""></image>
  72. <view class="num">
  73. {{ checkboxValue.length }}
  74. </view>
  75. </view>
  76. <view class="price">
  77. <view class="count">
  78. 合计
  79. <view class="">
  80. <text>{{ totalPrice }}</text>
  81. </view>
  82. </view>
  83. <view class="text">
  84. {{ checkboxValue.length }}已享受更低优惠
  85. </view>
  86. </view>
  87. <view class="btn"
  88. @click="submit">
  89. 去结算
  90. </view>
  91. </view>
  92. </view>
  93. <kefu></kefu>
  94. <tabber select="cart" />
  95. </view>
  96. </template>
  97. <script>
  98. import tabber from '@/components/base/tabbar.vue'
  99. import mixinsList from '@/mixins/list.js'
  100. export default {
  101. mixins : [mixinsList],
  102. components: {
  103. tabber,
  104. },
  105. data() {
  106. return {
  107. isLogin: false,
  108. value : 0,
  109. checkboxValue : [],
  110. options: [
  111. {
  112. text: '删除',
  113. style: {
  114. backgroundColor: '#f40'
  115. }
  116. },
  117. ],
  118. mixinsListApi : '',
  119. }
  120. },
  121. computed: {
  122. totalPrice(){
  123. if (!this.checkboxValue.length) {
  124. return 0
  125. }
  126. let price = 0
  127. this.list.forEach(n => {
  128. if(this.checkboxValue.includes(n.id)){
  129. price += n.price * n.num
  130. }
  131. })
  132. return price
  133. },
  134. },
  135. onLoad(){
  136. this.checkLogin()
  137. },
  138. onShow() {
  139. this.checkLogin()
  140. },
  141. methods: {
  142. // 检查是否登录
  143. checkLogin() {
  144. const token = uni.getStorageSync('token')
  145. this.isLogin = !!token
  146. if (this.isLogin) {
  147. this.mixinsListApi = 'getCartPageList'
  148. this.getData()
  149. }
  150. },
  151. valChange(item, e) {
  152. this.$api('updateCartNum', {
  153. id: item.id,
  154. num: e.value,
  155. })
  156. },
  157. // 立即下单
  158. submit(){
  159. if(this.checkboxValue.length == 0){
  160. uni.showToast({
  161. title: '请选择商品',
  162. icon: 'none',
  163. })
  164. return
  165. }
  166. let arr = []
  167. this.list.forEach(n => {
  168. if(this.checkboxValue.includes(n.id)){
  169. arr.push(n)
  170. }
  171. })
  172. this.$store.commit('setPayOrderProduct', arr)
  173. this.$utils.navigateTo('/pages_order/order/createOrder')
  174. },
  175. deleteCart(e, item){
  176. this.$api('deleteCart', {
  177. ids : item.id
  178. }, res => {
  179. this.getData()
  180. })
  181. },
  182. }
  183. }
  184. </script>
  185. <style scoped lang="scss">
  186. .page {
  187. padding-bottom: 200rpx;
  188. /deep/ .uv-swipe-action{
  189. width: 100%;
  190. }
  191. }
  192. .not-login {
  193. display: flex;
  194. flex-direction: column;
  195. align-items: center;
  196. justify-content: center;
  197. height: 400rpx;
  198. background-color: #fff;
  199. margin: 20rpx;
  200. border-radius: 16rpx;
  201. .tips {
  202. font-size: 32rpx;
  203. color: #666;
  204. margin-bottom: 30rpx;
  205. }
  206. .login-btn {
  207. background-color: $uni-color;
  208. color: #fff;
  209. padding: 20rpx 80rpx;
  210. border-radius: 40rpx;
  211. font-size: 30rpx;
  212. }
  213. }
  214. .user {
  215. .item{
  216. background-color: #fff;
  217. display: flex;
  218. padding: 30rpx;
  219. .checkbox{
  220. display: flex;
  221. justify-content: center;
  222. align-items: center;
  223. }
  224. .image{
  225. width: 200rpx;
  226. height: 200rpx;
  227. border-radius: 20rpx;
  228. }
  229. .info{
  230. flex: 1;
  231. .title{
  232. display: flex;
  233. padding: 10rpx 20rpx;
  234. justify-content: space-between;
  235. }
  236. .unit{
  237. font-size: 24rpx;
  238. padding: 10rpx 20rpx;
  239. color: #717171;
  240. display: flex;
  241. align-items: center;
  242. }
  243. .price{
  244. color: $uni-color;
  245. font-size: 28rpx;
  246. padding: 10rpx 20rpx;
  247. text{
  248. font-size: 36rpx;
  249. font-weight: 900;
  250. }
  251. }
  252. }
  253. }
  254. .action{
  255. width: 700rpx;
  256. position: fixed;
  257. bottom: 220rpx;
  258. left: 25rpx;
  259. background-color: #fff;
  260. height: 100rpx;
  261. border-radius: 50rpx;
  262. box-shadow: 0 0 6rpx 6rpx #00000010;
  263. display: flex;
  264. justify-content: center;
  265. align-items: center;
  266. overflow: hidden;
  267. z-index: 999;
  268. .icon{
  269. position: relative;
  270. width: 80rpx;
  271. height: 80rpx;
  272. margin: 0 20rpx;
  273. image{
  274. width: 80rpx;
  275. height: 80rpx;
  276. }
  277. .num{
  278. position: absolute;
  279. right: 10rpx;
  280. top: 0rpx;
  281. background-color: $uni-color;
  282. color: #fff;
  283. font-size: 18rpx;
  284. border-radius: 50%;
  285. height: 30rpx;
  286. width: 30rpx;
  287. display: flex;
  288. justify-content: center;
  289. align-items: center;
  290. }
  291. }
  292. .price{
  293. .count{
  294. display: flex;
  295. font-size: 26rpx;
  296. align-items: center;
  297. view{
  298. color: $uni-color;
  299. margin-left: 10rpx;
  300. text{
  301. font-size: 32rpx;
  302. font-weight: 900;
  303. }
  304. }
  305. }
  306. .text{
  307. font-size: 20rpx;
  308. color: #717171;
  309. }
  310. }
  311. .btn{
  312. margin-left: auto;
  313. background-color: $uni-color;
  314. height: 100%;
  315. padding: 0 50rpx;
  316. color: #fff;
  317. display: flex;
  318. justify-content: center;
  319. align-items: center;
  320. }
  321. }
  322. }
  323. </style>